Fórum

How to create fixed width column of layout?

thumbnail
Almas Adilbek, modificado 12 Anos atrás.

How to create fixed width column of layout?

New Member Postagens: 15 Data de Entrada: 28/06/11 Postagens Recentes
Can I create fixed column width for my layout?
For example three columns: 200px 100% 150px?
thumbnail
Ravi Kumar Gupta, modificado 12 Anos atrás.

RE: How to create fixed width column of layout?

Liferay Legend Postagens: 1302 Data de Entrada: 24/06/09 Postagens Recentes
Each of the column in layout is given a css class. like this

<td class="lfr-column seventy" id="column-2" valign="top">

this lfr-column and seventy are classes defined in theme.. see layout.css

.lfr-grid.dragging .lfr-column {
	height: 100px;
	min-height: 100px;
}

.lfr-column.ten {
	width: 10%;
}

.lfr-column.twenty {
	width: 20%;
}

.lfr-column.thirty {
	width: 30%;
}

.lfr-column.forty {
	width: 40%;
}

.lfr-column.fifty {
	width: 50%;
}

.lfr-column.sixty {
	width: 60%;
}

.lfr-column.seventy {
	width: 70%;
}

.lfr-column.eighty {
	width: 80%;
}

.lfr-column.ninety {
	width: 90%;
}


Give your own css class names in layout and define the rules. If you want to hard code the styles in layout you can do that as well...
<td style="width:200px;" id="column-2" valign="top">..

HTH
thumbnail
wasim shaikh, modificado 12 Anos atrás.

RE: How to create fixed width column of layout?

Junior Member Postagens: 92 Data de Entrada: 16/07/09 Postagens Recentes
Below is the Table struction

just at liferay layout classes as Ravi added.

<table style="width:100%">
<tbody><tr>
<td style="width:200px;"> Fixed 200px</td>
<td> this td will take remaining width </td>
<td style="width:150px;"> Fixed 150px</td>
</tr>
</tbody></table>
Rob Silver, modificado 10 Anos atrás.

RE: How to create fixed width column of layout?

Junior Member Postagens: 47 Data de Entrada: 20/06/13 Postagens Recentes
I believe I solved my problem - A tip for others in the same boat it helps to understand the $processor.processColumn method
It appears that the first column should pass the the content-only and the 2nd column or right most should pass the "portlet-column-content portlet-column-content-first"
Here is what I provided:
At least for testing I suggest coloring your layout columns so as to see for sure they are working. You can always remove the coloring later.
I hope this helps someone else struggling to get this working - I am planning to look more closely at this processColumn command as well. Better understanding will explain
these strings passed to it.
I may put up a more complex layout later for everyone once I really get a hanlde on Liferay layouts.
<div class="FixedLayout280px_left" id="main-content" role="main">
#if ($browserSniffer.isIe($request) && $browserSniffer.getMajorVersion($request) < 8)
<table class="portlet-layout">
<tr>
<td style="width:280px;" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</td>
<td id="column-2" bgcolor="#00FF66">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</td>
</tr>
</table>
#else
<div style="width:100%" class="portlet-layout">
<div style="width:280px;background-color:black;" id="column-1" >
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</div>
<div id="column-2" class="aui-w90 portlet-column portlet-column-first" style="background-color: #00ff66;" >
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</div>
</div>
#end
</div>