Is there any solution to avoid accordions in a grid pushing down the entire row, but instead only pushing down the column underneath?
Let's say we have a grid containing 3 columns and 5 rows. Each object in the grid (Card) has an accordion at the very bottom of it.
Related
I have a series of buttons that I want to appear in columns at the bottom of my QML page. The number of columns across should depend on the width of the window, as the window width increases I want more columns to be added. (And fewer rows as a result as components are pulled up to the previous line)
This is sort of like a Flow component, but I want the items to appear in columns, evenly spaced across the page, in rows and columns (columns centered vertically, at the bottom of the page). Sort of like GridLayout.
I can't figure out what QML component(s) to use to achieve this.
I think what you're looking for is a GridView. See the layout documentation.
I'm not positive, but based on your description I think you would just need to set the flow property to GridView.FlowTopToBottom.
So basically, I have a react app and I am trying to create a grid of square elements but:
i dont want to
shrink them below a certain size (meaning that when the page
shrinks, the last elements on a row are pushed to the next row
etc.).
I was also hoping to put in a few special 2x2 elements in the grid (realistically not
many, between 1-3)
I am looking to be able input a series of objects (ordered by priority) and have the page dynamically allocate them into the grid space as best it can.
I have done bootstrap grids in the past, 1. could be achieved fairly easily by changing the .col-x value at certain screen widths so the elements wrap
But 2. seems really hard:
making a static row with a 2x2 element and some 1x1 elements seems
easy, but then it will all break when the above row tries to wrap, or
when i have to wrap elements in this static row.
I was also thinking of offsetting 2 consecutive rows and just placing a div with the 2x2 boxes over the offset, but then i would have to change the row elements that are being offset on the fly, and i dont know how to get an element to tell me what row and column it is in.
Any ideas?
I would like to implement page grid-dependant width buttons so that they have quasi-auto width depending on the content, but with certain width steps so that button width always takes N number of page grid columns. When button content becomes too wide to render button in a single grid column, it would then become 2 columns wide (or even more if required)...
This image shows an example how buttons should be sized according to grid:
First row displays the second button that exceeds single column width (actually it exceeds two columns) and should therefore span 3 columns in the page grid. Second row shows the button correctly sized so it takes 3 full page grid columns.
How can this be done using only CSS (if at all)?
Note: I know this can be accomplished using Javascript, but I'm looking for a CSS-only solution if possible which may use flex, grid or whatever else layout that CSS3 provides.
You can use the CSS3 property auto-fill and auto-fit. See the Below Link
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
I'm using material-ui's Grid component, inside a ListItem. I'm trying to work out how to spread three columns worth of content across four columns of the material-ui layout, as follows:
Green lines indicate five of the twelve columns. In the first one is the red icon (ignore the margin to its left). That's clear. But then there are three pieces of content - Name, DOB, and an ID -- that are spread across the remaining four columns shown. The yellow lines indicate spacing between the three content pieces, which is supposed to be 1.5 rem.
I've forked a relevant material-ui demo here
If Grid items are the elements to be placed inside a Grid container, how do you handle spacing content inside an item?
EDIT: I've realized that a Grid container can indeed be nested inside a grid item, and have updated the codepen link to reflect that. What I now need to know is how to specify 1.5 rem in between each of the three content pieces. Their widths should be fixed such that the columns are respected even if the content piece is missing (e.g. there is no date -- the columns still need to stay in alignment)
Any help appreciated!
I have an editable ExtJS grid, whose 1st row has more height then other rows. The editor is defined for every column based on datatypes. As first row's height is more than the other rows and editor is common, neither I am not able to provide the extra padding on cell-editor in first row only.
As shown here.