empty-page

Locked
joao_arthur
Posts: 38
Joined: 09 Mar 2015, 15:40

11 Feb 2016, 04:02

the empty-page page is not responsive? the components that I put on this page can not adapt to the screen size, how should I do to make it fully responsive?
Top
mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

11 Feb 2016, 09:34

Please try ui-fluid class on parent div of your content;
Exp;

Code: Select all

<ui:define name="content">

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect TexAlCenter">
                   // Content
                </div>
            </div>
        </div>
        
</ui:define>
Details; http://www.primefaces.org/showcase/ui/m ... sive.xhtml
Top
joao_arthur
Posts: 38
Joined: 09 Mar 2015, 15:40

14 Feb 2016, 05:51

does not work, the components does not fit the screen size

Code: Select all

<ui:define name="content">
		<div class="Container100 ui-fluid">
			<div class="ContainerIndent">
				<div class="Card ShadowEffect TexAlCenter">
					<br />
					<h2>Cadastro de Academias</h2>
					<br />
					<h:form id="frmCad">
						<p:messages id="msg" autoUpdate="true" closable="true" />

						<p:toolbar style="margin-bottom: 6px; margin-top:10px">
							<p:toolbarGroup>
								<p:button value="Novo" outcome="/academia/cadastro"
									icon="fa fa-file-o" styleClass="myIconStyle" />
								<p:commandButton value="Salvar" id="btnSalvar" icon="fa fa-save"
									styleClass="myIconStyle" validateClient="true" update="@form" />
							</p:toolbarGroup>

							<p:toolbarGroup align="right">
								<p:button value="Pesquisar" outcome="/academia/pesquisa"
									icon="icon-search-1" styleClass="myIconStyle" />
							</p:toolbarGroup>
						</p:toolbar>

						<h:panelGrid columns="4" layout="grid"
							style="width: 100%; margin-top: 20px; margin-bottom: 20px">

							<p:outputLabel value="Cnpj:" />
							<p:inputText required="true" requiredMessage="Cnpj obrigatório!" />

							<p:outputLabel value="Razão Social:" />
							<p:inputText size="50" required="true"
								requiredMessage="Razão Social obrigatório!" />

							<p:outputLabel value="Nome Fantasia:" />
							<p:inputText size="50" />

							<p:outputLabel value="Email:" />
							<p:inputText size="50" />

							<p:outputLabel value="Contato:" />
							<p:inputText size="50" />

							<p:outputLabel value="Endereço:" />
							<p:inputText size="50" />

							<p:outputLabel value="Bairro:" />
							<p:inputText size="50" />

							<p:outputLabel value="Cidade:" />
							<p:inputText size="50" />

							<p:outputLabel value="UF:" />
							<p:inputText size="10" />

							<p:outputLabel value="Cep:" />
							<p:inputText />
						</h:panelGrid>

					</h:form>
				</div>
			</div>
		</div>
	</ui:define>
Top
mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

15 Feb 2016, 09:46

Please try the following code;

Code: Select all

<ui:define name="content">
        <div class="Container100 ui-fluid">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect TexAlCenter">
                    <br />
                    <h2>Cadastro de Academias</h2>
                    <br />
                    <h:form id="frmCad">
                        <p:messages id="msg" autoUpdate="true" closable="true" />

                        <p:toolbar style="margin-bottom: 6px; margin-top:10px">
                            <p:toolbarGroup styleClass="Wid20">
                                <p:panelGrid layout="grid" columns="2" columnClasses="ui-panelgrid-blank" style="border:0px !important; background:none;">
                                    <p:button value="Novo"
                                              icon="fa fa-file-o" styleClass="myIconStyle" />
                                    <p:commandButton value="Salvar" id="btnSalvar" icon="fa fa-save"
                                                     styleClass="myIconStyle" validateClient="true" update="@form" />
                                </p:panelGrid>
                            </p:toolbarGroup>

                            <p:toolbarGroup align="right">
                                <p:button value="Pesquisar"
                                          icon="icon-search-1" styleClass="myIconStyle" />
                            </p:toolbarGroup>
                        </p:toolbar>

                        <p:panelGrid columns="4" layout="grid" styleClass="ui-panelgrid-blank" columnClasses="ui-grid-col-2, ui-grid-col-4, ui-grid-col-2, ui-grid-col-4"
                                     style="margin-top: 20px; margin-bottom: 20px">

                            <p:outputLabel value="Cnpj:" />
                            <p:inputText required="true" requiredMessage="Cnpj obrigatório!" />

                            <p:outputLabel value="Razão Social:" />
                            <p:inputText size="50" required="true"
                                         requiredMessage="Razão Social obrigatório!" />

                            <p:outputLabel value="Nome Fantasia:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Email:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Contato:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Endereço:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Bairro:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Cidade:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="UF:" />
                            <p:inputText size="10" />

                            <p:outputLabel value="Cep:" />
                            <p:inputText />
                        </p:panelGrid>

                    </h:form>
                </div>
            </div>
        </div>
    </ui:define>
