Bootstrap-select: Select 'required' parameter not working

[justintoth]

+1

[t0xicCode]

Could you create a jsfiddle for this?

[maguagua]

+1

[kieste]

+1

see https://bugzilla.mozilla.org/show_bug.cgi?id=630495
https://bugzilla.mozilla.org/show_bug.cgi?id=595451 ....

[rwyland]

+1

[matiaslabra]

+1

[navilink]

Sorry for super late reply. Here's the jsfiddle simple example: https://jsfiddle.net/adtu3zv8/

Chrome 43: Doesn't popup "Please select item.."
Firefox 38: Popup "Please select item.." but not positioned at the select but on top-left most of the window

[ashleydw]

I'm interest to hear what people make of the method I have used and have suggestions/ideas of alternatives. I have only managed to do this by making the multiselect div overlay the original element (which remains visible in the dom but opacity:0, aria-hidden and beneath the new element), thus allowing the HTML5 required browser tooltip to be displayed.

This works in chrome but is untested in other browsers. Commit of interest: https://github.com/3floorsup/bootstrap-select/commit/51a1b58d0bc0adf8559d0143d33d0f0ea8617e3b

(My fork contains other fixes which aren't related to this issue)

[injaon]

I've the same problem. Is there a solutions for this?

[cyberjar09]

I'm using @ashleydw's fork. Works fine for me. Why is this not integrated as a pull request?

[5minpause]

@ashleydw's fork works for me as well. Splendid commit.
You should open a PR @ashleydw (I checked and couldn't find your commit as a PR).

[dmolineus]

When is the next release planned which would integrate this bugfix?

[szegheo]

It seems buggy again in Chrome :(
http://codepen.io/anon/pen/NxMMPW?editors=1000

Works OK in latest Firefox, Edge..

[root91]

hey everyone! U can easily fix it with css:

.btn-group.bootstrap-select select {
width: 1px !important;
}

opacity is set 0 and position absolute will hide your original select but u will see the warning.

[EcoFreak]

This does not work for Internet Explorer right?

I'm getting problems with users using IE11.

Any thoughts?

[TCOA]

@root91 - you deserve more than a thumbs up! :) easy patch (would prefer it in the main program) and works great - thanks!

[dinukasal]

hey everyone! U can easily fix it with css:

.btn-group.bootstrap-select select {
width: 1px !important;
}

opacity is set 0 and position absolute will hide your original select but u will see the warning.

saved my time :D

[caseyjhol]

This seems to work fine for me using the latest version of bootstrap-select. If somebody can show me an example of it not working, I'll reopen the issue.

[ppazos]

@caseyjhol tried 1.13.12 on FF 66.0.3 Linux and "required" is not working.

I'm styling the select to match bootstrap's default theme:

.bootstrap-select {
      width: 100% !important;
    }
    .bootstrap-select .status { /* fix to the status vertical position */
      margin-bottom: -8px !important;
      margin-top: 3px !important;
    }
    .bootstrap-select > .btn.dropdown-toggle { /* make bootstrap select look like normal */
      background-color: white;
      border: 1px solid #ced4da;
    }

Also tried @root91 CSS but didn't work:

.btn-group.bootstrap-select select {
      width: 1px !important;
    }

[ppazos]

It seems the selectpicker ajax extension is breaking the required