Question

我正在使用新的Primefaces 6.2 RC，我需要改变它的大小。

我将大小设置如下，但组件保持相同的大小：

<p:chips size="800"/>

或：

<p:chips style="width: 400px; height: 800px"/>

有谁知道我怎么能改变它的大小？

提前致谢。

Answer 1

解决方案1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Chips</title>
    <style type="text/css">
.ui-chips {
    width: 100%;
}

.ui-chips-container {
    width: 100%;
}
</style>
</h:head>
<h:body style="background-color:red">
    <h:form>
        <p:chips />
    </h:form>
</h:body>
</html>

解决方案2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Chips</title>
    <style type="text/css">
.ui-chips-container {
    width: 100%;
}
</style>
</h:head>
<h:body style="background-color:red">
    <h:form>
        <p:chips style="width:100%" />
    </h:form>
</h:body>
</html>

我提出了一个问题，要与primefaces团队https://github.com/primefaces/primefaces/issues/2249确认。

据我所知，风格= 100％适用于ui-chips的DIV。

在下一行

ui-chips-container的默认宽度为400px，来自components.css 这导致输入（芯片）字段保持在400px。

选项3：根据Primefaces团队我明白你的意思了。我认为最灵活的是需要将一个inputStyle + inputStyleClass以及一个chipStyle和chipStyleClass添加到chi标签本身的自定义样式中。如果您现在需要完成此任务，您可以使用CSS轻松完成。

<style>
.chip-width > .ui-chips-container {
   width: 800px;
}
</style>
And in your XHTML.

<p:chips id="chips" styleClass="chip-width"/>

Primefaces芯片Web组件 - 属性

1 个答案: