【问题标题】:PrimeFaces p:selectOneMenu widthPrimeFaces p:selectOneMenu 宽度
【发布时间】:2013-05-22 23:25:54
【问题描述】:

我希望p:selectOneMenu 的宽度对于父单元格是自动的,而不是它所具有的值。

<p:panelGrid>
    <p:row>
        <p:column><p:outputLabel value="Value01" for="idInput01"/></p:column>
        <p:column><p:inputText  value="#{bean.input01}" id="idInput01" /></p:column>
        <p:column><p:outputLabel value="Value02" for="idSelect" /></p:column>
        <p:column>
            <p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter">
                <f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="#{varObject.label}" itemValue="#{varObject}" />
            </p:selectOneMenu>
        </p:column>
    </p:row>
</p:panelGrid>

我有什么:

我的期望:

注意:我不想指定固定宽度。

【问题讨论】:

  • 编辑后的答案现在应该可以使用了。

标签: css jsf-2 primefaces


【解决方案1】:

我的解决方案:autoWidth="false"

【讨论】:

  • 这根本不是解决办法。从 selectOneMenu 中获取 autoWith 的效果是 primefaces 停止将 with 信息添加到选择一个菜单渲染器泵入 HTML 的 div 和 label 元素中。如果这对您有用,则很可能意味着您有一些父 .css 设置了输入字段的最小值。这个值可能更高,看起来更好。如果你没有这样的横切 CSS,你会很不走运,很有可能。问题似乎是 pimrefaces 6.0 在 autoWidth 计算中存在错误。还没想好在哪里。
  • 这个错误很可能在某些 6.X 版本中得到修复。在 6.0 的社区版中 - 进入下拉 div 的最小宽度是 100% 错误计算的。它似乎是根据下拉列表中的选定元素而不是最胖的标签计算的。
【解决方案2】:

我覆盖了 .ui-selectonemenu, .ui-selectonemenu-label 到:

.ui-selectonemenu{
     width: 100% !important;
}
.ui-selectonemenu-label{
     width: 100% !important;
}  

【讨论】:

  • 但我还有一个问题;它扩展为包含它拥有的所有文本!
  • 我不太了解jQury,所以我通过了你的回复,再次抱歉
【解决方案3】:

我发现的唯一方法是在加载时使用jQuery 来初始化宽度。

您可以像这样简单地创建一个 CSS 类(只是用作未来的选择器):

.full-width
{

}

并将其添加到您的组件中:

<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width">
    <f:selectItems value="#{bean.objectsList}" var="varObject"  itemLabel="{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>

由于您将需要 jQuery,如果您尚未使用 PrimeFaces 组件,则应将其添加到您的 h:head 中。

<h:outputScript library="primefaces" name="jquery/jquery.js" />

这是初始化选择器中所有 p:selectOneMenu 的小脚本:

<script>
    $(document).ready(
        function()
        {
            $("div.ui-selectonemenu.full-width").each(
                function()
                {
                    $(this).css("width",$(this).parent().width());
                }
            );
        }
    );
</script>

