MIGRATION to 6.2 - p:panelGrid responsive dont work correctly after update PF 6.2

[nokiajavi]

Good, I use PF 6.1 and when updating to PF 6.2 I have seen that the responsive mode of the p: panelGrid does not behave as in version 6.1

I give an example, I have a panelGrid with layout = "grid", I use the colummnsClases attribute to give a specific width by percentages to all the columns. When I visualize in a mobile the app, primefaces crushes the style that I have put in the columnsClasses and applies the responsive with version 6.1, but in version 6.2 the inserted in the columnClases attribute prevails and the responsive mode is not applied.

Example:

CSS:

Code: Select all

.ancho10{
	width: 10%;
}
.ancho40{
	width: 40%;
}
.ancho100{
	width: 100%;
}

Code: Select all

<p:panelGrid columns="4" layout="grid" styleClass="ancho100" columnClasses="ancho10,ancho40, ancho10, ancho40">
	<h:outputLabel value="Provincia:"/>
	<p:selectOneMenu styleClass="ancho100"> 
		<f:selectItem itemValue="" itemLabel="SEVILLA" />
		</p:selectOneMenu>
	                
	<h:outputLabel value="Municipio:"/>
	<p:selectOneMenu styleClass="ancho100">
		<f:selectItem itemValue="" itemLabel="SEVILLA" />
	</p:selectOneMenu>
						                
	<h:outputLabel value="Tipo Vía:"/>
	<h:outputText value="CALLE DE PRUEBAS LARGA"/>
</p:panelGrid>

Code: Select all

static {
        COLUMN_MAP.put(1, "ui-grid-col-12");
        COLUMN_MAP.put(2, "ui-grid-col-6");
        COLUMN_MAP.put(3, "ui-grid-col-4");
        COLUMN_MAP.put(4, "ui-grid-col-3");
        COLUMN_MAP.put(6, "ui-grid-col-2");
        COLUMN_MAP.put(12, "ui-grid-col-1");
    }

Code: Select all

  COLUMN_MAP.put(1, "ui-g-12 ui-md-12");
        COLUMN_MAP.put(2, "ui-g-12 ui-md-6");
        COLUMN_MAP.put(3, "ui-g-12 ui-md-4");
        COLUMN_MAP.put(4, "ui-g-12 ui-md-3");
        COLUMN_MAP.put(6, "ui-g-12 ui-md-2");
        COLUMN_MAP.put(12, "ui-g-12 ui-md-1");

I have seen that the GridLayoutUtils class has changed. In PF 6.1, the styles you put in the columnClasses attribute were overwritten by those in the GridLayoutUtils class when the web was viewed in Responsive mode. Now with PF 6.2, the styles that I introduce in columnClasses prevail and do not crush them, so that the responsive mode is not seen correctly.

PF 6.1 Work Example

Mode Normal

Mode Responsive


CSS Responsive


PF 6.2 Dont Work Example

Mode Normal

Mode Responsive


CSS Responsive



How could I correct this problem in order to update PF 6.2?

Thank you so much

[kukeltje]

Make your selectors not apply when according to a media selector they should not apply. So you need to add a media selector. Effectively your were 'lucky' it worked in 6.1. With the improvements in 6.2 the 'bug' in your selectors manifested itself.

[nokiajavi]

I understand, thank you very much for your help, I will see what I can do to resolve the wrong behavior.