How to make <h:panelGrid> resposive

Locked
mrgn157
Posts: 8
Joined: 31 Aug 2012, 11:17

08 Apr 2015, 20:34

Hello people,

i have the problem, that I cant make the <h:panelGrid> tag responsive.
Now you probably ask, why I dont use the <p:panelGrid> tag. The answer is, that the Primefaces panelGrid does not work with the Primefaces accordionPanel, if you use in every tab a new panelGrid.

Do you have an idea how I can make the h:panelGrid responsive.

Thank you.

Pascal
- Primefaces: 7.0
- JSF: 2.2.8
- Wildfly: 8.2
- Java: 8

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

09 Apr 2015, 16:07

I don't think it is possible to have responsive h:panelGrid, what is the exact issue with accordion and panelGrid? Can you post some code demonstrating the issue?

Also do you use Spark?

mrgn157
Posts: 8
Joined: 31 Aug 2012, 11:17

10 Apr 2015, 16:27

Hey,

yeah im using Spark :)

here is my code. If u change the h:panelGrind to p:panelGrid the 2. tab will not work anymore.

Code: Select all

<p:accordionPanel multiple="true">
				<p:tab title="Daten Mutter">
					<h:panelGrid columns="4" cellpadding="5"
						styleClass="Wid100 Reponsive">

						<p:outputLabel for="vorname_mutter" value="Vorname:" />
						<p:inputText id="vorname_mutter" required="true"
							requiredMessage="Bitte gib den Vornamen deiner Mutter an." />

						<p:outputLabel for="nachname_mutter" value="Nachname:" />
						<p:inputText id="nachname_mutter" required="true"
							requiredMessage="Bitte gib den Nachnamen deiner Mutter an." />

						<p:outputLabel for="geburtsdatum_mutter" value="Geburtsdatum:" />
						<p:calendar required="true"
							requiredMessage="Bitte gib das Geburtsdatum deiner Mutter an."
							id="geburtsdatum_mutter" locale="de" navigator="true"
							pattern="yyyy-MMM-dd" />

						<p:outputLabel for="todesdatum_mutter" value="Verstorben am:" />
						<p:calendar id="todesdatum_mutter"
							value="#{angabeFamilienVerhaeltnisseView.todesdatumMutter}"
							locale="de" navigator="true" pattern="yyyy-MMM-dd">
							<p:ajax update="@form" event="dateSelect" />
						</p:calendar>

						<c:if
							test="#{empty angabeFamilienVerhaeltnisseView.todesdatumVater and !angabeFamilienVerhaeltnisseView.elternHabenDieGleicheAdresse}">

							<p:outputLabel for="straße_hausnummer_mutter"
								value="Straße/Hausnummer:" />
							<p:inputText id="straße_hausnummer_mutter" required="true"
								requiredMessage="Bitte gib die Straße und Hausnummer deiner Mutter an." />

							<p:outputLabel for="plz_mutter" value="PLZ:" />
							<p:inputText id="plz_mutter" required="true"
								requiredMessage="Bitte gib die PLZ deiner Mutter an." />

							<p:outputLabel for="ort_mutter" value="Ort:" />
							<p:inputText id="ort_mutter" required="true"
								requiredMessage="Bitte gib den Wohnort deiner Mutter an." />

							<p:outputLabel for="ausland_mutter"
								value="Auslandkennbuchstaben:" />
							<p:selectOneMenu id="ausland_mutter">
								<p:ajax update="ausland_mutter" />
								<f:selectItem itemLabel="Auslandskennzeichen wählen"
									itemValue="" noSelectionOption="true" />
							</p:selectOneMenu>
						</c:if>

						<p:outputLabel for="staatsangehörigkeit_mutter"
							value="Staatsangehörigkeit:" />
						<p:selectOneRadio id="staatsangehörigkeit_mutter" value=""
							required="true"
							requiredMessage="Bitte gib die Staatsangehörigkeit deiner Mutter an.">
							<f:selectItem itemLabel="deutsch" itemValue="de" />
							<f:selectItem itemLabel="andere" itemValue="andere" />
						</p:selectOneRadio>
					</h:panelGrid>
				</p:tab>
				<p:tab title="Daten Vater">
					<h:panelGrid columns="4" cellpadding="5"
						styleClass="Wid100 Reponsive">
						<p:outputLabel for="vorname_vater" value="Vorname:" />
						<p:inputText id="vorname_vater" required="true"
							requiredMessage="Bitte gib den Vornamen deines Vaters an." />

						<p:outputLabel for="nachname_vater" value="Nachname:" />
						<p:inputText id="nachname_vater" required="true"
							requiredMessage="Bitte gib den Nachnamen deines Vaters an." />

						<p:outputLabel for="geburtsdatum_vater" value="Geburtsdatum:" />
						<p:calendar required="true"
							requiredMessage="Bitte gib das Geburtsdatum deines Vaters an."
							id="geburtsdatum_vater" locale="de" navigator="true"
							pattern="yyyy-MMM-dd" />

						<p:outputLabel for="todesdatum_vater" value="Verstorben am:" />
						<p:calendar id="todesdatum_vater"
							value="#{angabeFamilienVerhaeltnisseView.todesdatumVater}"
							locale="de" navigator="true" pattern="yyyy-MMM-dd">
							<p:ajax update="@form" event="dateSelect" />
						</p:calendar>

						<c:if
							test="#{empty angabeFamilienVerhaeltnisseView.todesdatumVater and !angabeFamilienVerhaeltnisseView.elternHabenDieGleicheAdresse}">
							<p:outputLabel for="straße_hausnummer_vater"
								value="Straße/Hausnummer:" />
							<p:inputText id="straße_hausnummer_vater" required="true"
								requiredMessage="Bitte gib die Straße und Hausnummer deines Vaters an." />

							<p:outputLabel for="plz_vater" value="PLZ:" />
							<p:inputText id="plz_vater" required="true"
								requiredMessage="Bitte gib die PLZ deines Vaters an." />

							<p:outputLabel for="ort_vater" value="Ort:" />
							<p:inputText id="ort_vater" required="true"
								requiredMessage="Bitte gib den Wohnort deines Vaters an." />

							<p:outputLabel for="ausland_vater" value="Auslandkennbuchstaben:" />
							<p:selectOneMenu id="ausland_vater">
								<p:ajax update="ausland_vater" />
								<f:selectItem itemLabel="Auslandskennzeichen wählen"
									itemValue="" noSelectionOption="true" />
							</p:selectOneMenu>
						</c:if>

						<p:outputLabel for="staatsangehörigkeit_vater"
							value="Staatsangehörigkeit:" />
						<p:selectOneRadio id="staatsangehörigkeit_vater" value=""
							required="true"
							requiredMessage="Bitte gib die Staatsangehörigkeit deines Vaters an.">
							<f:selectItem itemLabel="deutsch" itemValue="de" />
							<f:selectItem itemLabel="andere" itemValue="andere" />
						</p:selectOneRadio>
					</h:panelGrid>
				</p:tab>
			</p:accordionPanel>
