掲示板

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

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

12年前 に Matthias Fenz によって更新されました。

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

Junior Member 投稿: 79 参加年月日: 09/03/24 最新の投稿
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
12年前 に Juan Gonzalez P によって更新されました。

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

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
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
12年前 に Maarten van Heiningen によって更新されました。

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

Regular Member 投稿: 174 参加年月日: 09/02/05 最新の投稿
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
12年前 に Matthias Fenz によって更新されました。

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

Junior Member 投稿: 79 参加年月日: 09/03/24 最新の投稿
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
12年前 に Bradley Wood によって更新されました。

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

12年前 に Matthias Fenz によって更新されました。

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

Junior Member 投稿: 79 参加年月日: 09/03/24 最新の投稿
Thank you Bradley, it works! emoticon
12年前 に Bradley Wood によって更新されました。

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

thumbnail
12年前 に Juan Gonzalez P によって更新されました。

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

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
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.
12年前 に Bradley Wood によって更新されました。

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

thumbnail
11年前 に Bahador Vafadar によって更新されました。

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

New Member 投稿: 23 参加年月日: 12/04/20 最新の投稿
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
11年前 に Muhammed Shakir AK Misarwala によって更新されました。

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

Junior Member 投稿: 36 参加年月日: 09/02/26 最新の投稿
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.
12年前 に Muller Strydom によって更新されました。

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

New Member 投稿: 1 参加年月日: 12/01/24 最新の投稿
Hi Maarten,

I am still using Liferay 6.0.5

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

Thank you.
thumbnail
12年前 に Maarten van Heiningen によって更新されました。

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

Regular Member 投稿: 174 参加年月日: 09/02/05 最新の投稿
Hi Muller,

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

Best,
Maarten
thumbnail
11年前 に Rajesh Chaurasia によって更新されました。

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

Regular Member 投稿: 183 参加年月日: 11/08/18 最新の投稿
Can you share me an example of fluid layout that you made ?