Overlapped columns when change orientation in Iphone

UI Components for JSF
Post Reply
Jaok8791
Posts: 9
Joined: 22 Feb 2013, 11:40

13 Apr 2016, 12:27

Hi, i am coding my first project using PrimeFaces Mobile. I think it´s great and components are wonderful in screen, but my problem is that I have a datatable with 10 columns and headers and cell text overlap between them in horizontal orientation (I have tested in Iphone 5s and Iphone 6Plus). In vertical orientation it is shown fine because the rows are shown below each other as expected. Maybe I´m doing something wrong or I should override existing Media Queries. How can I solve this to avoid overlapping in horizontal orientation in mobile devices?

My code is the following one:

Code: Select all

<html 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"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE">
<h:head>
	<h:outputScript name="calendar_es.js" library="js" />
</h:head>
<h:body>
	<pm:page id="contentGastos">
	<pm:header title="Hoja de Gastos"></pm:header>
		<pm:content>
                <h:form id="formHistorico">
		<p:dataTable var="gasto" value="#{gastosView.gastos}"
							style="font-size:12px" id="tablaGastos" reflow="true"
							paginator="true" paginatorPosition="bottom"
							emptyMessage="No existen registros.">
							<p:column headerText="Fecha">
								<h:outputText value="#{gasto.gastoFecha}">
									<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
								</h:outputText>
							</p:column>
							<p:column headerText="Concepto" >
								<h:outputText value="#{gasto.gastoConcepto}" />
							</p:column>
							<p:column headerText="Tipo">
								<h:outputText value="#{gasto.auxTiposGasto.gastoTipoDesc}" />
							</p:column>
							<p:column headerText="Servicio">
								<h:outputText value="#{gasto.auxObjetoServicio.servicioDesc}" />
							</p:column>
							<p:column headerText="Origen">
								<h:outputText value="#{gasto.auxOrigenGasto.origenDesc}" />
							</p:column>

							<p:column headerText="Importe">
								<h:outputText value="#{gasto.gastoImporte}">
									<f:convertNumber maxFractionDigits="2" minFractionDigits="2"
										groupingUsed="true" locale="en" />
								</h:outputText>
							</p:column>
							<p:column headerText="Estado">
								<h:outputText value="#{gasto.gastoEstado}" />
							</p:column>
							<p:column headerText="Justificante" style="text-align:center">

								<p:commandLink id="getDownload"
									action="#{gastosView.download()}">
									<h:graphicImage value="img/document.png"
										style="vertical-align:middle" />
									<f:setPropertyActionListener value="#{gasto}"
										target="#{gastosView.editedGasto}" />
								</p:commandLink>

							</p:column>
							<p:column headerText="Aprobar" style="text-align:center">
								<p:commandLink action="#{gastosView.validar()}">
									<h:graphicImage value="img/validate.png"
										style="vertical-align:middle" />
									<f:setPropertyActionListener value="#{gasto}"
										target="#{gastosView.editedGasto}" />
								</p:commandLink>
							</p:column>
							<p:column headerText="Rechazar" style="text-align:center">
								<p:commandLink action="#{gastosView.rechazar()}">
									<h:graphicImage value="img/reject.png"
										style="vertical-align:middle" />
									<f:setPropertyActionListener value="#{gasto}"
										target="#{gastosView.editedGasto}" />
								</p:commandLink>
							</p:column>
						</p:dataTable>
					</h:form>
                 </pm:content>
	</pm:page>
</h:body>
</f:view>
</html>
Thanks for your help.

soekris
Posts: 76
Joined: 29 Apr 2013, 16:54
Location: Barcelona

15 Apr 2016, 10:14

Hello

A picture is worth a thousand words, therefore I think it would be advisable to add some screenshots to ease others to visualize the issue

But keep in mind at the end primefaces does jquery mobile, did you discard it not a jquery mobile problem-feature?
Primefaces 5.3.X / 6.X
NetBeans 8.1
WildFly 10
Linux Mint & freeBSD

Jaok8791
Posts: 9
Joined: 22 Feb 2013, 11:40

15 Apr 2016, 13:02

Hi, thanks for answering. Yes, I agree that a picture describes the problem better. Here it is how it is shown in horizontal mode:
[img]
http://geosystechosting.com/error.png
[/img]

I ignore if there is some problem regarding jquery mobile. I thought in spite of inserting many columns, the orientation would show the columns in the right way.

Thanks

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 19 guests