Search code examples
jqueryjquery-easyui

jQuery EasyUI: relative panel/layout dimensions (in percent)

I am using the jQuery EasyUI layout class (http://www.jeasyui.com/documentation/layout.php) for a website. Within a layout-div, regions (north, south, west, east and center) can be placed.

I wanted to make the dimensions of the north and south panels relative to the container rather than giving them absolute px-values. So I wanted to move from this

<div id="cc" class="easyui-layout" style="width:200px;height:400px;">
    <div data-options="region:'north',title:'North',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South',split:true" style="height:100px;"></div>
    <div data-options="region:'center',title:'center'"></div>
</div>

to this

<div id="cc" class="easyui-layout" style="width:200px;height:400px;">
    <div data-options="region:'north',title:'North',split:true" style="height:25%;"></div>
    <div data-options="region:'south',title:'South',split:true" style="height:25%;"></div>
    <div data-options="region:'center',title:'center'"></div>
</div>

While the first version works just fine (see this fiddle), the second does not (see here). Does anyone have an idea why not, i.e. how to make the panels relative in their dimensions? Thanks!

Solution

  • Try this,

    <div id="cc" class="easyui-layout" style="width:200px;height:400px;">
    <div data-options="region:'north',title:'North',split:true" class="north"></div>
    <div data-options="region:'south',title:'South',split:true" class="south"></div>
    <div data-options="region:'center',title:'center'"></div>
</div>

.north
{
    height:25%;
}
.south
{
    height:25%;
}