Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Matthias Fenz
Fluid Layout (as Liferay Website) with AUI doesn't work
January 4, 2012 1:32 PM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

Recent Posts

Hi all,

i'm trying to implement the fluid layout as used by the Liferay website. I installed Liferay 6.1 RC with Tomcat 7 from the download section. Then I posted the following script just before the </body> tag in my portal_normal.vm:

1
2<script type="text/javascript" charset="utf-8">
3AUI().use('aui-viewport');
4</script>


In my custom.css, I tried the follwoing code to test the functionality:

1
2.intro {
3    color: #123456;
4}
5
6.yui3-aui-view-lt720 .intro {
7    color: red;
8}


It doesn't work - and i don't know why...? When i checked my code with firebug, i found out, that the JS looks like this:

1
2/*<![CDATA[*/AUI().use('aui-viewport');/*]]>*/


Could this be the reason and if yes, where should i place my JS code? Any help would be appreciated, thanks in advance,
Matthias
Juan Gonzalez
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 5, 2012 12:31 AM
Answer

Juan Gonzalez

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2807

Join Date: October 28, 2008

Recent Posts

Matthias Fenz:
Hi all,

i'm trying to implement the fluid layout as used by the Liferay website. I installed Liferay 6.1 RC with Tomcat 7 from the download section. Then I posted the following script just before the </body> tag in my portal_normal.vm:

1
2<script type="text/javascript" charset="utf-8">
3AUI().use('aui-viewport');
4</script>


In my custom.css, I tried the follwoing code to test the functionality:

1
2.intro {
3    color: #123456;
4}
5
6.yui3-aui-view-lt720 .intro {
7    color: red;
8}


It doesn't work - and i don't know why...? When i checked my code with firebug, i found out, that the JS looks like this:

1
2/*<![CDATA[*/AUI().use('aui-viewport');/*]]>*/


Could this be the reason and if yes, where should i place my JS code? Any help would be appreciated, thanks in advance,
Matthias


Not theme expert, but when I tested viewport from AUI, I had to place it at bottom part.

Did you import the needed alloy javascript to use that function?

If you are using latest sources there have been a change, I guess now AUI.use should be used (instead of AUI().use).
Maarten van Heiningen
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 5, 2012 4:25 AM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 173

Join Date: February 5, 2009

Recent Posts

Hi Juan,
You were almost there. You just need to past this code inside the <head> .... </head>

1<script type="text/javascript" charset="utf-8">
2AUI().use('aui-viewport');
3</script>


Best Maarten
Matthias Fenz
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 5, 2012 12:50 PM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

Recent Posts

Hi Guys, thanks a lot, it works!

But i have another question, when i check my theme on iPhone or iPad (both normal and panorama mode), i get the "normal" 960-width-layout and not the ones I developed for that. I think the browser doesn't get the real width of the frame.

Any idea how to override this, on Liferay's website it works perfectly?

Greets & Regards,
Matthias
Anonymous
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 5, 2012 5:33 PM
Answer

Anonymous

Try putting
1    <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1">


in the <head> section of the portal_normal.vm of the theme
Matthias Fenz
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 6, 2012 11:14 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

Recent Posts

Thank you Bradley, it works! emoticon
Anonymous
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 6, 2012 11:46 AM
Answer

Anonymous

no problem.

Have you taken a look at Liferay 6.1RC yet?

it lets you use SaSS which helps the code be simpler for mobile site design.

 1
 2@import "compass";
 3
 4@mixin mobile($selector, $width) {
 5    .#{$selector}{
 6        #wrapper,
 7        .portlet-column,
 8        #wrapper #content {
 9            width: $width !important;
10        }
11    }
12}
13
14$mobile-s: 300px;
15$mobile-m: 460px;
16$mobile-l: 700px;
17
18@include mobile("touch.aui-view-320, .touch.aui-view-4", $mobile-s);
19@include mobile("touch.aui-view-480", $mobile-m);
20@include mobile("touch.aui-view-720", $mobile-l);
Juan Gonzalez
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 6, 2012 11:53 AM
Answer

Juan Gonzalez

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2807

Join Date: October 28, 2008

Recent Posts

Bradley Wood:
no problem.

Have you taken a look at Liferay 6.1RC yet?

it lets you use SaSS which helps the code be simpler for mobile site design.

 1
 2@import "compass";
 3
 4@mixin mobile($selector, $width) {
 5    .#{$selector}{
 6        #wrapper,
 7        .portlet-column,
 8        #wrapper #content {
 9            width: $width !important;
10        }
11    }
12}
13
14$mobile-s: 300px;
15$mobile-m: 460px;
16$mobile-l: 700px;
17
18@include mobile("touch.aui-view-320, .touch.aui-view-4", $mobile-s);
19@include mobile("touch.aui-view-480", $mobile-m);
20@include mobile("touch.aui-view-720", $mobile-l);


Awesome lesson!

Thanks very much.
Anonymous
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 6, 2012 11:56 AM
Answer

Anonymous

What it does is it stacks all the columns on top of each other and sets the width for the different views.
Muller Strydom
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
January 24, 2012 1:04 AM
Answer

Muller Strydom

Rank: New Member

Posts: 1

Join Date: January 24, 2012

Recent Posts

Hi Maarten,

I am still using Liferay 6.0.5

Is it possible to use AUI().use.. on 6.0.5??

Thank you.
Maarten van Heiningen
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
February 19, 2012 6:39 AM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 173

Join Date: February 5, 2009

Recent Posts

Hi Muller,

Yes, Liferay 6 is supporting Alloyui fully so yes you can use it.

Best,
Maarten
Bahador Vafadar
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
May 9, 2012 5:12 AM
Answer

Bahador Vafadar

Rank: New Member

Posts: 23

Join Date: April 20, 2012

Recent Posts

Matthias Fenz:
Thank you Bradley, it works! emoticon


Hello Matthias would you mind sharing the solution I have the same problem as you describes above but I can't solve it no matter how I turn and twist the code.
I would really appreciate it thanks in advance!

Bahador
Rajesh Chaurasia
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
July 20, 2012 8:49 AM
Answer

Rajesh Chaurasia

Rank: Regular Member

Posts: 119

Join Date: August 18, 2011

Recent Posts

Can you share me an example of fluid layout that you made ?
Muhammed Shakir
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
August 24, 2012 11:51 PM
Answer

Muhammed Shakir

Rank: Junior Member

Posts: 36

Join Date: February 25, 2009

Recent Posts

Hi,

I also had the same problem but then the moment I changed from .yui... to simply .aui (syle names), it worked like a charm. I only used the aui-viewport module through AUI in main.js - thats it.

Hope this helps.