Dragging portlets into MyLayout in liferay portal..

[8年前 に John Voltaire Maximo によって更新されました。]

Hi guys,

I have created a layout in eclipse,, but then when I deployed it and tried dragging other portlets into it, It doesn't follow the layout I made...
instead, it displays as one column only..

Why is this? it doesn't produce any errors but it doesn't follow my layout in eclipse... here's the code.. hope you can help

<!-- 1-3-2-1 layout -->
<div class= "centeredLayout" id="mainContent">

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

<!-- 2nd row -->
<div class="portlet-layout">
<div class = "aui w20 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content-first")
</div>
<div class = "aui w60 portlet-column" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet")
</div>
<div class = "aui w20 portlet-column portlet-column-last" id="column-4">
$processor.processColumn("column-4", "portlet-column-content-last")
</div>
</div>

<!-- 3rd row -->
<div class="portlet-layout">
<div class = "aui w50 portlet-column portlet-column-first" id="column-5">
$processor.processColumn("column-5", "portlet-column-content-first")
</div>
<div class = "aui w50 portlet-column portlet-column-last" id="column-6">
$processor.processColumn("column-6", "portlet-column-content-last")
</div>
</div>

<!-- 4th row -->
<div class="portlet-layout">
<div class = "portlet-column portlet-column-only" id="column-7">
$processor.processColumn("column-7", "portlet-column-content-only")
</div>
</div>
</div>

Thanks

[8年前 に Himanshu Bhandari によって更新されました。]

Hi
Check again that you have applied your custom layout to the page.
Thanks.

[8年前 に Olaf Kock によって更新されました。]

John Voltaire Maximo:

<div class = "aui w20 portlet-column portlet-column-first" id="column-2">

This looks like a 6.1 (or earlier) layout template. Are you using a version prior to 6.2? For 6.2 you'd need bootstrap markup, e.g. the class span2 for declaration of column width.

[8年前 に John Voltaire Maximo によって更新されました。]

im using 6.2 sir
then I can solve it by doing like you just said

<!-- 1-3-2-1 layout -->
<div class= "centeredLayout" id="mainContent">

<!-- 1st row -->
<div class="portlet-layout">
<div class = "col col-sm-12" id="column-1">
$processor.processColumn("column-1", "portlet-column-content-only")
</div>
</div>

<!-- 2nd row -->
<div class="portlet-layout">
<div class = "col col-sm-2" id="column-2">
$processor.processColumn("column-2", "portlet-column-content-first")
</div>
<div class = "col col-sm-8" id="column-3">
$processor.processColumn("column-3", "portlet-column-content")
</div>
<div class = "col col-sm-2" id="column-4">
$processor.processColumn("column-4", "portlet-column-content-last")
</div>
</div>

<!-- 3rd row -->
<div class="portlet-layout">
<div class = "col col-sm-6" id="column-5">
$processor.processColumn("column-5", "portlet-column-content-first")
</div>
<div class = "col col-sm-6" id="column-6">
$processor.processColumn("column-6", "portlet-column-content-last")
</div>
</div>

<!-- 4th row -->
<div class="portlet-layout">
<div class = "col col-sm-12" id="column-7">
$processor.processColumn("column-7", "portlet-column-content-only")
</div>
</div>
</div>

[8年前 に John Voltaire Maximo によって更新されました。]

this is the final update,,,,,, and this one did it for me

<!-- 1-3-2-1 layout -->
<div class= "centeredLayout" id="main-content" role="main">

<!-- 1st row -->
<div class="portlet-layout">
<div class = "portlet-column portlet-column-only span12" id="column-1">
$processor.processColumn("column-1", "portlet-column-content-only")
</div>
</div>

<!-- 2nd row -->
<div class="portlet-layout">
<div class = "portlet-column portlet-column-first span2" id="column-2">
$processor.processColumn("column-2", "portlet-column-content-first")
</div>
<div class = "portlet-column span8" id="column-3">
$processor.processColumn("column-3", "portlet-column-content")
</div>
<div class = "portlet-column portlet-column-last span2" id="column-4">
$processor.processColumn("column-4", "portlet-column-content-last")
</div>
</div>

<!-- 3rd row -->
<div class="portlet-layout">
<div class = "portlet-column portlet-column-first span6" id="column-5">
$processor.processColumn("column-5", "portlet-column-content-first")
</div>
<div class = "portlet-column portlet-column-last span6" id="column-6">
$processor.processColumn("column-6", "portlet-column-content-last")
</div>
</div>

<!-- 4th row -->
<div class="portlet-layout">
<div class = "portlet-column portlet-column-only span12" id="column-7">
$processor.processColumn("column-7", "portlet-column-content-only")
</div>
</div>
</div>