JSF selectCheckBoxMenu not working properly in IE

Question

I am facing an issue with my jsf application while running it on IE.

The selectcheckboxmenu on jsf behaves faulty and has the checkboxes of the menu it

Answer 1

There is compatibility problem with IE. Primefaces runs good on IE9 compatibility. And your check box is not working beacause of this.

I had gone through the same issues. So you have to set the Compatibility view by using the life cycle of jsf

public class UACompatibleHeaderPhaseListener implements PhaseListener {
@Override
public void afterPhase(PhaseEvent arg0){}

@Override
public void beforePhase(PhaseEvent event){
    final FacesContext facesContext = event.getFacesContext();
    final HttpServletResponse response = (HttpServletResponse) facesContext.getExternalContext().getResponse();
    response.addHeader("X-UA-Compatible", "IE=edge");
}

@Override
public PhaseId getPhaseId() {
     return PhaseId.RENDER_RESPONSE;
}
}

And in your Faces-config.xml just place the class with the packagename

<lifecycle>
   <phase-listener>
     com.jsf.listener.UACompatibleHeaderPhaseListener
   </phase-listener>
</lifecycle>

Answer 2

I fixed it with css property 'vertical-align',

div.ui-selectcheckboxmenu.ui-widget{
width: 100% !important;
}
div.ui-widget-header.ui-corner-all.ui-selectcheckboxmenu-header.ui-helper-clearfix{
padding: 3px !important;

}
input.ui-inputfield.ui-inputtext.ui-widget.ui-state-default.ui-corner-all{

width: 90% !important;

}
div.ui-chkbox-box.ui-widget.ui-corner-all{
vertical-align: top !important;
margin-top: 3px !important;
}
div.ui-selectcheckboxmenu-filter-container{
width:75% !important;
vertical-align: top !important;
margin-left: 2px !important;
}

Tested on firefox, chrome and ie9.