Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
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?
I want it to always have the same width depending on screen size. I would want it to be about 25% of the page.
Hello Ellen,
Please add custom CSS and create there such class
pre.ui-select {
width: 25%
}/pre
It should resolve your problem
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.
Hi Ellen,
Nope. CSS works relative to the first sized parent. This parent in your case is grid cell.
Regards.
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?
????
Hi Ellen,
Yes you can use custom JS code which is:
Get document size(width).
Calculate needed select width(using document with and some logic).
Set width of the select. Here is an example code:
pre
Apperyio("mobileselectmenu_30").closest('[data-role="fieldcontain"]').width(400);
/pre
Regards.
The builder doesn't seem to like that code.
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.