Alloy not initialized in my custom theme

[Thomas Kellerer, geändert vor 11 Jahren.]

Hello,

I'm in the progress of upgrading my theme and layouts from 5.2 to 6.0.

So far I got most of the things to work, but unfortunately I cannot move portlets around any more.

The reason for this is, that apparently the CSS class "aui-dd-draggable" is not assigned automatically to my portlet headers.

I confirmed that the AUI().ready() function is loaded during page load, so Alloy is at least loaded - but apparently not initialized correctly to "massage" the portlet display.

I have searched through all the code, but I cannot find out what I need to do in my theme (or layout) in order for Liferay to apply this class to the portlet header (either in "no border" mode or with a portlet border)

Do I need to assign a special CSS class to the columns in the layout template? I tried using portlet-layout, portlet-column, portlet-column-content, portlet-column-content-only but to no avail.

In 5.2 it was enough to assig the CSS class "lfr-portlet" to the surrounding div. Apparently lfr-portlet was renamed to portlet-column in 6.0 but changing that didn't help either.

I also don't see target columns being highlighted when I try to drag a portlet from "Add application" drop down menu. I think both problems are related.

Any ideas?

Thanks
Thomas

[Oliver Bayer, geändert vor 11 Jahren.]

Hi Thomas,

not sure why it's not working for you. In my custom theme I'm able to drag&drop the portlets into the different columns. Maybe you need one (or all??) of the following includes:

...
$theme.include($top_head_include)


...
$theme.include($body_bottom_include)

$theme.include($bottom_include)

HTH Oli

[Thomas Kellerer, geändert vor 11 Jahren.]

Thanks for the answer.

Unfortunately I have all those calls in my template.

I didn't have $theme.include($body_bottom_include) but adding that didn't change anything.
(And the default templates don't have that call either)

I also suspected that it would somehow conflict with JQuery but even after removing that, Alloy is not properly initialized.

It seems to be related to my page layout, rather than the theme though.

When I use a built-in page layout things are working. Probably some kind of marker CSS class that I'm not setting properly.

[Oliver Bayer, geändert vor 11 Jahren.]

Hi,

ok, dou you get any js errors in the firebug console?

If you use a custom layout can you please paste some code? In my own custom layout I've used the css classes "portlet-column" and "portlet-column-first" / "portlet-column-last".

Greets Oli

[Thomas Kellerer, geändert vor 11 Jahren.]

Oliver Bayer:

ok, dou you get any js errors in the firebug console?

No Javascript errors. I have already checked that.

Oliver Bayer:

If you use a custom layout can you please paste some code? In my own custom layout I've used the css classes "portlet-column" and "portlet-column-first" / "portlet-column-last".

This is one of my layout definitions:

<div class="portlet-layout">
    <div id="mr-feg-column-1" class="segE right16px portlet-column portlet-column-first">
        $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
    </div>

    <div id="mr-feg-column2" class="segF segGradient536 right16px portlet-column">
      <div style="padding: 16px;">
        $processor.processColumn("column-2", "portlet-column-content")
      </div>
    </div>

    <div id="mr-feg-column3" class="segG portlet-column portlet-column-last">
      $processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
    </div>
</div>

I'm not sure how to use the portlet-layout class though That seems to be new in 6.x

[Thomas Kellerer, geändert vor 11 Jahren.]

I finally found the reason.

Lifery apparently expects all portlets to be contained in a div with id="main-content"

As soon as I added that to my page layouts, I can drag the portlets around again.

[Yan Naing Oo, geändert vor 11 Jahren.]

HI Thomas

I still could not drag and drop my custom layout. below is my code and could you please tell me what is wrong.

<div id="main-content" role="main">
<div id="main-content" class="lfr-grid">
<div class="lfr-column thirty" rowspan="3" valign="top">
$processor.processColumn("column-1")
</div>
<div class="lfr-column thirty" valign="top">
$processor.processColumn("column-2")
</div>
<div class="lfr-column thirty" rowspan="3" valign="top">
$processor.processColumn("column-3")
</div>
<div class="lfr-column thirty" valign="top">
$processor.processColumn("column-4")
</div>
<div class="lfr-column thirty" valign="top">
$processor.processColumn("column-5")
</div>
</div>
</div>

thank