BootsFaces selectMultiMenu does not render correctly

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:

selectMultiMenu render fail

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.

I think BootFaces and PrimeFaces css might collide here. Check your browser developer tool what is all applied... — Kukeltje
No PrimeFaces rule is applied to multiselect-container dropdown-menu. BootFaces should "play nicely with PrimeFaces" — Jasper de Vries
I managed to reproduce the problem. It's got nothing to do with PrimeFaces. BTW, our marketing statement means that BootsFaces is designed to work with PrimeFaces. It goes without saying that every once we might miss or introduce an imcompatibility, but we're going to fix any incompatibility as soon as possible. — Stephan Rauh

Stephan Rauh Stephan Rauh · Accepted Answer · 2015-07-11T09:13:03

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.

BootsFaces selectMultiMenu does not render correctly

1 Answers