how to change size of element according to screen size

[Evgene Karachevtsev]

Hello Ellen,

Please clarify - do you want to change width of your select menu one time and it will have such width always? Or you need to change width of your select menu automatically, when some event happens?

[Ellen Schlechter]

I want it to always have the same width depending on screen size. I would want it to be about 25% of the page.

[Evgene Karachevtsev]

Hello Ellen,

Please add custom CSS and create there such class

pre.ui-select {
width: 25%
}/pre

It should resolve your problem

[Ellen Schlechter]

I have it in a grid so so it makes it 25% of the grid. Can I made a grid 25% of the width? I can't add a class to it.

[Yurii Orishchuk]

Hi Ellen,

Nope. CSS works relative to the first sized parent. This parent in your case is grid cell.

Regards.

[Ellen Schlechter]

Is there any way to adjust the screen size??

Or as an alternative is there a way to have two select menus right beside eachother in the header without the grid?

[Ellen Schlechter]

????

[Yurii Orishchuk]

Hi Ellen,

Yes you can use custom JS code which is:

1. Get document size(width).

2. Calculate needed select width(using document with and some logic).

3. Set width of the select. Here is an example code:

   pre

   Apperyio("mobileselectmenu_30").closest('[data-role="fieldcontain"]').width(400);

   /pre

   Regards.

[Ellen Schlechter]

The builder doesn't seem to like that code.

[Ellen Schlechter]

Update: I used the code below as a little bit of a model along with yours.
var documentWidth = jQuery(document).width();
alert(documentWidth);
var goalWidth=(documentWidth)*(25)/100;
alert(goalHeight);
$("mobilegridcell_438").attr('style', 'width:'+goalWidth+'px !important');

This is what I used but I got the same error as in my previous comment.