Hacer un layout responsive con bootstrap en Liferay

Consideraciones

La estructura que se muestra en esta sección supone que el theme que tienen las páginas donde se usará este layout ya tienen agregado el css de bootstrap y además tienen siguiente div:

<div id="wrapper">

Estructura

Para hacer un layout responsive usando bootstrap se sigue la siguiente estructura:

<div class="connectis-internet-layout-home" id="main-content" role="main">
	<div class="portlet-layout row">
		<div class="span12">
			<div class="portlet-column portlet-column-only " id="column-1-1">
				$processor.processColumn("column-1-1", "portlet-column-content portlet-column-content-only")
			</div>
		</div>
	</div>
<div>

• hay un div principal, este caso:

<div class="connectis-internet-layout-home" id="main-content" role="main">

• luego cada fila es agregada con un div con las clases portlet-layout (clase liferay) y row clase de bootstrap:

<div class="portlet-layout row">

• para setear cada columna dentro de una fila se agrega un div con la clase correspondiente de bootstrap, por ejemplo

<div class="span12">

• y finalmente dentro de cada uno de estos divs se ponen los contenedores donde se podrán arrastrar los webContents, portlets, etc.

<div class="portlet-column portlet-column-only " id="column-1-1">
	$processor.processColumn("column-1-1", "portlet-column-contentportlet-column-content-only")
</div>

Tanto del id del div como el primer parámetro que se le pasa a la función processColumn deben ser diferentes para cada contenedor ya que de esta forma liferay identifica qué contenido fue puesto en cada lugar.

En cuanto a las clases que tiene el div, en todos los casos se pone la clase portlet-column y se debe agregar alguna clase más según el caso:

• Si la fila tiene una columa: como en el ejemplo la clase que se agrega es portlet-column-only

• Si la fila tiene más de una columna: para la primer columna portlet-column-first, para las intermedias no se agrega ninguna clase adicional y para la última portlet-column-last

Por último al segundo parámetro de la función processColumn siempre se le pasa portlet-column-content, y si se agregó alguna clase adicional al div también es necesario pasarla, como en el ejemplo.

Pisado de estilos

Es necesario pisar los siguientes estilos de liferay para lograr que el layout sea responsive:

.portlet-layout {
	display: block;
	width: auto;
}

.portlet-column {
	display: block;
}

.portlet-column-content {
	padding: 0px;
}

.portlet-borderless-container{
	min-height: auto;
}

los mismos pueden agregarse en el css del theme.