- Primefaces: 7.0
- JSF: 2.2.8
- Wildfly: 8.2
- Java: 8

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

11 Apr 2015, 13:24

What do you mean second tab not working anymore?

Have you tried grid layout mode?

Code: Select all

<p:panelGrid columns="4" layout="grid">

mrgn157
Posts: 8
Joined: 31 Aug 2012, 11:17

13 Apr 2015, 19:48

Hey,

yes I tried grid layout. :)
The 2. tab can not be open if I use two p:panelGrid

:(
- Primefaces: 7.0
- JSF: 2.2.8
- Wildfly: 8.2
- Java: 8

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Apr 2015, 21:13

Does it happen when you don't use Spark?

mrgn157
Posts: 8
Joined: 31 Aug 2012, 11:17

17 Apr 2015, 15:35

[FIXED]

Hey,

I did not try it without Sparks.

But I found a workaround. U have to wrap a p:ouputPanl around every p:panelGrid than will it work.
- Primefaces: 7.0
- JSF: 2.2.8
- Wildfly: 8.2
- Java: 8

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

20 Apr 2015, 18:24

Glad to hear.

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

20 Apr 2015, 20:19

This workaround should not ge needed imo..

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Apr 2015, 22:51

Yes, I'm not sure about this as well.

Locked

Return to “Spark”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests