gpt4 book ai didi

css - icefaces - 在对话框中使用自动完成

转载 作者:太空宇宙 更新时间:2023-11-04 14:29:02 26 4
gpt4 key购买 nike

我在对话框中使用自动完成功能。问题是自动完成没有正确显示。图像将对其进行最好的描述,所以这就是它的样子:

enter image description here

如您所见,自动完成并不完全可见,滚动条出现在右侧。我想要实现的是自动完成将在没有滚动条的情况下完全可见。这就是我想要实现的目标:

enter image description here

这是示例代码(原始应用程序代码太复杂,所以我创建了以相同方式工作的演示应用程序):

索引.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;
}

}

最佳答案

通过为 ace:dialog 及其内容 (div[id$='_main']) 设置 overflow: visible; 解决了这个问题。

关于css - icefaces - 在对话框中使用自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19319410/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com