RE: Can Section Fragments contain other Fragments?

Matt Kruse, modified 5 Years ago. New Member Posts: 14 Join Date: 11/6/19 Recent Posts
I defined a Section Fragment that is responsive using bootstrap4 classes. Now I want to add content to that section.
However, it doesn't look like I can add Fragments to my Section Fragment. There is no <lfr-*> tag that will accept a fragment, and I can't find anything that will make a "drop target" for fragments.
So, for now, I am forced to put the content into Web Contents, and insert placeholders for them in my Section Fragment. But that doesn't allow my page designers to have freedom to do what they need to do.
Is it just not possible to drag Fragments into Section Fragments in the Content Page designer?
marvin ros, modified 5 Years ago. Junior Member Posts: 35 Join Date: 5/9/19 Recent Posts
Hello there,
I have the exact same question. I couldnt figure it out myself. So if anybody knows and answers here it would really help.
Matt Kruse, modified 5 Years ago. New Member Posts: 14 Join Date: 11/6/19 Recent Posts
I guess it seems pretty obvious that it's not supported right now, but I'd like to know if there is a hack or work-around for now. And more importantly, if this is coming in 7.3 or something.
This is the biggest thing preventing me from implementing the real functionality I want in Liferay.
thumbnail
Olaf Kock, modified 5 Years ago. Liferay Legend Posts: 6441 Join Date: 9/23/08 Recent Posts
Matt Kruse:

This is the biggest thing preventing me from implementing the real functionality I want in Liferay.
It'd be interesting to learn about the functionality you are looking for.
So far we know your proposed solution, but not what you want to do with it. As you're also asking about workarounds: even more so do we need to know the problems they shall solve.
(I'm saying this from the position of being largely ignorant to many frontend issues. Apologies if it's blazingly obvious, but even then, according to Pareto there are easier and harder criteria for several solutions or workarounds)
Matt Kruse, modified 5 Years ago. New Member Posts: 14 Join Date: 11/6/19 Recent Posts
The existing column Layouts in Content Pages aren't responsive. Further, I need to customize their behavior, so for example I need the right column to come on TOP of the left when viewed in mobile. Since there is no way to create my own Layout, I have created a Section Fragment with my own columns, using the Bootstrap classes I need to make it behave how I want.
But now I can't have people create Fragments to drag into the Section I created. I can only add placeholders for <lfr-widget-web-content> and pull in content from the CMS. But I want the content to be Fragments, so they can have their own CSS and Javascript associated with them, not just static content that Web Content provides.
I want to enable Page authors to drag their fragments into custom Section layouts, so they can decide which kind of structure they want on the page, and which Fragments they want in them.
Matt Kruse, modified 5 Years ago. New Member Posts: 14 Join Date: 11/6/19 Recent Posts
For reference, this is the Section Fragment I have created. I want each of the <lfr-widget-web-content> containers to hold Fragments instead.
<div class="container-fluid fragment_34739">
&nbsp; <div class="row">
&nbsp;&nbsp;&nbsp; <div class="col-md order-2 order-md-1">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <lfr-widget-web-content id="1"></lfr-widget-web-content>
&nbsp;&nbsp;&nbsp; </div>
&nbsp;&nbsp;&nbsp; <div class="right-col order-1 order-md-2">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="container-fluid">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="row">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="right-col-widget col col-md-12"><lfr-widget-web-content id="2"></lfr-widget-web-content></div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="right-col-widget col col-md-12"><lfr-widget-web-content id="3"></lfr-widget-web-content></div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="right-col-widget col col-md-12"><lfr-widget-web-content id="4"></lfr-widget-web-content></div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
&nbsp;&nbsp;&nbsp; </div>
&nbsp; </div>
</div>
marvin ros, modified 5 Years ago. Junior Member Posts: 35 Join Date: 5/9/19 Recent Posts
@Matt I know your problem and I am facing the same problems (embed page fragments into section fragments or other page fragments and making page fragment layouts responsive with different bootstrap col- classes). I have created a new thread for the page fragment layout responsive problem here

