How to override the width of a select2?

PHPMaker General Discussion (PHPMaker)
1

Prior to v2021, I was able to control the width of tags by entering [‘style’ => ‘max-width:125px;’] as the edit custom attribute, but this doesn’t work in v2021.

According to the Select2 documentation, it should look at the style attribute and override the default width of 100% …but it doesn’t.

To be sure it wasn’t something silly, I’ve also tried [‘style’ => ‘max-width:125px !important;’], [‘style’ => ‘width:125px;’], [‘style’ => ‘width:125px !important;’], [‘style’ => ‘width:50%;’] and [‘style’ => ‘width:50% !important;’] but all variants are ignored, so I’m wondering if anyone else has cracked this issue?

2

Override the min-width attribute of the select2-container class. For example:

.select2-container {
min-width: 10em!important;
}

3

Thanks - works great :slight_smile:

4

arbei wrote:

Override the min-width attribute of the select2-container class. For
example:> .select2-container {
min-width: 10em!important;
}

Hi,how to apply this setting to a specific column with “select2-container”?
Example column name (x_Unit)Thanx

5

You may right click the element in Chrome and select Inspect, go to the Elements panel to find the specific selector for a HTML element, see View an element’s CSS.

6

arbei wrote:

You may right click the element in Chrome and select > Inspect> , go to the
Elements panel to find the specific selector for a HTML element, see > View
an element’s
CSS> .

Hi ,I have tried many ways, but no luck yet.
From the element panel what i found the Id for the column is id=“select2-x1_Unit-container” and then i have put the following in code in phpmaker->HTML->Styles-> user. but this does not work…select2-x1_Unit-container {
width: 12em;
}I have two select fields in the detail add page and i need only “Unit” column to resize.
My version of PHPmaker is the latest with latest updates.
pls. let me know how to fix this.Thank you

7

You need to select the element inside the column, you may google “Descendant Selector” for details.