BootsFaces selectMultiMenu does not render correct

Question

I'm on Mojarra 2.2.7, PrimeFaces 5.2, BootsFaces 0.7.0.

I'm creating my first BootsFaces page. I've got it configured, resources are loaded and I was able to create a container with a panel with a b:inputText and a b:selectOneMenu. Now I would like to add a b:selectMultiMenu:

<b:selectMultiMenu nonSelectedText="Please select">
  <f:selectItem itemLabel="Option 1" itemValue="1"/>
  <f:selectItem itemLabel="Option 2" itemValue="2"/>
  <f:selectItem itemLabel="Option 3" itemValue="3"/>
</b:selectMultiMenu>

It's rendered incorrectly (options are always visible, on top of the button), but the options are selectable; also the caret is missing:

Is this a common pitfall?

I have checked my browsers debugging tools (Chromium) and no errors are visible in the network pane; for example /javax.faces.resource/css/bootstrap-multiselect.css?ln=bsf, /javax.faces.resource/js/bootstrap-multiselect.js?ln=bsf and other resources are loaded. Also no errors in the Javascript console. So I can't find any obvious errors.

Answer 1

Thanks for reporting this bug. I've opened a ticket on our Bugtracker. Until the new version of BootsFaces is published, you have three choices:

• Add an <b:dropMenu /> somewhere on your page (for example, to the navbar).
• Add the missing dependencies by hand: xml <h:head> <h:outputStylesheet library="bsf" name="css/dropdowns.css"></h:outputStylesheet> <h:outputScript library="bsf" name="js/dropdown.js" target="body"></h:outputScript> </h:head>
• If you're the adventurous one, build and use the developer version of BootsFaces (BootsFaces 0.8.0-SNAPSHOT). It's a Maven project host at https://github.com/TheCoder4eu/BootsFaces-OSP.

I've also uploaded a demo project showing the first two workarounds.