Archived topic
Positioning Issues
7 replies · Started by Timo de Vries on February 1, 2021
Hi guys,
I am trying to position a button as in the following scrrenshot (current page I am trying to convert to GeneratePress): https://tinyurl.com/y6t6m36s
I have created an element and that uses the generate_before_main_content hook. Inside I put a container and styled a button to look like the round icon.
I am struggeling to get it positioned, so that the container the icon sits in doesn't take any additional height on the page. I tried something like
.post-info-container {
z-index: 100;
position: absolute;
right: XXXpx;
top: XXXpx;
}but that doesn't work for different window sizes.
Can you help me?
Hi there,
Absolute Positioned elements are placed relative to their parent container.
For example if you were to add a GB Container Block, and it give it an Additional CSS Class of: relative-parent
Then add this CSS:
.relative-parent {
position: relative;
}Then within that container you add your content block with your custom class eg. post-info-container. Your absolute position CSS will now work, as its position will be constrained to the parent container.
Hi David,
thanks a lot - that did the trick!
If anybody else is looking for a solution, I just added
display: inline;
to the relative parent, so that it doesn't take any whitespace in my layout.
Glad to be of help.
Unfortunately, I had to reopen - it doesn't seem to work in firefox. Do you have an idea for a cross-browser solution?
Also I have some gb-buttons and the default button container is set to "align buttons to the right" - in firefox these are centered. Is this a bug?
The GB Container holding the icon and table has the Full Width option applied to it. Select that Block and from the blocks toolbar deselect that option - its not required as your page is set to full width. Its also the cause of this issue.
awesome - thanks :-)
You're welcome
