2013-10-11 4 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

Проблема решена путем установки overflow: visible; для туза: диалог и его содержимое (div [id $ = '_ main']).