如何在panelGrid内放置组件以进行响应式布局

莱库马迪帕克

如随附的屏幕截图所示，我试图在JSF面板内的同一行中显示输入文本框和搜索按钮。

我还想使内容与屏幕大小相对应。输出“今天是星期几？” 是很大程度的响应，但文本框和搜索按钮都没有响应。

搜索按钮（和输入框）也很安静，令我遗憾

任何帮助都会很棒。

码

<h:head>
    <title>What's The Day Today</title>
</h:head>
<h:body>
    <h:form id="form">
        <p:growl id="msgs" showDetail="true" />
        <p:panel id="watsthedaytodayPanel"
            style="background: cyan; font-size: 50px; margin-left: 25%; margin-right:25%;margin-top:150px; text-align: center;">
            <p:outputLabel for="mycalendar" value="What's the day today ?" />
            <p:spacer></p:spacer>
            <p:inputText placeholder="Enter text..."
                    value="#{calendarView.day}"></p:inputText>
                <p:commandButton value="Search" actionListener="#{calendarView.search }"
                    styleClass="ui-priority-primary" style="margin-left:20px;" update="result"></p:commandButton>
            <p:outputPanel id="result" ></p:outputPanel>

        </p:panel>
        </h:form>
</h:body>
</html>

原始用户界面：

在Mozilla中经过测试的自适应360 * 640分辨率上的UI

固定字体大小后更新了ScreenShot问题

字体大小虽然固定，如注释文本框和搜索按钮中所述，但相对于屏幕大小而言仍然不完全如下面的屏幕截图所示。任何帮助将是感激的！

莱库马迪帕克

通过在UI（.xhtml文件）中进行以下更改，我可以实现以下的流畅性和响应性。

代码更改：我在panelGrid中的布局属性中使用了grid选项，在该属性中，将带有“ ui-g”的div块用于12列布局结构。

免责声明：可以使用<p:layout>标签对其进行进一步优化，以实现任何屏幕尺寸的完美流动性。如果有时间，我会更新答案。

<p:panelGrid id="mySearchPanel" columns="1" layout="grid">
        <p:panel id="watsthedaytodayPanel"
            style="background: cyan; margin-left: 25%; margin-right:25%;margin-top:150px; text-align: center;">
            <h1>What's the day today ?</h1>
                <div class="ui-g">
                        <p:inputText placeholder="Enter text here" style="margin-left:15%;margin-right:0.25%"
                            value="#{calendarView.day}" styleClass="ui-g-8"></p:inputText>
                        <p:commandButton action="#{calendarView.search}"
                            update="result" icon="ui-icon-search"></p:commandButton>
                </div>
                <p:outputPanel id="result" ></p:outputPanel>
        </p:panel>
        </p:panelGrid>

用户界面的屏幕截图：