Responsive Layout

[limarcelo90]

Hi.
I'm trying to make a responsive layout but when I define the width into the tag <td> its not work.



...and when I remove width, it works



I need to keep responsive layout defining some value to width

someone help?

[mert.sincan]

Could you please attach sample codes for us?

[limarcelo90]

Code: Select all

 <p:dataTable id="idServerDomainDtDomains" widgetVar="wvServerDomainDtDomains" lazy="true"
	var="coreServerDomain" value="#{mbCoreServerDomain.ldmCoreServerDomain}" reflow="true" paginatorPosition="bottom" 					selectionMode="single"
	selection="#{mbCoreServerDomain.enCoreServerDomain}" rowKey="#{coreServerDomain.id}" paginator="true" rows="10" 
	emptyMessage="Nenhum server domain encontrado"  >
		<p:ajax event="rowSelect" listener="#{mbCoreServerDomain.onRowSelect}" update="fPadrao:idServerDomainOpDados" /> -->
		<f:facet name="header">
			Core Server Domains
		</f:facet>
		<p:column headerText="Id" sortBy="#{coreServerDomain.id}" filterBy="#{coreServerDomain.id}" filterMatchMode="endsWith" style="width:10%; text-align:center;">
			<h:outputText value="#{coreServerDomain.id}" />
		</p:column>
		<p:column headerText="Tipo" sortBy="#{coreServerDomain.tipo}" filterBy="#{coreServerDomain.tipo}" style="width:10%; text-align:center;"  	>
			<f:facet name="filter" >
				<p:selectOneMenu   onchange="PF('wvServerDomainDtDomains').filter()"  rendered="true" >
					<f:selectItem itemLabel="Selecione" itemValue="#{null}" noSelectionOption="true" itemDisabled="false" />
					<f:selectItems value="#{mbCoreServerDomain.listaEnumCoreServerTipo}" var="coreServerTipo" itemLabel="#			{coreServerTipo.descricao}" itemValue="#{coreServerTipo}" />
				</p:selectOneMenu>
			</f:facet>	
			<h:outputText value="#{coreServerDomain.tipo.descricao}" />
		</p:column>
		<p:column headerText="Escopo" sortBy="#{coreServerDomain.escopo}" filterBy="#{coreServerDomain.escopo.descricao}" style="width:10%; text-align:center;" >
			<h:outputText value="#{coreServerDomain.escopo.descricao}" />
		</p:column>
		<p:column headerText="Url" sortBy="#{coreServerDomain.urlDomainServer}" filterBy="#{coreServerDomain.urlDomainServer}" style="width:40%" >
			<h:outputText value="#{coreServerDomain.urlDomainServer}" />
		</p:column>
		<p:column headerText="Portas" sortBy="#{coreServerDomain.port}" filterBy="#{coreServerDomain.port}" style="width:20%"  >
			<h:outputText value="#{coreServerDomain.port}" />
		</p:column>
		<p:column headerText="Prioridade" sortBy="#{coreServerDomain.prioridade}" filterBy="#{coreServerDomain.prioridade}" style="width:5%; text-align:center;" >
			<h:outputText value="#{coreServerDomain.prioridade}" />
		</p:column>
		<p:column headerText="Status" sortBy="#{coreServerDomain.statusEnum}" filterBy="#{coreServerDomain.statusEnum}" style="width:5%; text-align:center;" >
			<h:outputText value="#{coreServerDomain.statusEnum}" />
		</p:column>
		<p:column headerText="Teste" style="width:3%; text-align:center;" >
			<p:commandButton icon="ui-icon-pageview" 	
			actionListener="#{mbCoreServerDomain.teste(coreServerDomain)}"
			title="Visualizar Detalhes"	
		/>
		</p:column>
		<p:column selectionMode="multiple" style="width:16px;text-align:center" />
</p:dataTable>

[mert.sincan]

Please remove inline styles in p:column. You can add them using @media (min-width: 641px) and styleClass. Exp;

Code: Select all

//Css
<style type="text/css">
@media (min-width: 641px) {
   .ui-datatable thead th.Width40 , 
   .ui-datatable tbody td.Width40 , 
   .ui-datatable tfoot td.Width40 , 
   .ui-datatable tfoot th.Width40 {
      width: 40%;
   }
   .ui-datatable thead th.TextAlignCenter, 
   .ui-datatable tbody td.TextAlignCenter, 
   .ui-datatable tfoot td.TextAlignCenter, 
   .ui-datatable tfoot th.TextAlignCenter {
      text-align:center;
   }
}
</style>

//xhtml
<p:column styleClass="Width40 TextAlignCenter" />