【讨论】:

  • 不幸的是,它不会以这种方式工作,尽管这是一种自然的方式,因为选择元素将被 PF 创建的一堆“帮助”标签包裹。 PrimeFaces 以某种方式计算这些附加块的宽度,并且在 JS 实现中存在一些错误。使用两行和两个具有不同项目标签长度的 PF 选择标签进行测试。所以我基本上不知道问题的解决方法。
  • @skuntsel 我还没有使用 PrimeFaces,它会呈现一个普通的 &lt;select /&gt; 吗?你的评论我不这么认为! :(
  • 确实如此。选择被隐藏,下拉菜单本身呈现为div,带有ul/li 样式。因此,width:100% 仅在有一个 &lt;p:selectOneMenu&gt; 是一张桌子的情况下才无害地工作。此外,PF 可能通过内联样式的宽度覆盖 CSS 类。
  • 我已经用 Firebug 在 PrimeFaces 展示柜上进行了测试,我们需要更改两个元素的宽度,它们之间的宽度至少相差 16 像素……坏事。它们应包含width 属性。
  • 在使用具有多个下拉列表的表格时会出现双重问题。我的测试证实了订单很重要,以及您将其放置的方式和位置width。最终,当您以非预期的 PF 方式分配宽度以及在下拉列表中输入一些内容时,会出现 UI 问题,这是文本部分和向下箭头按钮之间填充的空白灰色空间。
【解决方案4】:

您可以直接在组件中添加width的值来修改它,避免影响页面中存在的其他p:selectOneMenu。

<p:selectOneMenu  style="width: 100% !important">
...
</p:selectOneMenu>

【讨论】:

    【解决方案5】:

    我现在有一个适当的解决方法。

    Primefaces 6.0 现在有一个名为 autoWidth 的新字段,默认设置为 true,您可以设置为 false。

    如果您按照上述某些回复所说的进行操作并将其设置为 false,那么您所做的就是与您的应用程序 css 玩轮盘赌。 通过将其设置为 false,primefaces 将由您来管理宽度。 您可以通过 style 属性显式设置 selectOneMeny 的宽度,也可以在应用程序中设置一些 css 类。

    但这不是这个问题的内容,这个问题是关于不为下拉菜单指定任何宽度的默认行为导致我们的下拉菜单通常对于那里的标签来说太小了。

    所以我们真正想要的是让 autoWidth 正常工作。

    最后,我查看了组件和渲染器,很明显自动宽度机制在后端不起作用。 后端只构建一些类似 JSON 的数据,primefaces javascript 构建器可以使用这些数据在浏览器上正确调整小部件的行为。

    如果你查看 primefaces 6.0 源代码,错误就在 META-INF\resources\primefaces\forms 中

    搜索显示以下内容的代码:

    PrimeFaces SelectOneMenu 小部件

    在这个 javascript 函数中寻找如下代码块:

    _render: function() {
            if(this.cfg.autoWidth) {
    

    在这部分代码中,您的错误是以下行:

    this.jq.css('min-width', this.input.outerWidth());
    

    在这里,我应用了以下补丁,希望它可以使下拉框与最大标签一样胖:

     _render: function() {
            if(this.cfg.autoWidth) {
                // BEGIN: PATCHING 
                // ORIGINAL CODE:
                // this.jq.css('min-width', this.input.outerWidth());            
                // BUGFIX:
                // (a) compute the original min-with primefaces 6.0 would put on the root div
                var primefacesBugWidth = this.input.outerWidth();
                // (b) compute the length of the hidden select element  with all the labels inside of it
                var widthOfHiddenDivWithSelectLabels = this.jq.find('div select').width();
                var widthOfTheDropDownTriangle = this.jq.find('.ui-selectonemenu-trigger.ui-state-default.ui-corner-right').width();
                var widthOfLabelPlusTraingle = widthOfHiddenDivWithSelectLabels + widthOfTheDropDownTriangle;
                // (c) we will use whichever length is longer
                // in bug-fixed primefaces version the outerWidth should be computed correctly
                // but this seems not to be the case 
                var maxWidthOfTwoPossibleOptions = primefacesBugWidth > widthOfLabelPlusTraingle ? primefacesBugWidth : widthOfLabelPlusTraingle;
                this.jq.css('min-width', maxWidthOfTwoPossibleOptions);
                // END: PATCHING
            }        
        }
    

    上面代码的思路是: (a) 查看带有所有标签的隐藏 div 并获取该 div 的宽度 (b) 将素面三角形朝下所需的宽度添加到该长度 (c) 将我们计算的宽度与 primefaces 建议的宽度进行比较,这似乎太小了

    注意: 要安装补丁,您必须复制 SelectOneWidget 的所有 Primaces 代码。 将其添加到您控制下的 javascript 文件中。 确保仅在加载 primefaces javascript 文件后运行 javascript 文件的编译。

    通常在 HEAD 处呈现素面。 因此,如果您将 jasvacript 作为身体中的最后一个元素,您应该没问题。

    补丁对我来说工作正常。 这是我不喜欢维护的代码。

    【讨论】:

    • 我怀疑在 primefaces 的高级版本中这个错误不再存在。有人可以确认 primefaces 6.12 的状态吗?
    • 99Sono 这个错误仍然存​​在于 PF 6.12 中。为什么不将补丁提交到 GitHub 问题页面? github.com/primefaces/primefaces/issues
    • 如果我没记错的话,在 primefaces github“问题”上存在某种讨论,我对此进行了评论并在此处提供了此修复的链接。我相信这个特定问题就是这种情况。适当的做法是做一个拉取请求——这是真的——但我必须为此找时间。而且我假设通过提交评论,Optimmusprime 肯定会修复 Primefaces 的付费版本。
    【解决方案6】:

    您可以通过 CSS 标识元素并更改样式宽度。使其成为 100% 的容器。

    【讨论】:

      【解决方案7】:

      如果您的 p:selectOneMenu 位于指定宽度的 DIV 中,我发现在 p:selectOneMenu 上设置 style="width:100%;" 似乎适用于我的情况。

      【讨论】:

        【解决方案8】:

        问题可能是在呈现的 HTML 中设置的最小宽度。如果是这种情况,请使用 CSS 选择器固定宽度,如下所示:

        <p:selectOneMenu styleClass="fixed-width" ...
        

        然后定义 CSS

        .fixed-width { min-width: 100% !important; }
        

        这会将 selectOneMenu 小部件的宽度设置为父元素的宽度。要让它工作,父元素的宽度不应该是“自动”。

        【讨论】:

          【解决方案9】:

          那些对selectonemenu仍有问题的人可以试试这个

          .ui-selectonemenu {
              min-width: 0 !important;
          }
          

          非常适合我。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2014-04-19
            • 2013-01-05
            • 1970-01-01
            • 1970-01-01
            • 2012-12-17
            • 1970-01-01
            • 2012-01-14
            • 2012-05-06
            相关资源
            最近更新 更多