p：间隔宽度根据屏幕分辨率变化

我在我的xhtml文件中使用p:spacer在面板网格左侧创建一些空白空间，右侧有两个按钮。对齐方式对于分辨率（1366 X 768屏幕）工作良好。但是，如果使用IE 10浏览器在分辨率为1280 X 1024的屏幕上打开该页面，则左侧空间会增大，右侧按钮将不再显示，并且会出现一个水平滚动条。我不希望用户滚动查看按钮。示例代码如下。p：间隔宽度根据屏幕分辨率变化

<p:accordionPanel value="#{dataBean.userList}" var="j" activeIndex="null"> 
    <p:tab title="#{j.department} - #{j.userCount}"> 
    <p:panelGrid columns="2"> 
    <p:column> 
     <p:spacer width="1050" height="5" /> 
    </p:column> 
    <p:column>

如何把根据分辨率调整的空间？

使用PrimeFaces 4.0。

来源

2014-09-24 Coder4Jsf

我不会推荐使用p:spacer作为这种特殊情况。相反，你可以玩风格来实现你想要做的事情。这将工作：

使用这种风格（把它无论你有你的CSS）：

<style type="text/css"> 
    .grid{width: 100%;} 
    .column1{width: 100%;} 
    .column2{} 
</style>

而在p:panelGrid的styleClass和columnClasses属性像这样使用它：

<p:accordionPanel value="#{dataBean.userList}" var="j" activeIndex="null"> 
    <p:tab title="#{j.department} - #{j.userCount}"> 
     <p:panelGrid columns="2" styleClass="grid" columnClasses="column1,column2"> 
      <p:column></p:column> 
      <p:column> 
       <p:commandButton value="hi"/> 
       <p:commandButton value="bye"/> 
      </p:column> 
     </p:panelGrid> 
    </p:tab> 
</p:accordionPanel>

通过这种方式，您的第一列将占用所有可用空间，使第二列的按钮与右侧对齐，而不依赖于分辨率。

来源

2014-09-25 11:00:42 mrganser

p：间隔宽度根据屏幕分辨率变化

回答

相关问题