Question about the CSS Tools plugin

[kevin2]

I’m looking for a way to set the height of element X based on the height of element Y when one is “nested” inside the other.

I tore down my experiment yesterday when it didn’t work, so I can’t provide specific details, but here’s the situation.

Container-outer is a column container
Container-inner is a column container
Group A
Group B
Group C
Other stuff

I want the height of Container-outer to always be 20 px taller than the height of Container-inner, where the height of Container-inner is always some increment of 20 px.

Basically, I always want a blank line at the bottom.

I can easily obtain the height of Container-inner, but when I create a condition such as:

When Container-inner height is 20
Container-outer Min height is 40

It’s syntactically correct, generates no errors, and does absolutely nothing.

Is there a way to do this using CSS Tools?

If not, is there a way to do this at all?

[Serg]

Hi @kevin2, thanks for your question.

@kevin2

Basically, I always want a blank line at the bottom.

Have you tried to use new responsive tools for your case? Please check the gif image.

Summary

If there will be any plugin-related questions, please let me know and share more details about.

Regards,

[kevin2]

For anyone who stumbles across this topic, I was just doing it wrong.

I was putting row containers into a repeating group which was laid out as a column container and the rows were properly stacked one on top of the other.

However, as the page got narrower, it was not possible to know the precise number of links the various row containers would expand to as they had elements of various lengths which caused them to wrap at different places.

So, I thought I needed to be able to count the number of lines, which is my case is the number of pixels as each line is 20 pixels tall.

This was the wrong pay to think about it.

The answer was to place a column container group into the column container repeating group, place all the row groups into this column container group, then add a margin of 20 px to the bottom of this column container group.

The column container group is one “repeating group row” implemented in a column container.

This column container group simply expands and contracts as needed to fit the containers inside them.

And this ensured there is always one blank line between each of the repeating group rows.

[Serg]

Hi @kevin2, thanks for letting me know that you’ve found a solution for your case

If there will be any other questions about our products that we can help with, drop me a message

Have a nice week!

Regards,