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 items shifted below the items, The checkboxes are still there. Below is the screenshot of what i am facing :

[IMG]http://i43.tinypic.com/8yb976.jpg[/IMG]

the code for the selectcheckboxmenu is given below :

<p:selectCheckboxMenu value="#{formBean.selectedMovies}" label="Movies"
    filter="true" filterText="Filter" filterMatchMode="startsWith"
    panelStyle="width:220px">
    <f:selectItems value="#{formBean.movies}" />
</p:selectCheckboxMenu>

Please kindly tell me where am I going wrong and what is the problem. Thanks in advance.

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.