如何在 panelGrid 中定位组件以实现响应式布局

Question

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

我还想让内容响应屏幕大小。输出 "What's the day today?" 在很大程度上响应，但两者文本框和搜索按钮没有响应。

搜索按钮（和输入框）也非常安静，令我感到遗憾

任何帮助都会很棒。

代码

<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>

原文UI:

UI 在 Mozilla

中测试的响应式 360*640 分辨率

固定字号后用截图更新问题

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

Answer 1

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

代码更改： 我在 panelGrid 中使用了布局属性的网格选项，并且在其中使用了 div 块和 "ui-g" 作为一个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>

UI的截图：

如何在 panelGrid 中定位组件以实现响应式布局

How to position components inside panelGrid for responsive layout

primefaces

jsf-2.2