Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Abdul Kaleem
Responsive portlets
December 8, 2013 6:38 PM
Answer

Abdul Kaleem

Rank: New Member

Posts: 6

Join Date: February 21, 2013

Recent Posts

Hi all,

i have developed a responsive theme and have kept all the css in theme, which works perfectly fine,
but when i create a portlets, and add it to my page, it is not responsive,

for example
i created a theme with an image in it, that changes as i decrease the size of my browser,
but when i put that image in my custom portlet, its size does not change,
i really cant figure out the problem,

any helping hands are appreciated,
waiting for reply,

thanks in advance,
Andrew Jardine
RE: Responsive portlets
December 8, 2013 8:15 PM
Answer

Andrew Jardine

Community Moderator

Rank: Liferay Legend

Posts: 1062

Join Date: December 22, 2010

Recent Posts

Hey Abdul,

I am working on something right now that is fully responsive. The trick we used is to move all the container logic (what controls the actual width of the column the portlets go into (into the layouts). The portlets themselves just have the actual content. For example --

 1
 2<div class="main-content-container inner">
 3    <div class="row">
 4        <div class="large-3 medium-3 small-3 column">
 5            <div class="row">
 6                <div class="small-12 small-centered medium-12 medium-uncentered large-12 large-uncentered column portlet-column portlet-column-first" id="column-1">
 7                    $processor.processColumn("column-1", "portlet-column-content portlet-column-first")
 8                </div>
 9            </div>
10        </div>
11
12        <div class="large-9 medium-9 small-9 column">
13            <div class="row">
14                <div class="large-12 medium-12 small-12 column portlet-column" id="column-2">
15                    $processor.processColumn("column-2", "portlet-column-content")
16                </div>
17            </div>
18        </div>
19    </div>
20</div>


Each of the portlets itself has a large container tht represents the boundaries of its own content as well, but none all the responsive control is done through the layout containers. This example here is a 2 column (with a left sidebar).
M. Ahamed Maqbool
RE: Responsive portlets
December 8, 2013 10:30 PM
Answer

M. Ahamed Maqbool

Rank: New Member

Posts: 9

Join Date: September 16, 2007

Recent Posts

Hi Abdul,

If you are working responsive theme try to avoid using pixels for all you elements, Use percentage. If you are using pixels you need to write the css every views like 320,480 and 720.

if you are using img tag your custom portlet add Style ( width:100%) for that elements. if your using background of your div it will work.

Hope this will help you. If not please tell me what kind responsive layout you are using like alloyui,bootstrap or media query and also your custom portlet image tag.
Abdul Kaleem
RE: Responsive portlets
December 8, 2013 10:58 PM
Answer

Abdul Kaleem

Rank: New Member

Posts: 6

Join Date: February 21, 2013

Recent Posts

Thank You
Maqbool Bhai,

my code was this...
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
after your suggestion i changed the width to 100%;
it worked thank you...

and i was using media query....