[Resolved] Div wrapper around Layouts row

[Author]

Posts

[Eric Anderson]

One of my Layouts rows has these CSS requirements:
position: fixed; bottom: 0px
position: relative; left: -25px

Those two position rules can’t be used on the same div tag, but I think one could be used on an empty div wrapper and the other on the row div to get the desired CSS styling.

What is the best way in Layouts to wrap a row in a div tag? Or if that’s the wrong way to think about it, what’s the best way to achieve the above CSS on a Layouts row?

Thank you.

[Christian Cox]

I'm not aware of a good way to wrap the entire row in another tag. Rather than trying to control what's outside the row, it probably makes more sense to control what's inside the row. You could place a cell in your row and apply additional styles to that cell. You could try with a 1 x 1 grid of cells. Or, if you place a Visual Editor cell, you could place a div in that cell manually and then add other contents to your Visual Editor using shortcodes. You're familiar with the pencil icon in the top right corner of each row and cell, right? You can add classes or IDs to either element from the overlay, then apply your styles in Layouts CSS & JS.

Let me know if this approach doesn't work for you, or if you need further assistance to implement your positioning styles. I'll be glad to take another look.

[Eric Anderson]

Thanks. I tried your suggestions plus about a dozen other things.

Is there a reasonable way that I can add a Layouts row between ‘the content’ area and the theme footer?

I read the following link, but it advises against attempting this.

https://toolset.com/documentation/user-guides/hierarchical-layouts/?utm_source=layoutsplugin&utm_campaign=layouts&utm_medium=layout-kind-icon&utm_term=help-link

Basically, this row needs to follow the responsive CSS of the theme’s footer, but it can’t because it’s inside the ‘content area’ div, which is at a lower level than the footer div. I’ve tried every CSS technique I can find online and it just isn’t working. It really needs to live in its own div at the same level as the footer. It seems like Layouts should be the perfect solution for this, but it's difficult to tell from the documentation.

What do you recommend here?

Thanks.

[Christian Cox]

Hi, I don't know of a good way to extend Layouts beyond the_content area while maintaining your theme's header and footer contents. Have you tried manipulating the row type as seen in the attached screenshot? You can find these settings by clicking the pencil icon in the top right corner of each row in a Layout. I'm not exactly sure what you're trying to accomplish, but one of the alternate row types may be useful.

If this isn't helpful, can you show me the current design in a browser, and a short description (with image if possible) of how you would like it to behave instead? I can take a look and see if there's another good approach with CSS and Layouts.

Another option might be to include the row in the_content using Layouts, then use jQuery or basic JavaScript to move it into the footer div when the page loads.
hidden link
hidden link
Hopefully you don't need to resort to DOM manipulation, though.

[Eric Anderson]

Hi Christian,

I was able to resolve this issue with CSS.

But your answer is good because it eliminates from my mind that line of questioning in the future, so thanks.