Overlapped columns when change orientation in Iphone
Posted: 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:
Thanks for your help.
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>
