I have been working on an expandable card that has a dynamic number of rows and columns depending on the content length and width of the container. I want the card to first be in collapsed view where only the first row is displayed and expand to show the full card when the user toggles the card. I am wondering if there is an option to hide all rows except the first one using CSS based on conditional class added on button toggle if not what would be the ideal solution to handle this using javascript? bear in mind the number of columns in a row will change based on screen size.
sample code sandbox
Related
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 want to make something like a gridlayout but the layout must decide how many elements can be fitted in a row, and when the row is full continue with the next row.
QtGridLayout also fixes the columns width.
I want to something like this (this pictures was manually organised in Horizontals and verticals grids)
When the image size changes one of the buttons goes to first row.
((In this compositions both images looks with the same size, but actually second one is wider than first one).
Some one answer this question but remove it, so the credits are for my unknown friend.
Qt have an example named Flow Layout Example for a widget based form and another for Graphics View widget.
I have four photos in one row. When the row is complete, I pass to another row and when it is full I pass to a third row, but this is incomplete. How can I tell to angular it is time to change line or the row is imcompelete and to close the row? I am using the grid of bootstrap3.
Does it need to be done programmatically? I would just put them all in one row, and handle the items per row issue in CSS with width percentages (25%) with float left
I would like to implement a UI with 1 or 2 columns depending on screen/device width. I'm using Ajax to load data into these two columns and append it according to those item heights so both columns take approx. the same amount of vertical space.
Everything's ok if user keeps their browser window size the same at all time, because initial loading will either fill 1 or 2 columns. But the problem arises when the user resizes their window I have to consolidate all content accordingly:
smaller size hides column 2 and all it's items should be inserted into columns 1 in correct order
larger size displays both columns and takes some content from column 1 and puts it into column 2
I can use Javascript to do this, but I was wondering whether it's possible to do the same in CSS only way?
An example of this is Google+ that works with 1..3 columns depending on content width.
I came up with a solution of my own
It is possible using CSS only but maybe not feasible
Feasible in terms of resource consumption. When adding items on the page, always put all of them in column 1 adding an additional CSS class to those that you also position in column 2.
Responsive media queries will then either:
Hide column 2 and show those additional items in column 1 (based on CSS class).
Show column 2 and hide items with appropriate CSS class in column 1
That's the only way to avoid Javascript processing when user resizes their browser window.
The problem
The only problem there is to this functionality is when you display lots of items, because your DOM will have on average 50% more nodes as approximately half of those items will be duplicated across the page (even though only one copy of those duplicates will be shown at a time).
I've a table containing one row of radio options and another with two paragraphs out of which only one will be displayed and another hidden based on value selected by user in radio options.
The issue is, those two paragraphs are of different content length making one paragraph consuming more space in table. When user selects the option to display bigger paragraph, the table expands automatically to fit bigger content. But again later if user selects a radio option to display small paragraph, it does not shrink it back which should shrink to fit a small paragraph.
Is there any to handle it in CSS?
You could try add this css as below, if not work, could you please paste your codes here for further investigation? hope this helps.
table-layout:fixed;