Reduce the width of SELECT (v2022)

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
bui
User
Posts: 277

Reduce the width of SELECT (v2022)

Post by bui »

I am using version 2022.11
In a Master / Details Add Page, I am using a SELECT in the Details page and want to reduce the width of the SELECT field
Master Table Name -
Details Table Name -

From the F12

<span class="select2-selection__rendered" id="select2-x1__class-container" role="textbox" aria-readonly="true" title="class">
<span class="select2-selection__placeholder">class</span>
</span>

I have gone through viewtopic.php?f=4&t=50888 but unable to resolve it.

I try the css as -

#select2-x1__class-container {
min-width: 5px;
max-width: 10px;
}

I also try with

.el_admission__class{
min-width: 5px;
max-width: 10px;
}

In both the case the width of SELECT of the class field has not reduce.


arbei
User
Posts: 9286

Post by arbei »

The width of Select2 is controlled by the CSS selector .select2-container. Right click the element in Chrome and select Inspect to check CSS.


apis
User
Posts: 124

Post by apis »

Just insert this in HTML/styles/user

.ew-select, .select2-container {
    min-width: 30em !important;
    display: inline-block;
}

u can change "30em" to any size you want to.

after generating the code again try.


dennyagung
User
Posts: 17

Post by dennyagung »

Thank u. That is work but
How do i give the size to each select. select 1 size10 em select 2 size10 20 em


arbei
User
Posts: 9286

Post by arbei »

You may use a more specific CSS selector, see Inspect HTML element and add your own CSS styles.


mobhar
User
Posts: 11660

Post by mobhar »

I've just tried this code in demo2023 project for orderdetails table, and it seems it works properly for Grid-Add, Grid-Edit, Inline-Copy, and Inline-Edit mode, too:

.ew-select, .select2-container {
  min-width: 15em !important;
}

#x0_ProductID.form-control.ew-select.select2-hidden-accessible, .select2-container {
  min-width: 10em !important;
}

dennyagung
User
Posts: 17

Post by dennyagung »

Your css script is successful if only 1 select. but if there are 2 selects in one view then your css script cannot succeed because the 2nd width select will follow the 1st width select

.ew-select, .select2-container {
min-width: 15em !important;
}

#x1_Kategori.form-control.ew-select.select2-hidden-accessible, .select2-container {
  min-width: 10em !important;
}

#x0_Item.form-control.ew-select.select2-hidden-accessible, .select2-container {
  min-width: 15em !important;
}

#x0_NoKursi.form-control.ew-select.select2-hidden-accessible, .select2-container {
  min-width: 5em !important;
}

Item, Kategori and NoKursi in one page css not work because they will follow the css NoKursi


mobhar
User
Posts: 11660

Post by mobhar »

Try not to include the .select2-container css class from the code that related to your control.


dennyagung
User
Posts: 17

Post by dennyagung »

can't work

#x1_Kategori.form-control.ew-select.select2-hidden-accessible {
  min-width: 10em !important;
}

#x0_Item.form-control.ew-select.select2-hidden-accessible {
  min-width: 15em !important;
}

#x0_NoKursi.form-control.ew-select.select2-hidden-accessible {
  min-width: 5em !important;
  }

arbei
User
Posts: 9286

Post by arbei »

If you put your CSS under HTML -> Styles -> User tab, note that you can use SCSS, learn Nesting here.


Post Reply