Liferay 6.2 layout rows of different sizes

Question

I have created a Liferay 6.2 Layout having four rows in single column where portlets are placed. The layout rendered correctly but the issue is that I need the four rows to have different height such as 15%, 25%, 30%, 30% which makes 100%. Can we do this at the layout side itself, so that it can be generic wherever I use this Layout

Can anyone please tell me how to do that

I am using Bootstrap 2.3.2

What I am trying to achieve is something like this as shown below

My liferay layout code is as given below

template.tpl

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

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

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

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

UPDATES

template.tpl

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

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

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

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

CSS

#main-content {
  height: 100vh;
}

.row-one {
  height: 15%;
}

.row-two {
  height: 25%;
}

.row-three {
  height: 30%;
}

.row-four {
  height: 30%;
}

100 % of what? window height or `main-content` height? Did you already tried to find an answer, like [this one](http://stackoverflow.com/questions/18331716/css-position-with-percent/18331945#18331945)? — Tobias Liefke, Dec 11 '15 at 07:56
You should always add things you have tried so far (and why it didn't work) to your question - otherwise it may get closed as duplicate. — Tobias Liefke, Dec 11 '15 at 10:44
@TobiasLiefke Take a look at my updates I have tried that but did'nt worked — Alex Man, Dec 11 '15 at 10:55

score 1 · Answer 1 · answered Dec 11 '15 at 10:58

1

You are defining height in a row that has a parent without height defined. The height works depending on the parent. So your html needs to be like this:

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

answered Dec 11 '15 at 10:58

Marcos Pérez Gude

21,869
4
38
69

now layout row is coming with the said height but the issue is that say when I drag and place a portlet within the row, the corresponding height is not applied to the portlet – Alex Man Dec 11 '15 at 11:40
Do I need to do anything for the portlet to apply the layout row height – Alex Man Dec 11 '15 at 11:40
It's because the structure changes, I guess. The heights ever works depending on the inmediate parent height. If this changes, it will be weird behaviour – Marcos Pérez Gude Dec 11 '15 at 11:41
Any solution for this – Alex Man Dec 11 '15 at 11:45
Define the heights in the divs that are inmediate childs of `#main-content` – Marcos Pérez Gude Dec 11 '15 at 11:46
I am not getting that......to which all childs.....and what heights I need to give – Alex Man Dec 11 '15 at 11:55
See the code in the answer. The `row-one` classname I been moved to the parent element, that's a inmediate child of `#main-content`. What is that you don't understand? – Marcos Pérez Gude Dec 11 '15 at 11:59
that I have already given height for `.row-one`, `.row-two`, `.row-three`, `.row-four` – Alex Man Dec 11 '15 at 12:32
I make a fiddle for you. That's very very simple, I don't know why don't you understand it. See it working: http://jsfiddle.net/fkqwu6x7/ – Marcos Pérez Gude Dec 11 '15 at 13:04
Thats the same why I have used in my liferay layout. The issue comes when I place my portlets within the layouts row. Portlets which are placed and not adjusting its height respective to the layout row – Alex Man Dec 11 '15 at 13:54
The childrens of the rows needs to be 100% height to occupy all available height – Marcos Pérez Gude Dec 11 '15 at 13:56

Liferay 6.2 layout rows of different sizes

1 Answers1