Skip Navigation

[Résolu] Child layout with min-height

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 15 réponses, has 5 voix.

Last updated by Beda Il y a 4 années et 2 mois.

Assigned support staff: Beda.

Auteur
Publications
#396082
ChildFullWidth.JPG
ButFooterNotAtBottom.jpg

I am trying to give my child-layout a min-height, so that my footer (from parent layout) rests on the bottom of the page, even if my content is not that high. A fixed footer isn't the right solution for me.

So I tried to give my child-layout a div-class or -id, but that isn't possible for full-width-child content (as I read here: https://toolset.com/forums/topic/tag-class-and-id-not-working-on-child-layout-cell/).

If I'm trying to put my child layout into a grid of cells (as i read there: https://toolset.com/forums/topic/div-id-removed-from-child-layout-cell/), the full-width-content of my cells in the child-layout don't fit the full width. Only the row-width of my parent grid-cell.

So how can I give a min-hight to a child-layout?
Is there a workaround for that?

Please mark this also as a future request. I think, it's a common issue for many of us. All content-sections should be able to be positioned in a single #content-div (not only in a grid with container-layout).

#396215

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Dear diana,

In your case, I suggest you add the custom div ID(CSS class) in the child layout, then you will be able to setup the min-height also.

#396346
surrDIVforContentArea.jpg

And how can I do that, Luo? In parent layout I can't add an ID to the row with Child Layout Cell. And in the childs layout, I can't add a surrounding div for my content. Only a surrounding grid, which would crash my full-width sections in it.

Is there any other way, which I do not see?

As you can see in my source-code, my child-layout has different sections, showing different pages, some of them with full-width (.full-bg). I want to surround these sections with a single content-div. Then I could give this content-div a min-height. I think, that's a common procedure for layouting the content-area, isn't it?

As I said, If I'm adding a surrounding grid in the child-layout (what's the only way in layout I can think of), the container- and rows-tags coming with that grid, would crash the full-width-behaviour.

#396708

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

I just tested in your website, in the child layout add a full-width row "row 3":
hidden link

see the result in front-end:
hidden link

The red block does display as a full-width row, and will not crash the full-width-behaviour.

#396761
withSurroundingGrid.JPG
withoutSurroundingDIV.JPG

Come on, Luo. Do you read my posts and the related threads, I have given you? Where is the surrounding div for all of my content in your example? How should I add min-height here? Sorry, bat that's really not, what I was looking for ...

As I said before und showed you in my screenshot of the source-code (surrDIVforContentArea), I have a child content area, that has several sections with different page-content in it. I need to surround these sections with a single container-div, for to give the whole content-area a min-height. I made a copy of my layout for you for testing.

