0

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 : Image and video hosting by TinyPic

[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.

miroslav_mijajlovic
  • 1,703
  • 17
  • 31
Kush
  • 75
  • 1
  • 2
  • 8

2 Answers2

2

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>
Kerem Baydoğan
  • 10,475
  • 1
  • 43
  • 50
BholaVishwakarma
  • 581
  • 6
  • 18
  • well thanks for help it is working fine in IE9. Is there any way we can make it work fine on IE 7 & 8 ?? – Kush Oct 07 '13 at 11:14
  • When testing in IE7 and IE8, do you absolutely _must_ test with nothing later IE8. If that means you have to set up a virtual machine, then do it. IE9 and IE10's compatibility mode is absolutely _awful_ and doesn't properly emulate the old environments at all. In my experience, IE8 did properly emulate IE7 though. – patstuart Oct 07 '13 at 14:44
1

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.

Debutantjsf
  • 109
  • 1
  • 5