Fórum
How to create fixed width column of layout?
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?
For example three columns: 200px 100% 150px?
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
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
<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
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.
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>
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>