The original site (please don't edit this, only the copy below) without a surrounding div – and therefore without a min-height – here:
hidden link
(Screenshot "withoutSurroundingDIV")

The copy of this layout with a surrounding grid for my content here:
hidden link
hidden link
(Screenshot "withSurroundingGrid")

As you can see in the copy of my layout, a surrounding grid crashes the full-width behaviour of the section with grey background. I don't really need a grid, only a single div-container. But I can't find an option for that in layouts ...

To be more specific – I need a markup like this:

// headers from parent layout:
<div id="header"></div>
<div id="subheader"></div>

// now my child layout with min-height
<div id="content" style="min-height: 90%;">
    <section></section>
    <section class="full-bg"></section>
   ....
</div>

// now footer from parent layout

Do you now know what I'm looking for, Luo?

#396837

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

OK, I understand what you say, as you can see, when you edit the child layout cell, there is a warning message:
This cell in itself will not have a typical row structure on the front-end. It will directly output content of the child layout which is why you can not add classes and IDs to it. To add custom styling, edit the child layout instead and add custom classes and IDs there. For more information, see Using layout hierarchy for quick development.

As you request in post:
https://toolset.com/forums/topic/child-layout-with-min-height/#post-396082
Please mark this also as a future request

I forward this thread to our developers, hope they can find other workaround for you.

#397126

How can I mark this as a future request?

#400453

I still need help! I did have to launch the site without a proper workaround. There has to be a solution for that. Isn't there a trick, to surround the child-layout with a single div-container? Pleeeease ...

#402150

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Sorry, for the delay answer, I reassign this thread to our developer Juan, hope there is a workaround for you.

#402287

Juan
Supporter

Timezone: Europe/Madrid (GMT+02:00)

Hi Diana

This is Juan, lead developer for Toolset. Thanks for your feedback and patience.

AFter reading the whole thread, I can put your request of a way to set a minimum height for a child layour in our tracking system, but I suspect that will not be a good solution for your problem anyway.

Let me see if I got this straight.

You have a parent layour, contaning the page footer, and a child layout displaying the page content. You want to have the footer displayed at the bottom of the page, even when the content itself does not cover the whole page.

First of all, you stated that a fixed footer is not the right solution for you. I might ask why, since that is actually the outcome that you are expecting. There are several tutorials all around about making just that: stick the footer to the bottom of the page regardless of the content length, and all of them mention problems when the height of the footer is not known or fixed, so I assume this is your case indeed. Bootstrap provides its own, and also demands a fixed footer height:
hidden link

Now, setting min-height for your content container might nto be the best solution, as I said. Because you need either to use a fixed or relative value. No matter what decision you make, on some devices with a small viewport you will be generating "fake" scroll to load the footer. Expecially if your content does not cover your hole page height, it means there will be a lot of white space between your content and the footer, and reaching there will demand scroll.

I woud suggest to go with a Javascript based solution, or a flexbox instead. But if you really need a minimum height for a contaner, I do think that this shoudl be doable withut a new setting on Layouts, just by targetting the right element with a CSS selector. If I could take a look at the site and a broken example, I might be able to suggest something.

Regards.

#402295

Hi Juan!

Thanks for your answer and for your suggestions. My site is online now, so there isn't a test-site anymore. Here the link: hidden link

The footer should only be seen on the very bottom of the page. So the fixed footer isn't a solution for me. (It would minimize the seen content area on smaller screens.) But I have a few pages, where there is not much content. And in this case, I want to have the footer resting on the bottom of the page, not on the bottom of the content.

You can see, what I mean on this page: hidden link
On larger screens, you can see the white background from my page below the footer. Not really pretty ...

I can calculate the min-height of my content-area: It is 100% - headerHeight - footerHeight. That's not really the problem. And it is no problem to define that in my css. I don't know, why this should generate face scrolls on smaller viewports. Because calculating it from 100% does manipulate the min-height also in a responsive way ...

So my problem is, that I don't have a content-container to target with my min-height. My child-layout has several sections and rows (as you can see in my SourceCodeScreenshots). All my rows of the child-layout should lay in one single container (for example #content). But I can't define that in layouts.

So how can I create this surrounding container for my child-layout?

By the way, I think it's a common thing to surround the content-area with such a div. Then I could define different styles for the header-section, the content-section and the footer-section in an easy way. Normally fonts and links behave different in these areas. And with a content-div I could easily manage this.

#402763

Juan
Supporter

Timezone: Europe/Madrid (GMT+02:00)

Hi Diana

Thanks again for your patience.

Well, after talking to our Layouts developer it seems we will be getting a feature request for children layouts, so you can decide to wrap them on a container or not. So congrats and thanks for the feedback.

On the meantime, while this gets evaluated ane eventualy done, I am not that familiar with Bootstrap myself, but I believe that when rendering children layouts inside the parent, we were avoiding the extra wrappers to have a clearer output. It seems that when dealing with children layouts taking a full row, we avoid the natural cell wrapper and leave the whole strucuture to the children layout.

So I also have grey news for you. We have a couple of PHP actions running ehwn the cell starts and ends rendering, where you can modify the cell content, so this might be a matter of checking the cell type and doing it. The bad news is that you need to code the clution, and that we do not have public documentation for those ations yet. As you know, we are not supposed to provide code snippets on the support forum, so I am just going to add some info here so you can follow the dots 🙂

The action you should be hooking at is

ddl_before_frontend_render_cell

, and it takes two arguments: $cell and $renderer. The one you need to care about is the first one, which is the cell object. You can check its type by calling its cell method

get_cell_type()

, and then act when the cell type is the one matching a child layout.

Once you have targeted the righ cell type, you can get the cell content with the cell method

get_content_field_value('content')

, modify it and then save it back with the cell method

$cell->set_content_field_value('content', 'Your modified content goes here );

.

We will be documenting that action in the near future, adn as I said we are adding the option to wrap child layouts in the future. I know it might not solve your problem now, but thanks for your understanding.

Hope it helps.

Regards.

#404451
contentStyle.JPG

Hi again!
Thanks for your infos. But I can't find my child layouts type?
Is there a layouts-variable for children layouts?

The rendering of child-layout in a surrounding div doesn't break the bootstrap-behaviour if it's only one div where all children rows lay in. So instead of a structure like this:

<div class="full-bg " id="content">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
         // And then the content child rendering here …
        <div class ="full-bg">
           <div class="container"> ...

there should be something like this:

<div id="content">
  // And here immediately the content child rendering …
  <div class ="full-bg">
    <div class="container"> ...

Then everything would work just fine.

Hopefully this will be done in the near future. I'm realizing now my third project with your tools. And I really love Toolset and it's possibilities. But I'm often getting frustrated, when I have to target the content-area in any way. In my new project my content area should have a surrounding div with a background- and border-style for my child layout. It should look like a sheet of paper which is surrounding all of my child content (as you can see in my screenshot). And there is not really an easy and proper way to do that in Layouts. So hope dies last …

#405128

Dear Diana,

unfortunately we don't have a simple straightforward solution to your issue, but we can implement a simple way to achieve this through the API.

In the mean while I can propose a workaround solution that will require some editing, but it will perfectly work to achieve the wanted structure.

This is the flow you need to follow:

1. add an arbitrary CSS ID property to the first row of every child layout (not the Child Layout cell, but the child(ren) you are displaying inside of it), say "child-first-row";
2. add an arbitrary CSS ID property to the first row after the one where the Child Layout cell (this time in the parent layout), say "after-child-row".

Add this code to your functions.php file:

 add_filter('ddl_render_row_start', 'wrap_child_layout', 999, 2);
 function wrap_child_layout( $row, $args){
        if( isset($args['cssId']) && $args['cssId'] == 'after-child-row' ){
            $row = $row . '</div>';
        } else if( isset($args['cssId']) && $args['cssId'] == 'child-first-row'){
            $row =  '<div class="WRAP_CHILD">' . $row;
        }
        return $row;
    }

The result of this workaround will be that the child layout entire structure will be wrapped in a div with "WRAP_CHILD" class.

Hope this helps, best regards
Riccardo

#410405

Thanks Riccardo,
that works! Is there a way to assign it to a row with special class-Name? Tried it with 'cssClass', but unfortunately that didn't work.

I know, that ID would be better, but in my special case in all of my layouts my first-child has class "leading", but there are some, which already have special IDs. So it would be the faster workaround for me ...