select2 input:focus border

[ajcastro]

Duplicate of #756. Since it was already closed, I will open a new issue for this. @almasaeed2010

It is because of the width set to the element. Maybe there is a jquery code that add the width to 519px.

If you uncheck the width css, it is fine:

[ajcastro]

Possible css fix, via chrome dev tools only to give you hints. @almasaeed2010

[ajcastro]

But the css above has also a problem. When it is applied, the input element will be always on the next line.
Maybe it is better if we remove the border on the input element.

[almasaeed2010]

Fixed in master (v2.4)

Thanks for detailed report and help @ajcastro!!

[ajcastro]

You're Welcome! Happy to contribute. 😊

[almasaeed2010]

Here is how it looks now

Please let me know if that's not how you see it in your browser

[ajcastro]

That design looks perfect!
But I visited https://adminlte.io/themes/AdminLTE/pages/forms/advanced.html and it looks like this.

[almasaeed2010]

@ajcastro please try clearing your browser cache and test again because it looks fine in my browser.
The only difference is that you are using chrome on Windows and I am using Mac so that might be causing the difference. Lastly, the width is apparently calculated via select2's JS. So, if the issue persists, please try upgrading to the latest select2 plugin (which we are planning to do for v2.4-beta-2).

Thanks!

[ajcastro]

Yeah, it's now perfect! 🍷

[AiltonOcchi]

I add this code in AdminLte.css
.select2-selection--single:focus
{border: 1px solid #3c8dbc;}