I know that there are many technically capable people here with a good understanding of CSS, so I have a question.
position: absolute;
is supposed to “position relative to the nearest positioned ancestor”. Is this meant to work within a css grid container? I may have a typo but can’t see it.
The usage is to create a 7 day calendar in columns, using a css grid to create the columns. Each day is to show booked time slots as div boxes positioned vertically by time of day and duration. There are two connected rooms and a booking can be for one, the other or both. When there are independent overlapping bookings for each I want to show a half width div box for each - one left the other right. ‘position: relative’ almost works, but they cannot be side by side.
This is not currently an Xway site. I’m just testing the concepts on a local host before making it one.
Hope someone can help or point me to a good other place to ask.
Thanks,
David
David Ledger - Freeway and Xway user since last century
Relative-positioned boxes can be positioned side-by-side within a flex container. Flex layout is natively supported by the current version of Xway (0.7), and there is an Xway Flexbox Tutorial on our website.
Thanks Jeremy.
I think the key is ‘within a flex container’. Grid boxes aren’t seen as flex containers. Absolute and relative positions refer back to the div containing the grid div. I did have a div within the grid column, but I didn’t position it. Making that intermediate div position:relative made it work.
The data to position the booking divs has to come from a php array, so unless I can ‘break out’ of Xway and embed php (which is no problem) and then ‘break back in’ to Xway to create the booking divs I’ll have to code the booking divs myself.
This is one of those cases that breaks the ‘css for style, html for data’ rule. The data has to be shown with css.