Vista Combinata Vista Piatta Vista ad Albero
Discussioni [ Precedente | Successivo ]
Rajesh Chaurasia
layout template for mobile devices using fluid layout
21 luglio 2012 23.53
Risposta

Rajesh Chaurasia

Punteggio: Regular Member

Messaggi: 119

Data di Iscrizione: 18 agosto 2011

Messaggi recenti

Hi Everyone

I need some help in making a layout template for mobile devices.I am using liferay's eclipse Ide for generating the layout template for desktop.But I also want to make a layout template which uses fluid layout for mobile devices.
Can anyone aware of this , guide me through ?

I have the following code fro mobile devices but I want to embed fluid layout into it so that the portlets i have added in layout template , get rearranged to enhance user capability..

<div class="ba_ess_news_uptodate.wap" id="main-content" role="main">
<table width="100%" >
<tr>
<td class="lfr-column" colspan="5" width="100%" style="vertical-align:top;">
<div class="portlet-layout">
<div class="portlet-column portlet-column-only" id="column-1" style="vertical-align:top;">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="vertical-align:top;">
<div class="portlet-layout">
<div class="aui-w74 portlet-column portlet-column-first" id="column-2" style="vertical-align:top;">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</div>
</div>
</td>
<td rowspan="7" style="width:250px;vertical-align:top;">
<div class="portlet-layout" style="width:240px;">
<div class="aui-w24 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content")
</div>
</div>
<div class="portlet-layout" style="width:240px;vertical-align:top;" >
<div class="aui-w24 portlet-column portlet-column-last" id="column-4">
$processor.processColumn("column-4", "portlet-column-content")
</div>
</div>
<div class="portlet-layout" style="width:240px;vertical-align:top;">
<div class="aui-w24 portlet-column portlet-column-last" id="column-5">
$processor.processColumn("column-5", "portlet-column-content")
</div>
</div>
<div class="portlet-layout" style="width:240px;vertical-align:top;">
<div class="aui-w24 portlet-column portlet-column-last" id="column-6">
$processor.processColumn("column-6", "portlet-column-content portlet-column-content-last")
</div>
</div>
<div class="portlet-layout" style="width:240px;vertical-align:top;">
<div class="aui-w24 portlet-column portlet-column-last" id="column-7">
$processor.processColumn("column-7", "portlet-column-content portlet-column-content-last")
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="vertical-align:top;">
<div class="portlet-layout">
<div class="aui-w74 portlet-column portlet-column-first" id="column-8" style="vertical-align:top;">
$processor.processColumn("column-8", "portlet-column-content portlet-column-content-first")
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="vertical-align:top;">
<div class="portlet-layout">
<div class="aui-w74 portlet-column portlet-column-first" id="column-9" style="vertical-align:top;">
$processor.processColumn("column-9", "portlet-column-content portlet-column-content-first")
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5" style="vertical-align:top;">
<div class="portlet-layout">
<div class="aui-w74 portlet-column portlet-column-first" id="column-10" style="width: 75%; vertical-align: top;">
$processor.processColumn("column-10", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w74 portlet-column portlet-column-first" id="column-11" style="width: 75%;vertical-align:top;">
$processor.processColumn("column-11", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w74 portlet-column portlet-column-first" id="column-12" style="width: 75%;vertical-align:top;">
$processor.processColumn("column-12", "portlet-column-content portlet-column-content-first")
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="vertical-align:top;">
<div class="portlet-layout">
<div class="aui-w74 portlet-column portlet-column-first" id="column-13" style="vertical-align:top;">
$processor.processColumn("column-13", "portlet-column-content portlet-column-content-first")
</div>
</div>
</td>

</tr>
<tr>
<td colspan="4" style="vertical-align:top;">
<div class="portlet-layout">
<div class="aui-w74 portlet-column portlet-column-first" id="column-14" style="vertical-align:top;">
$processor.processColumn("column-14", "portlet-column-content portlet-column-content-first")
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="width:250px;vertical-align:top;">
<div class="portlet-layout">
<div class="aui-w74 portlet-column portlet-column-first" id="column-15" style="vertical-align:top;">
$processor.processColumn("column-15", "portlet-column-content portlet-column-content-first")
</div>
</div>
</td>
</tr>
</table>
</div>