Question

如附在此处的屏幕截图所示，我试图在同一行内显示输入文本框和搜索按钮 JSF小组。

我还想让内容对屏幕尺寸做出响应。输出＆＃34;今天是什么日子？＆＃34; 在很大程度上有所回应，但两者都有文本框和搜索按钮没有响应。

此外，搜索按钮（和输入框）让我感到非常遗憾

任何帮助都会很棒。

代码

<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分辨率的用户界面

修复字体大小后，使用ScreenShot更新了问题

虽然文本框和搜索按钮中提到的字体大小虽然固定，但是相对于屏幕尺寸仍然不完全流畅，如下面附带的屏幕截图所示。任何帮助都会感激不尽！

Answer 1

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

代码更改：我在panelGrid中使用了grid属性的grid选项，并且在div块中使用了＆＃34; ui-g＆＃34;对于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中定位组件以进行响应式布局

1 个答案: