Responsive design modifies html structure

Drake · 24 Aug 2015, 16:41

Hi all,
I have a strange behaviour.
Consider this code

<div class="ui-fluid">
	<div class="ui-grid ui-grid-responsive">
		<div class="ui-grid-row">
			<div class="ui-grid-col-6">
				<p:panel id="anag_data" header="Data" toggleable="true"..>
			</div>
			<div class="ui-grid-col-6">
				<p:panel id="loy_position" header="Position" toggleable="true"...>
			</div>
		</div>
		<div class="ui-grid-row">
			<div class="ui-grid-col-6">
				<p:panel id="contact_data" header="Contact data" toggleable="true" ...>
			</div>
			<div class="ui-grid-col-6">
				<p:panel id="consenses" header="Consents" toggleable="true" ...>
			</div>
		</div>
	</div>
</div>

What I expect is a 4 panels grid (2 for each row), but html code produced is quite different.

Code: Select all

<div class="ui-fluid">
	<div class="ui-grid ui-grid-responsive">
		<div class="ui-grid-row">
			<div class="ui-grid-col-6">
				<div data-widget="widget_body_mainform_anag_data" class="ui-panel ui-widget ui-widget-content ui-corner-all" id="body:mainform:anag_data"...>
			</div>
			<div class="ui-grid-col-6">
				<div data-widget="widget_body_mainform_loy_position" class="ui-panel ui-widget ui-widget-content ui-corner-all" id="body:mainform:loy_position"...>
			</div>
		</div>
		<div class="ui-grid-row">
			<div class="ui-grid-col-6">
				<div data-widget="widget_body_mainform_contact_data" class="ui-panel ui-widget ui-widget-content ui-corner-all" id="body:mainform:contact_data"...>
				<div class="ui-grid-col-6">
					<div data-widget="widget_body_mainform_consenses" class="ui-panel ui-widget ui-widget-content ui-corner-all" id="body:mainform:consenses" ..></div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" autocomplete="off" value="-2275501143511528941:-8599029798580506845" id="j_id1:javax.faces.ViewState:5" name="javax.faces.ViewState">
</div>

So the 4th div is incorporated in the 3th div.
What am I wrong?

Thanks

kukeltje · 28 Aug 2015, 15:43

I'm 100% sure it does not modify things. Best guess is you have an unclosed tag somewhere.. Look at the real source on the client... (the view source, not the html tab in the console)

Drake · 31 Aug 2015, 10:25

Thanks for your replay!
I saw the real source and I think the problem is connected with Composite Component and <p:panelGrid layout="grid">.
In my 3th div I have a this compositeComponent

Code: Select all

<p>Start CC</p>
	<p>Start panelGrid</p>
		<p:panelGrid layout="grid" columns="4"
			columnClasses="ui-grid-col-2 right,ui-grid-col-4,ui-grid-col-2 right,ui-grid-col-4"
			styleClass="ui-panelgrid-blank" ...>
	<p>End panelGrid</p>
	...
<p>End CC</p>

The resulting html is

Code: Select all

<p>Start CC</p>
    <p>Start panelGrid</p>
		<div id="body:mainform:j_idt229:j_idt231"
			 class="ui-panelgrid ui-widget ui-panelgrid-blank">
			<div id="body:mainform:j_idt229:j_idt231_content"
				 class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive">
				....
			</div>
	<p>End panelGrid</p>
     ...
<p>End CC</p>

So, using composite component, <p:panelGrid layout="grid"> opens 2 <div>, but closes only 1.
If I use <p:panelGrid> without layout="grid" everything works fine, but of course it's rendered as table without any responsive layout.

kukeltje · 31 Aug 2015, 11:50

Are you sure there isn't an error in your cc? Missing a closing tag or something (or do you use implicit closing)? Please create an mcve and/or try newer jsf versions. I do not think this is PF related.

Drake · 31 Aug 2015, 14:31

I have upgraded to the last Mojarra version 2.2.12, but nothing changed.
I'm quite sure there's no error in my CC since if I delete

Code: Select all

layout="grid"

from the <p:panelGrid> the resulting html table has an appropriate closing tag.

Drake · 31 Aug 2015, 15:42

Here's a simple MCVE

demo.xhml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:demo="http://java.sun.com/jsf/composite/demo"
      xml:lang="it" lang="it"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
    <h:head>
        <f:facet name="first">
            <meta charset='utf-8'/>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <title>DEMO</title>
        </f:facet>
    </h:head>

    <h:body>
        <h:form id="form">

            <div class="ui-fluid">
                <div class="ui-grid ui-grid-responsive">
                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6">
                            <p:panel header="1"
                                     toggleable="true">
                                <p:panelGrid columns="2"
                                             columnClasses="ui-grid-col-2 right,ui-grid-col-4"
                                             layout="grid"
                                             styleClass="ui-panelgrid-blank">
                                    <p:outputLabel for="firstName" value="First Name"/>
                                    <h:panelGroup>
                                        <h:outputText id="firstName"/>
                                        <p:message for="firstName"/>
                                    </h:panelGroup>
                                </p:panelGrid>
                            </p:panel>
                        </div>
                        <div class="ui-grid-col-6">
                            <p:panel header="2" toggleable="true">
                                <p:panelGrid columns="4"
                                             columnClasses="ui-grid-col-2 right,ui-grid-col-4,ui-grid-col-2 right,ui-grid-col-4"
                                             layout="grid"
                                             styleClass="ui-panelgrid-blank">
                                    <p:outputLabel for="memberCode" value="Member Code"/>
                                    <h:panelGroup>
                                        <h:outputText id="memberCode"/>
                                        <p:message for="memberCode"/>
                                    </h:panelGroup>
                                </p:panelGrid>
                            </p:panel>
                        </div>
                    </div>
                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6">
                            <p:panel header="3" toggleable="true">
                                <demo:iDemo/>
                            </p:panel>
                        </div>
                        <div class="ui-grid-col-6">
                            <p:panel header="4" toggleable="true">
                                <p:panelGrid columns="2"
                                             columnClasses="ui-grid-col-2 right,ui-grid-col-4"
                                             layout="grid"
                                             styleClass="ui-panelgrid-blank">
                                    <p:outputLabel for="xxx" value="XXX"/>
                                    <h:panelGroup>
                                        <h:outputText id="xxx"/>
                                        <p:message for="xxx"/>
                                    </h:panelGroup>
                                </p:panelGrid>
                            </p:panel>
                        </div>
                    </div>
                </div>
            </div>
        </h:form>
    </h:body>
</f:view>
</html>

And iDemo.xhtml under resources/demo

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="it" lang="it"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">
<f:view contentType="text/html">
    <h:head/>
    <h:body>

        <composite:interface>
        </composite:interface>
        <composite:implementation>
            <div class="ui-fluid">
                <p:panelGrid columns="4"
                             columnClasses="ui-grid-col-2 right,ui-grid-col-4,ui-grid-col-2 right,ui-grid-col-4"
                             layout="grid"
                             styleClass="ui-panelgrid-blank">
                    <p:outputLabel for="telNum" value="Phone number"/>
                    <h:panelGroup>
                        <p:inputText id="telNum"/>
                        <p:message for="telNum"/>
                    </h:panelGroup>
                </p:panelGrid>
            </div>
        </composite:implementation>
    </h:body>
</f:view>
</html>

And here's the HTML produced

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>DEMO</title>
    <link type="text/css" rel="stylesheet" href="/loyalty/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo"/>
    <link type="text/css" rel="stylesheet"
          href="/loyalty/javax.faces.resource/fa/font-awesome.css.xhtml?ln=primefaces&v=5.3-SNAPSHOT"/>
    <link type="text/css" rel="stylesheet"
          href="/loyalty/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=5.3-SNAPSHOT"/>
    <script type="text/javascript"
            src="/loyalty/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.3-SNAPSHOT"></script>
    <script type="text/javascript"
            src="/loyalty/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.3-SNAPSHOT"></script>
    <script type="text/javascript"
            src="/loyalty/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=5.3-SNAPSHOT"></script>
    <script type="text/javascript">if (window.PrimeFaces) {
        PrimeFaces.settings.projectStage = 'Development';
    }</script>
</head>
<body>
<form id="form" name="form" method="post" action="/loyalty/login/demo.xhtml"
      enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="form" value="form"/>


    <div class="ui-fluid">
        <div class="ui-grid ui-grid-responsive">
            <div class="ui-grid-row">
                <div class="ui-grid-col-6">
                    <div id="form:j_idt6" class="ui-panel ui-widget ui-widget-content ui-corner-all"
                         data-widget="widget_form_j_idt6">
                        <div id="form:j_idt6_header"
                             class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span
                                class="ui-panel-title">1</span><a id="form:j_idt6_toggler" href="#"
                                                                  class="ui-panel-titlebar-icon ui-corner-all ui-state-default"><span
                                class="ui-icon ui-icon-minusthick"></span></a></div>
                        <div id="form:j_idt6_content" class="ui-panel-content ui-widget-content">
                            <div id="form:j_idt7" class="ui-panelgrid ui-widget ui-panelgrid-blank">
                                <div id="form:j_idt7_content"
                                     class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive">
                                    <div class="ui-grid-row">
                                        <div class="ui-panelgrid-cell ui-grid-col-2 right"><label id="form:j_idt8"
                                                                                                  class="ui-outputlabel ui-widget">First
                                            Name</label></div>
                                        <div class="ui-panelgrid-cell ui-grid-col-4"><span id="form:firstName"></span>

                                            <div id="form:j_idt10" aria-live="polite" class="ui-message"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="form:j_idt6_collapsed" name="form:j_idt6_collapsed" value="false"/>
                    </div>
                    <script id="form:j_idt6_s" type="text/javascript">PrimeFaces.cw("Panel", "widget_form_j_idt6", {
                        id: "form:j_idt6",
                        toggleable: true,
                        toggleSpeed: 500,
                        collapsed: false,
                        toggleOrientation: "vertical"
                    });</script>
                </div>
                <div class="ui-grid-col-6">
                    <div id="form:j_idt12" class="ui-panel ui-widget ui-widget-content ui-corner-all"
                         data-widget="widget_form_j_idt12">
                        <div id="form:j_idt12_header"
                             class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span
                                class="ui-panel-title">2</span><a id="form:j_idt12_toggler" href="#"
                                                                  class="ui-panel-titlebar-icon ui-corner-all ui-state-default"><span
                                class="ui-icon ui-icon-minusthick"></span></a></div>
                        <div id="form:j_idt12_content" class="ui-panel-content ui-widget-content">
                            <div id="form:j_idt13" class="ui-panelgrid ui-widget ui-panelgrid-blank">
                                <div id="form:j_idt13_content"
                                     class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive">
                                    <div class="ui-grid-row">
                                        <div class="ui-panelgrid-cell ui-grid-col-2 right"><label id="form:j_idt14"
                                                                                                  class="ui-outputlabel ui-widget">Member
                                            Code</label></div>
                                        <div class="ui-panelgrid-cell ui-grid-col-4"><span id="form:memberCode"></span>

                                            <div id="form:j_idt16" aria-live="polite" class="ui-message"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="form:j_idt12_collapsed" name="form:j_idt12_collapsed"
                                   value="false"/></div>
                        <script id="form:j_idt12_s"
                                type="text/javascript">PrimeFaces.cw("Panel", "widget_form_j_idt12", {
                            id: "form:j_idt12",
                            toggleable: true,
                            toggleSpeed: 500,
                            collapsed: false,
                            toggleOrientation: "vertical"
                        });</script>
                    </div>
                </div>
                <div class="ui-grid-row">
                    <div class="ui-grid-col-6">
                        <div id="form:j_idt18" class="ui-panel ui-widget ui-widget-content ui-corner-all"
                             data-widget="widget_form_j_idt18">
                            <div id="form:j_idt18_header"
                                 class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span
                                    class="ui-panel-title">3</span><a id="form:j_idt18_toggler" href="#"
                                                                      class="ui-panel-titlebar-icon ui-corner-all ui-state-default"><span
                                    class="ui-icon ui-icon-minusthick"></span></a></div>
                            <div id="form:j_idt18_content" class="ui-panel-content ui-widget-content">
                                <div class="ui-fluid">
                                    <div id="form:j_idt19:j_idt21" class="ui-panelgrid ui-widget ui-panelgrid-blank">
                                        <div id="form:j_idt19:j_idt21_content"
                                             class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive">
                                            <div class="ui-grid-row">
                                                <div class="ui-panelgrid-cell ui-grid-col-2 right"><label
                                                        id="form:j_idt19:j_idt22" class="ui-outputlabel ui-widget">Phone
                                                    number</label></div>
                                                <div class="ui-panelgrid-cell ui-grid-col-4"><input
                                                        id="form:j_idt19:telNum" name="form:j_idt19:telNum" type="text"
                                                        class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"/>
                                                    <script id="form:j_idt19:telNum_s"
                                                            type="text/javascript">PrimeFaces.cw("InputText", "widget_form_j_idt19_telNum", {id: "form:j_idt19:telNum"});</script>
                                                    <div id="form:j_idt19:j_idt24" aria-live="polite"
                                                         class="ui-message"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="form:j_idt18_collapsed" name="form:j_idt18_collapsed"
                                       value="false"/></div>
                            <script id="form:j_idt18_s"
                                    type="text/javascript">PrimeFaces.cw("Panel", "widget_form_j_idt18", {
                                id: "form:j_idt18",
                                toggleable: true,
                                toggleSpeed: 500,
                                collapsed: false,
                                toggleOrientation: "vertical"
                            });</script>
                        </div>
                        <div class="ui-grid-col-6">
                            <div id="form:j_idt27" class="ui-panel ui-widget ui-widget-content ui-corner-all"
                                 data-widget="widget_form_j_idt27">
                                <div id="form:j_idt27_header"
                                     class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span
                                        class="ui-panel-title">4</span><a id="form:j_idt27_toggler" href="#"
                                                                          class="ui-panel-titlebar-icon ui-corner-all ui-state-default"><span
                                        class="ui-icon ui-icon-minusthick"></span></a></div>
                                <div id="form:j_idt27_content" class="ui-panel-content ui-widget-content">
                                    <div id="form:j_idt28" class="ui-panelgrid ui-widget ui-panelgrid-blank">
                                        <div id="form:j_idt28_content"
                                             class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive">
                                            <div class="ui-grid-row">
                                                <div class="ui-panelgrid-cell ui-grid-col-2 right"><label
                                                        id="form:j_idt29" class="ui-outputlabel ui-widget">XXX</label>
                                                </div>
                                                <div class="ui-panelgrid-cell ui-grid-col-4"><span id="form:xxx"></span>

                                                    <div id="form:j_idt31" aria-live="polite" class="ui-message"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="form:j_idt27_collapsed" name="form:j_idt27_collapsed"
                                       value="false"/></div>
                            <script id="form:j_idt27_s"
                                    type="text/javascript">PrimeFaces.cw("Panel", "widget_form_j_idt27", {
                                id: "form:j_idt27",
                                toggleable: true,
                                toggleSpeed: 500,
                                collapsed: false,
                                toggleOrientation: "vertical"
                            });</script>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0"
                   value="-3076482170183502940:7614811616339079394" autocomplete="off"/>
</form>
</body>
</html>

kukeltje · 31 Aug 2015, 16:26

have you tried removing all the html, form and body stuff and just using a ui:component tag in your demo.xhtml? Have you tried using just plain jsf stuff (might not be primefaces related) have you tried without all fluid classes etc

Drake · 01 Sep 2015, 10:49

After testing for a while, I can say it's only <p:panelGrid layout="grid"> issue.
Here's my tests:

* Remove all Grid CSS classes, leaving only <div>: still having not well formed html document and the second row is a child of the first row
* Remove Composite Component, including the iDemo.xhtml code in demo.xhml: same as above
* Remove layout="grid" from all <p:panelGrid> tag: document is well formed with 4 table ( 2 for each row)

Then I readd Grid CSS classes on <div> and Composite Component and the html is still well formed, but of course I have 4 tables instead of 4 divs.

kukeltje · 01 Sep 2015, 11:41

Then it might just be a 5.3-SNAPSHOT issue. Please check the source and file an issue or a patch if you find the cause...

Drake · 09 Oct 2015, 15:00

Fixed in 5.3.RC2

Responsive design modifies html structure

Who is online