Archived topic
Generateblocks button - how to fill vertical space in a container
11 replies · Started by Whelan on July 24, 2020
Hi
I'm trying to make a responsive grid of buttons with a background image. I want the buttons to that change colour when the user hovers over them. I can control the height of the container, but not the button. Some buttons have more text than others, so top padding is not consistent, because the text wraps differently at different screen widths.
Is there some css to tell the button to fill the vertical space?
In the link you can see the full spectrum grid and how it messes up when re-sized. It's very complex, and needs simplifying, I just want to know if it's possible for the colour to fill the space, i.e. using css flex?
Hi there,
Can you Select the Grid block parent container:
https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block
Set the Vertical Alignment to Default - this ensures the inner columns remain the same height. We'll correct alignment separately.
Give the block an Advanced > Additional CSS class of forced-height
Then let me know so i can look at the CSS required.
BTW Clickable containers will be a feature in GB Pro :)
Hi David
I’ve made the changes as you suggested.
If it’s helpful, I’ve created a login for you and Simple CSS enabled on that page
How can I send you the login privately?
Mike
Also... when do you think GB Pro will be released?
Hi there,
You can send login through our contact form: https://generatepress.com/contact
Just be sure to mention this topic.
Working hard to get GB Pro done - hoping first half of August.
Well its got me stumped....
Although i am not 100% sure its possible, what makes it really difficult is the layout.
To start there is the main Container with the class frozen.
The first nested block within that container 'the Full Spectrum heading' is in a Lone Column Block - which shouldn't exist outside of a grid - thats something that should not happen.
Then there is a 4 column grid, each of the first 3 column has another Container block inside it with a 2 column grid inside that which finally has the buttons block inside of them.....
Not sure what the 4th column is doing but it contains a spacer...
Ideally you would create 2 x Container Blocks:
Container 1 - add your Full Spectrum Headline.
Container 2 - add a Grid Block with 6 columns. Add a button block inside each column.
That would make it a lot easier to resolve this issue and no doubt a lot easier to maintain in the future. Let us know.
Hello again
Apologies for my slow reply. I've simplified the grid slightly, and added the "forced-height" class... but my preference is to have nested grids so that each of the three background images can span two columns. Is that the problem?
No problems.
Thanks for explaining the nested grids. That makes sense although it does make a complex layout.
If it weren't for the nesting you can force same height columns by leaving the Grid Parent vertical alignment to default. However nested grids behave independently of their parent.
The only simple fix i can see is forcing a min height on the innermost containers like so:
.gb-grid-wrapper.forced-height>.gb-grid-column>.gb-container .gb-inside-container {
height: 100%;
min-height: 270px;
}OK, your forced height fix works pretty well. Thanks
PS I agree it's an over-complicated layout which I won't be repeating.
I must say it looks great. Great to see what you have done with GenerateBlocks so soon after its release. Really inspiring.
GB Pro will make some of this easier as it will add clickable link function to Containers. So any container can be a 'button'
Thanks. I'm looking forward to GB Pro's containers as buttons feature
You're welcome - lots of good stuff coming real soon :)
