Foros de discusión

  1. Inicio
  2. Development
  3. Fluid Layout (as Liferay Website) with AUI doesn't work

Fluid Layout (as Liferay Website) with AUI doesn't work

Matthias Fenz, modificado hace 12 años.

Fluid Layout (as Liferay Website) with AUI doesn't work

Junior Member Mensajes: 79 Fecha de incorporación: 24/03/09 Mensajes recientes
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:


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


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


.intro {
	color: #123456;
}

.yui3-aui-view-lt720 .intro {
    color: red;
}


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: 


/**/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
thumbnail
Juan Gonzalez P, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Liferay Legend Mensajes: 3089 Fecha de incorporación: 28/10/08 Mensajes recientes
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:


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


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


.intro {
	color: #123456;
}

.yui3-aui-view-lt720 .intro {
    color: red;
}


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: 


/**/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).
thumbnail
Maarten van Heiningen, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Regular Member Mensajes: 174 Fecha de incorporación: 5/02/09 Mensajes recientes
Hi Juan,
You were almost there. You just need to past this code inside the <head> .... </head>

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


Best Maarten
Matthias Fenz, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Junior Member Mensajes: 79 Fecha de incorporación: 24/03/09 Mensajes recientes
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
Bradley Wood, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Matthias Fenz, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Junior Member Mensajes: 79 Fecha de incorporación: 24/03/09 Mensajes recientes
Thank you Bradley, it works! emoticon
Bradley Wood, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

thumbnail
Juan Gonzalez P, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Liferay Legend Mensajes: 3089 Fecha de incorporación: 28/10/08 Mensajes recientes
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.


@import "compass";

@mixin mobile($selector, $width) {
	.#{$selector}{
		#wrapper,
		.portlet-column,
		#wrapper #content {
			width: $width !important;
		}
	}
}

$mobile-s: 300px;
$mobile-m: 460px;
$mobile-l: 700px;

@include mobile("touch.aui-view-320, .touch.aui-view-4", $mobile-s);
@include mobile("touch.aui-view-480", $mobile-m);
@include mobile("touch.aui-view-720", $mobile-l);


Awesome lesson!

Thanks very much.
Bradley Wood, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

thumbnail
Bahador Vafadar, modificado hace 11 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

New Member Mensajes: 23 Fecha de incorporación: 20/04/12 Mensajes recientes
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
thumbnail
Muhammed Shakir AK Misarwala, modificado hace 11 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Junior Member Mensajes: 36 Fecha de incorporación: 26/02/09 Mensajes recientes
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.
Muller Strydom, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

New Member Mensaje: 1 Fecha de incorporación: 24/01/12 Mensajes recientes
Hi Maarten,

I am still using Liferay 6.0.5

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

Thank you.
thumbnail
Maarten van Heiningen, modificado hace 12 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Regular Member Mensajes: 174 Fecha de incorporación: 5/02/09 Mensajes recientes
Hi Muller,

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

Best,
Maarten
thumbnail
Rajesh Chaurasia, modificado hace 11 años.

RE: Fluid Layout (as Liferay Website) with AUI doesn't work

Regular Member Mensajes: 183 Fecha de incorporación: 18/08/11 Mensajes recientes
Can you share me an example of fluid layout that you made ?