Page 1 of 1
Reduce the width of SELECT (v2022)
Posted: Wed Apr 13, 2022 12:50 pm
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.
Re: Reduce the width of SELECT
Posted: Thu Apr 14, 2022 8:31 am
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.
Re: Reduce the width of SELECT
Posted: Sun Apr 17, 2022 2:13 am
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.
Re: Reduce the width of SELECT
Posted: Mon Feb 27, 2023 4:32 pm
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
Re: Reduce the width of SELECT (v2022)
Posted: Mon Feb 27, 2023 5:57 pm
by arbei
Re: Reduce the width of SELECT (v2022)
Posted: Wed Mar 08, 2023 3:35 pm
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;
}
Re: Reduce the width of SELECT (v2022)
Posted: Thu Mar 09, 2023 9:00 am
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
Re: Reduce the width of SELECT (v2022)
Posted: Fri Mar 10, 2023 5:45 pm
by mobhar
Try not to include the .select2-container
css class from the code that related to your control.
Re: Reduce the width of SELECT (v2022)
Posted: Sat Mar 18, 2023 6:57 am
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;
}
Re: Reduce the width of SELECT (v2022)
Posted: Sat Mar 18, 2023 8:48 am
by arbei
If you put your CSS under HTML -> Styles -> User tab, note that you can use SCSS, learn Nesting here.