2013-10-07 3 views
0

IE에서 JSF 응용 프로그램을 실행하는 중에 문제가 발생합니다.JSF selectCheckBoxMenu가 IE에서 제대로 작동하지 않습니다.

jsf의 selectcheckboxmenu은 결함이 있으며 항목 아래에있는 메뉴 항목의 체크 박스가 이동합니다. 확인란은 여전히 ​​있습니다. 아래는 내가 직면하고있는 무슨의 스크린 샷은 다음과 같습니다 Image and video hosting by TinyPic

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

은 selectcheckboxmenu에 대한 코드는 다음과 같습니다

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

친절하게 말해 어디에 내가 잘못 가고하십시오 그리고 무엇이 문제인지. 미리 감사드립니다.

답변

2

IE와 호환성 문제가 있습니다. Primeface는 IE9 호환성에서 뛰어납니다. 그리고이 문제로 인해 확인란이 작동하지 않습니다.

나는 동일한 문제를 겪었습니다. 그래서 그냥 내가 CSS 속성으로 고정

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

IE9에서 잘 작동하는 데 도움을 주신 덕분입니다. IE 7 & 8에서 제대로 작동하도록하는 방법이 있습니까? – Kush

+0

예상대로 IE 7과 8에서 작동하지 않을 것입니다 ... – BholaVishwakarma

+0

IE7과 IE8에서 테스트 할 때 절대적으로 _must_ 나중에 IE8로 테스트하십시오. 그렇다면 가상 머신을 설정해야한다는 의미입니다. IE9와 IE10의 호환 모드는 절대적으로 _ 낡습니다. 이전 환경을 제대로 모방하지 않습니다. 제 경험상, IE8은 IE7을 제대로 에뮬레이트했습니다. – patstuart

1

패키지 이름과 클래스를 배치 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; 
} 
} 

의 라이프 사이클을 사용하여 그리고 당신의 얼굴-config.xml 파일에서 호환성보기를 설정해야 '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; 
} 

firefox, chrome 및 ie9에서 테스트되었습니다.

관련 문제