i think it's 220px because it's the size of the bar

You have to do something like this

.well .mod-languages select { width: 100%; }

This was using position-7. The 220px is hard coded into the template CSS.

Perhaps that was the intention but if you resize the page it begins to overflow outside of the module.

What position are you using and what browser is your screenshot please?

Also, line 897 of template.css seems to specify form element styles.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input

Input box such as username and password in screenshots do not have a predefined width and appear to display correctly.

position-0

OK. Thanks. It would seem then that unless you are using position-0 the hardcoded 220px width of select will be problematic out of the box.

well, do the oposite them. with 100% for all, 220px for the css i refered.

I don't know if this will have problems with other positiosn though.

also i think you have to change the less file too. but i really never done that so i don't know for sure where it is.

There doesn't seem to be a 220px value in template.less or variables.less.

i think that's because template.less imports other less files https://github.com/joomla/joomla-cms/blob/staging/templates/protostar/less/template.less#L2-L87.

The 220px is hard coded into the template CSS.

Most of the fixed px sizes are Bootstrap 2. I don't know for sure if it was necessary for older browsers like IE7.

They have been removed in BS3 in favor of new form field classes.

This PR could not be merged in this state, as the select width is not set by the template, but by Bootstrap here :
https://github.com/joomla/joomla-cms/blob/staging/media/jui/less/forms.less#L164

And generated using the template.less here : https://github.com/joomla/joomla-cms/blob/staging/templates/protostar/less/template.less#L17

Then, i'm not sure it could be accepted to change JUI based on Bootstrap as it will affect all part of admin as well.
If a change is needed for select used in a module position, concerning only Protostar, the way would be to have a custom css inside the less file (not the template.css).

Maybe something like this (not tested) :

.well select { width: 100%; }

@JoomliC forms.less has been updated accordingly. The admin template should use its own styles from ISIS template should it not?

@wiserweb No, i don't think it's good to edit the form.less as used by all templates generating their form fields on running less.
If you want to propose a change only for Protostar, you have to add a css rule in template.less and then generate css. ;-)

should it not?

No it also uses media/jui/less for compiling css file. See template.less in Isis folder

And I see an B\C issue for other templates that use media/jui/less/

@JoomliC I looked into template.less for ISIS and I see...wow. I suppose it must be on someone's wish list that these two parts should be decoupled in the future.

@bertmert I agree .. I was missing some perspective .. this was supposed to be quick fix for Protostar only and it actually touches the rendering of the core template framework.

Can someone propose a fix for Protostar?

If you want to propose a change only for Protostar, you have to add a css rule in template.less and then generate css. ;-)

Something simple like this in Protostar template.less passable?

select {
    width: 100% !important;
}

@JoomliC @bertmert @andrepereiradasilva Added Protostar explicit rule for select element in template.less and generated less files using build tool. Reverted everything else.

@wiserweb If you change the code in the /templates/protostar/less/template.less then you need to generate css files using the /build/generatecss.php.

@wojsmol Thanks... I'm not quite sure what happened but it didn't generate. This PR is messy. I will delete and create a new clean one with single commit. Thanks for all the guidance.