how to increase the width of a list?

hi,i have a field based on a lookup table. the caption of the element is long (more than 50 letters). when i open the list, i can see the full string but once i selected it and close the list, the caption is truncated.i tried to use CUSTOM ATTRIBUTS in field setup to add the property “style=‘width:400px;’” but it did not work.
do you have any advice ?Best regards

hi ,
I am not sure
But I use for this case the <style=“100%”> for the Tag in your add or edit Page ,
you may try add the style tag to this form line, Something like:

<form name="fappointmentsadd" id="fappointmentsadd" class="<?= $Page->FormClassName ?>" action="<?= CurrentPageUrl(false) ?>" method="post" style="width: 100%;">

Yo may always right click the element in your browser (assume Chrome) and select Inspect to check the actual HTML element you want to change (see Open the Elements panel to inspect the DOM or CSS, and then add your CSS under HTML → Styles → User tab to change. (Custom Attribute is for the actual field element, but sometimes the displaying element is not the actual field element, for example, Select2 will hide the actual element, so you need to find the correct element to change first.)

it is a system class, flex class i guess.
it said it is "custom-select ew-custom-select " class , even if i had :.ew-custom-select { width: 100%; }
.custom-select { width: 100%; }in my custom css file that phpmaker used (the one i attached in the generate html css window dialog) , the list style is not updated because override i guess…

You need to find and set the width of the actually HTML element controlling the width, it may be the parent element (or grand parent…) of the element you first inspect. Change/Test the CSS in your browser first, see View and change CSS.

i think the problem is more difficult to fix because there is a FLEX part that the F12 inpsctor can’t manage.just try it on your demo you’ll see.
add a very long trademark name in the table
and try to go to your demo page to extend the width of the list of trademark
phpdemo2020/modelsadd.php(i remind you the problem comes when the list is not opened. when you open the list to choose an item, the width is good and the names are full viewable, but once you close the list, the long name is troncated.)

You just have not found the correct HTML element yet, you may try the “span.select2-container”.

I have enabled a field for Extended Search and it appears as a combo box in the search panel above the table. Is there a way to control the width only of this combo box?I don’t want to change the stylesheet as that will change all the combo boxes in every page.I tried to insert [“width:400px”] in Custom Attributes of the field, but that does not work.

I’m new to this and it took me a while to figure out the exact format. Sharing here for those who are new to this:Right clicking got me this as the HTML code for my dropdown combobox:CourseTo target a specific id you insert the code with # followed by the id name in User Styles:

#select2-x_course_id-container {
min-width: 250px;
max-width: 330px;
}

Of course all pages which have course_id field as dropdown combobox are affected.Is there a way to target just one page as an exception? Or any way to insert style code in the field editor?

SRanade wrote:

Is there a way to target just one page as an exception? Or any way to insert style code in the field editor?

You may use a more specific CSS selector, press F12 in your browser, go to the Elements panel, right click the element, right click and select Copy → Copy selector, then adjust the selector as you need.

Please try
.select2 {
width:100% !important;
}
.ew-select, .select2-container {
min-width: auto !important;
}