Dropdown Problem

[osquiabro]

in version 12.05 the dropdown is not a same at version 11.43

version 12.05 this is extract
<select name="Mem__LugarNacimientoPais" id="Mem__LugarNacimientoPais" class="nt-entry ui-corner-all nt-select nt-upper nt-entry-required" style="width: 275px; display: none;" data-do="imm" data-formproc="updateperfil" data-widget="selectmenu">
<option value="" selected="selected" style="width: 138.5em;"></option>
<option value="AFGANISTÁN" style="width: 138.5em;">AFGANISTÁN</option>
<option value="ALEMANIA" style="width: 138.5em;">ALEMANIA</option>
<option value="ARABIA SAUDITA" style="width: 138.5em;">ARABIA SAUDITA</option>

version 11.43
<select name="Mem__LugarNacimientoPais" id="Mem__LugarNacimientoPais" class="nt-entry ui-corner-all nt-select nt-upper nt-entry-required" style="width: 275px" data-do="imm" data-formproc="updateperfil">
<option value="" selected="selected" class=" SelectList1" style="width: 138.5em;"></option>
<option value="AFGANISTÁN" class=" SelectList2" style="width: 138.5em;">AFGANISTÁN</option>
<option value="ALEMANIA" class=" SelectList1" style="width: 138.5em;">ALEMANIA</option>
<option value="ARABIA SAUDITA" class=" SelectList2" style="width: 138.5em;">ARABIA SAUDITA</option>

the first different is style="display: none;" in 12.05, second different in version 12.05 the class=" SelectList1" and class=" SelectList2" don't generate

if you remove the style = "display: none;" in Devtools generates for 12.05 there are 2 dropdown menus but the first work as before look image3

image 1 is v.12.05
image 2 is v.11.43

[Bruce]

Hi Osa,

>> in version 12.05 the dropdown is not a same at version 11.43

Indeed it is not. As mentioned in the release docs the drop-down is now using the jQuery UI "Selectmenu" widget so that it can be styled to match the rest of the site.

If you want to change the CSS of the select rows, then you can simply use something like
.nt-select-height>.ui-menu-item{
   background-color:red;
}
in your CSS

If you want to do some sort of green-barring type effect in the CSS, then you could use something like this;
.nt-select-height>.ui-menu-item:nth-child(odd){
   background-color:red;
}

cheers
Bruce

[osquiabro]

Bruce in the previous version 11.43 i can control the width as shown in the image, in version 12.05 this configuration does not work, and neither does the height, there is a post that can be controlled via css but I have several dropdowns and I want them all to open with the same height.

[osquiabro]

look at https://fecipur.org/Eventos this is the correct width and height I need in this form and in other form this

https://fecipur.org/UpdatePerfil?insert_btn=insert

with 12.05 always genera the same width and height for all dropdowns

[Vinnie]

I am sure Bruce will have the correct answer for you but this is my works around 12.05

In my custom.css

to fix drop height of drop list to 30em. If that is what you mean by height of drop selection

.nt-select-height {
height:30em;
}

to fix width of field

.ui-selectmenu-button.ui-button {
    text-align: left;
    white-space: nowrap;
    width: 15em !important;
}

Not sure if this is helpful but works for me.

[osquiabro]

thanks Vinnie, yours ccs work but the problem is that no all my dropdown need the same size

[Bruce]

>> but the problem is that no all my dropdown need the same size

then create a custom css class for each size that you want to support, and add that class to the select control.

you could also experiment with setting;

.nt-select-height {
height:fit-content;
max-height:30em;
}

I don't know if that will help you.

cheers
Bruce

[osquiabro]

I have my custom.css with your suggestion, i tried all the CSS options in the dropdown field, but it doesn't work, I saw in html that it generates a code with role = "listbox", in this section if I apply my custom.css it works but this not available via css field type.

[Bruce]

I've tidied up the CSS options for the Drop list for 12.06

[osquiabro]

I downloaded version 12.06 but how do I see this setting?

[Vinnie]

Just updated to Nettalk 12.06


Form Field Drop Down Add -
      Entry Part -  ' customentrypart-dropdown'
      Drop part - ' customdroppart-dropdown'

Added this to custom.css


.customentrypart-dropdown{
    width: 20em !important;
}

.customdroppart-dropdown{
    min-height:30em !important;
    text-align: left;
    white-space: nowrap;
    width: 20em !important;
}

[Bruce]

Hi Osa,

>> I downloaded version 12.06 but how do I see this setting?

You modify the CSS, it's not a setting in the template.

the idea (more and more) is to let the template generate HTML, and let the CSS do the styling.

Cheers
Bruce