https://liferay.dev/forums/-/message_boards/message/117767286

Currently I have no solution for it but I would be glad if anyone can tell us if it is possible or not.
marvin ros, modified 5 Years ago. Junior Member Posts: 35 Join Date: 5/9/19 Recent Posts
Hello Olaf,

the problem is that if you create a layout with for example 4 columns you can not customize the responsive look in mobile view. I have made two screenshots to show the problem. The screenshots are attached to this post. And I created some imgurl links:

mobile view: http://imgurl.me/image/hiGov
desktop view: http://imgurl.me/image/hiznH

I want in mobile view that the cards taking the full screen width (col-12 or more specific class="col-xs-12 col-sm-12 col-md-3" ) but they stay in col-3...For me this is the reason why I was trying, like Matt, to create a whole new section because there you can add your own container/row/column layout. But here I have the problem that I cant put other page fragments in the new created section...

Is it currently possible to change or add the col classes in page fragment layouts or even create new page fragment layouts?
thumbnail
Olaf Kock, modified 5 Years ago. Liferay Legend Posts: 6441 Join Date: 9/23/08 Recent Posts
Thanks - now I understand. I can't answer that question myself, waiting for someone else to come in with an idea
thumbnail
Jürgen Kappler, modified 5 Years ago. New Member Posts: 6 Join Date: 1/30/15 Recent Posts
Hi Matt, we are working on what's called fragment containers, which would be like drop targets that you mention. These are spaces defined by the developer, in which an user could add the fragments that he/she wants inside of the page editor.

In other lines of work, the responsive behaviour for columns layouts will be able to be configured based on bootstrap. Basically, the user that is editing the page will be able to configure them.

Hope this helps. And also, thanks for bringing these topics up
marvin ros, modified 5 Years ago. Junior Member Posts: 35 Join Date: 5/9/19 Recent Posts
Hi Jürgen, 
thanks for your answer. Can you tell us when or in which version this will be available?
thumbnail
Jürgen Kappler, modified 5 Years ago. New Member Posts: 6 Join Date: 1/30/15 Recent Posts
Hi Marvin, it's in our roadmap, it's very possible that it will be available in 7.3
Alejandro González Jiménez, modified 5 Years ago. New Member Posts: 7 Join Date: 6/24/20 Recent Posts
Hi Jürgen, i just wanted to know if this feature (fragment containers) was finally included in 7.3
Thanks for your help
thumbnail
Christoph Rabel, modified 5 Years ago. Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
You can add a "<lfr-drop-zone id="drop-zone"></lfr-drop-zone> " to a fragment now and insert fragments into fragments now.
Alejandro González Jiménez, modified 5 Years ago. New Member Posts: 7 Join Date: 6/24/20 Recent Posts
Thanks!
Lee Jordan, modified 5 Years ago. Expert Posts: 449 Join Date: 5/26/15 Recent Posts
So fragments are not responsive? Wait what that would be a deal breaker.
thumbnail
Christoph Rabel, modified 5 Years ago. Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
??? What brings you to that conclusion?
Lee Jordan, modified 5 Years ago. Expert Posts: 449 Join Date: 5/26/15 Recent Posts
Errrr this ... Maybe it's a flexbox thing. I thought that couldn't be right that surely the columns in the rows collapse? I tried with two columns.
thumbnail
Christoph Rabel, modified 5 Years ago. Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
You mean that the left and right column should be above each other instead of beside since the space isn't sufficient?
That's actually tricky. Liferay has created a superflexible layout, BUT it makes it really hard to make it behave "nice" for all resolutions. If both columns were same width, it would be fine to have them side by side even with that resolution.
We always fiddle quite a while with the various resolutions to make if look nice everywhere.