You need to use p:panelGrid with layout="grid". Also, you should use style classes of grid css in columnClasses for a good display; http://www.primefaces.org/showcase/ui/panel/grid.xhtml
Top
joao_arthur
Posts: 38
Joined: 09 Mar 2015, 15:40

20 Feb 2016, 17:55

It does not work, I tried in every way, the rio is compatible with Primefaces 5.3 ?

I am using the latest version
Top
mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

20 Feb 2016, 18:13

Please see;
Layout is compatible with any PrimeFaces version. Theme is officially supported for 5.0, 5.1, 5.2 and 5.3. Older versions will still work however not covered under maintenance.
I couldn't replicate this issue. I tested with my above code. it works fine. Do you use our sample maven? Can you please attach a screenshot?
Top
joao_arthur
Posts: 38
Joined: 09 Mar 2015, 15:40

21 Feb 2016, 23:28

Image
Top
mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

22 Feb 2016, 13:59

I couldn't replicate the issue. Please check your css file and try this issue in our sample project.

My screenshot;
Image

My empty page;

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="content">
        <div class="Container100 ui-fluid">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect TexAlCenter">
                    <br />
                    <h2>Cadastro de Academias</h2>
                    <br />
                    <h:form id="frmCad">
                        <p:messages id="msg" autoUpdate="true" closable="true" />

                        <p:toolbar style="margin-bottom: 6px; margin-top:10px">
                            <p:toolbarGroup>
                                <p:panelGrid layout="grid" columns="2" columnClasses="ui-panelgrid-blank" style="border:0px !important; background:none;">
                                    <p:button value="Novo"
                                              icon="fa fa-file-o" styleClass="myIconStyle" />
                                    <p:commandButton value="Salvar" id="btnSalvar" icon="fa fa-save"
                                                     styleClass="myIconStyle" validateClient="true" update="@form" />
                                </p:panelGrid>
                            </p:toolbarGroup>

                            <p:toolbarGroup align="right">
                                <p:button value="Pesquisar"
                                          icon="fa fa-search" styleClass="myIconStyle" />
                            </p:toolbarGroup>
                        </p:toolbar>

                        <p:panelGrid columns="4" layout="grid" styleClass="ui-panelgrid-blank" columnClasses="ui-grid-col-2, ui-grid-col-4, ui-grid-col-2, ui-grid-col-4"
                                     style="margin-top: 20px; margin-bottom: 20px">

                            <p:outputLabel value="Cnpj:" />
                            <p:inputText required="true" requiredMessage="Cnpj obrigatório!" />

                            <p:outputLabel value="Razão Social:" />
                            <p:inputText size="50" required="true"
                                         requiredMessage="Razão Social obrigatório!" />

                            <p:outputLabel value="Nome Fantasia:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Email:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Contato:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Endereço:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Bairro:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="Cidade:" />
                            <p:inputText size="50" />

                            <p:outputLabel value="UF:" />
                            <p:inputText size="10" />

                            <p:outputLabel value="Cep:" />
                            <p:inputText />
                        </p:panelGrid>

                    </h:form>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>
Top
joao_arthur
Posts: 38
Joined: 09 Mar 2015, 15:40

25 Feb 2016, 03:14

does not work, I took your code but the page is unresponsive, follow all steps of the installation according to the documentation for you in the theme of the page.
Top
joao_arthur
Posts: 38
Joined: 09 Mar 2015, 15:40

25 Feb 2016, 03:18

see the image the structure of my project, conforms to the documentation or not ?

Image
Top
Locked

Return to “Rio”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 4 guests