2013-10-11 18 views
0

我在對話框中使用自動完成。問題是自動完成未正確顯示。圖片將diescribe它最好的,所以這是它的樣子:icefaces - 在對話框中使用自動完成

enter image description here

正如你可以看到自動完成不完全可見的滾動條出現在右邊。我想要實現的是自動完成功能在沒有滾動條的情況下完全可見。這是我想達到什麼:

enter image description here

這是示例代碼(原來的應用程序代碼過於複雜,所以我創建演示應用程序,它在相同的方式工作):

的index.xhtml

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:ice="http://www.icesoft.com/icefaces/component" 
    xmlns:ace="http://www.icefaces.org/icefaces/components" 
    xmlns:iscecore="http://www.icefaces.org/icefaces/core"> 
<h:head> 
    <title>Insert title here</title> 
    <ice:outputStyle href="./xmlhttp/css/xp/xp.css" rel="stylesheet" 
     type="text/css" /> 
</h:head> 
<h:body> 
    <h:commandButton id="show" value="Show Dialog" onclick="sampleDialog.show();"/> 
    <ace:dialog id="dialogId" header="Dialog example" 
     widgetVar="sampleDialog" draggable="true" modal="true"> 
     <h:outputText value="dialog content"></h:outputText> 
     <h:form id="autoCompleteForm"> 
      <ace:dialog id="dialogId" header="Dialog example" 
       widgetVar="sampleDialog" draggable="true" modal="true"> 
       <h:outputText value="dialog content"></h:outputText> 
      </ace:dialog> 
      <ace:autoCompleteEntry id="componentId" rows="10" width="150" 
       value="#{autoCompleteEntryBean.selectedText}" 
       filterMatchMode="startsWith" label="Select city:"> 
       <f:selectItems value="#{autoCompleteEntryBean.cities}" /> 
      </ace:autoCompleteEntry> 
     </h:form> 
    </ace:dialog> 
</h:body> 
</html> 

AutoCompleteEntryBean.java

package icefacesAutocompleteProblem; 

import java.util.ArrayList; 
import java.util.List; 

import javax.annotation.PostConstruct; 
import javax.faces.bean.ManagedBean; 
import javax.faces.bean.ViewScoped; 
import javax.faces.model.SelectItem; 

@ManagedBean 
@ViewScoped 
public class AutoCompleteEntryBean { 

    private String selectedText; 
    private List<SelectItem> cities; 

    @PostConstruct 
    public void init() { 
     cities = new ArrayList<SelectItem>(); 
     cities.add(new SelectItem("Warsaw")); 
     cities.add(new SelectItem("Warsaw1")); 
     cities.add(new SelectItem("Warsaw2")); 
     cities.add(new SelectItem("Warsaw3")); 
     cities.add(new SelectItem("Warsaw4")); 
     cities.add(new SelectItem("Warsaw5")); 
     cities.add(new SelectItem("Warsaw6")); 
     cities.add(new SelectItem("Warsaw7")); 
     cities.add(new SelectItem("Warsaw8")); 
     cities.add(new SelectItem("Warsaw9")); 
     cities.add(new SelectItem("Warsaw10")); 
     cities.add(new SelectItem("Warsaw11")); 
     cities.add(new SelectItem("Warsaw12")); 
    } 

    public String getSelectedText() { 
     return selectedText; 
    } 

    public void setSelectedText(String selectedText) { 
     this.selectedText = selectedText; 
    } 

    public List<SelectItem> getCities() { 
     return cities; 
    } 

} 
+0

你能提供''代碼嗎? –

+0

我創建了演示應用程序,它顯示了問題(原始代碼太複雜)。請參閱我的編輯。 – pepuch

回答

1

問題通過爲ace:dialog設置overflow: visible;解決,它的內容(div [id $ ='_main'])。

相關問題