Symbols to 100% height of the non-symbol parent container

[RTS]

Hello,
We have a grid layout container that we are filling with symbols, whose uppermost container has a height of 100% in order for all the symbols to be of the height of the tallest symbol in the grid.
The problem is that symbols do not seem to expand to the height of the non-symbol container when they are imported. From what I understand, when imported, symbols get wrapped in more containers automatically, that do not have the styling.

Is styling propagation something that could exist in the future for symbols?
What would be the best solution now, except to fix symbol height as we would like them to be flexible?

Builder content link
https://test.selectedalternatives.dk/test-news-cards-heights

Builder public api key
407d98627f82434eafbaff0fe548649e

What are you trying to accomplish
Container-responsive symbols.

Code stack you are integrating Builder with
Running on NextJS codebase, but implement into page model.

[manish-sharma]

Hi @RTS,

Welcome to the builder.io forum.

You can certainly try making symbols parent flex, with height 100%, align-items: stretch; or use CSS property flex: 1 for the flex child items.

eg.

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
    width: 100px;
    background-color: blue;
}
.flex-2 {
    position: relative;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: red;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
}
.flex-2-child {    
    background-color: green;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

[RTS]

Is that doable with grid layout parent container and not flex?

[RTS]

Just to be sure we understand each other @manish-sharma ,
I added flex-direction: row, and display: flex to
non-symbol parent container. And flex: 1 to child symbol item.

The issue seems exactly the same as in grid, the symbol item is shown to be full height, but its content does not stretch:

Is this me doing something wrong or just not an option in Builder?

[manish-sharma]

Hi @RTS,

You can try making the symbols items as display: flex and add flex: 1; property to them so that they can take the full available height. If that doesn’t work then do let us know, and we will try and implement that from our end. Thank you1

[RTS]

@manish-sharma As mentioned, I have set the non-symbol container to display: flex and flex-direction: row with symbol child to display: flex and flex: 1.
The result is as in the image I shared above, the outline shows symbols as being full height, but the content remains the same.

[manish-sharma]

Hi @RTS,

Because the builder uses nested div to create an element, you could use custom CSS to achieve this.

Add below code to Edit Content JS + CSS section

[data-model="symbol"] .builder-component{
    flex: 1;
}
[data-model="symbol"] .builder-content, [data-model="symbol"] .builder-content > div, [data-model="symbol"] .builder-blocks  {
    height: 100%;
}

[Dmac]

Just wanted to add that putting in custom code in every symbol seems like a really weird thing to do. This should absolutely be something intuitive in the editor, and right now it’s not.
I feel like adding this should be a no-brainer, and right now the solution seems completely anti-logical.

Can you please raise this to a team member to find a fix for it, because this might be something that would prevent us from using the tool. How could we expect any editor to add custom CSS…?

[Dmac]

Is this still an issue? It’s been almost a year since the original post, can we get an update? It seems the fix is quite simple.

[Dmac]

Hi there, this is still a blocking issue, can someone from builder team please comment?