i’m struggling to come up with a way to solve this layout problem without using a css grid, so i think i’d like to have a grid added. the matrix component could solve this, if it would function without a datasource, and if i could specify the span of objects, width of columns, etc. (the first column would be 80%, second, 20%, and the bottom box would span the two columns):
The following layout is a flexbox, with wrap turned on, and the width of the bottom box set to 100% to force it to wrap to a second line.
i would like to line up its right with the right of the button panel. for the purpose of responsive design, i want that alignment to be maintained, regardless of window size (assuming that the other geometry constraints are met):
Hello Mikey,
I understand the challenge presented by the layout issue. While a grid component isn’t directly available, we can achieve the desired layout by combining styleboxes.
It’s worth noting that even if a grid component were in place, it would essentially represent a structured arrangement of styleboxes.
To simplify the process, we offer ready-to-use Templates, particularly in your case those categorized under Page Layout. I recommend selecting the Two Columns template.
Here are the steps:
- Go to Templates, click the
Page Layoutcategory, and drag and drop theTwo Columnstemplate onto your canvas. - Once chosen, set its width to 100% and height to 80% of the canvas.
- You can then easily adjust the columns within to fit your needs, such as setting the first column width to 80% and the second column to 20%. For heights, both would take 100% of the parent stylebox.
- Lastly, add another stylebox underneath it with a width of 100% and a height of 20% of the canvas.
And you would get this layout:
Now, for your next inquiry regarding button alignments between the two main boxes:
- Delete the bottom box.
- Duplicate the first box created from the template.
- Change its height to 20% of the canvas.
- It will now contain only one button, aligning well with the buttons from the top box.
And you would get this layout:
Best regards,
1 Like
nice.
the reason for asking about a grid, is because i’ve got a 3x3 and 4x4 type of arrangement, that i sketched out, for a different form. it seems that would also be doable, with a similar process. it would just be more work to keep everything related, once it comes time for smaller adjustments are made, right?
Hello Mikey,
Certainly! Within the Templates, in the Page Layout category you’ll find options for both 3 columns and 4 columns. To ensure consistent alignment, follow the same steps outlined in the previous post for the 2-column layout.
To ensure cohesion on smaller screens, consider the impact of both screen resizing and stylebox content (the embedded components). Test thoroughly across various screen sizes, adjusting layout sizes for components if screens shrink below a certain width. Unfortunately, achieving effective responsiveness may demand extensive use of CSS, particularly with @media screen and (max-width: 680px).
@media screen and (max-width: 680px)is a media query that targets screens with a maximum width of 680 pixels. This is often used in responsive web design to apply specific styles when the screen size is 680 pixels or smaller.
Best regards,
1 Like
also note: there is a qodly grid component
1 Like
I saw it too, it’s impressive but I would have liked to be able to give it a data source (collection or EntitySelection) so that it is more adaptable and allows for example to create photo galleries with custom sizes or things like that.
But it remains a very well made component!
hopefully it’s on par with a typical css grid, because i’ve had difficulty getting flexboxes to look the way i want some of the layouts to look.
1 Like