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
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.
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
Context for this question
We have a web page that has two scrolling grids, not paginated grids. When the first grid is nearly empty, occasional users do not realize they can scroll down to see the second grid. Other layouts (tabs, etc. are not a desirable solution).
Aside. The entire page layout is due for an overhaul, but on the Development schedule it's still 2 years away. Today, we cannot remove the grids, and we cannot change the general layout of this page.
When the first grid contains very little content, it would be good to auto-shorten the first grid so that the second grid peeks up above the fold. But when the first grid has lots of content, it's better if the first grid remains at its default height, because this grid is where the main interaction takes place, and we don't want excessive scrolling.
The challenge is that, in the grids, each row varies in height to fit its content. Sometimes a row is 2 lines of text, sometimes 12 lines of text. This causes a hard-coded height based on the number or rows inappropriate.
The question
What methods are there to assess the height of the row content in the first grid so that, if the total is less than the default grid height, we can shorten the grid? Or is there another way to look at this problem?
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 have a datagrid that is updated periodically and the number of rows inside it grows steadily over time. It is inside of a parent div with a height of 60% of the screen.
If I set autoheight to, say, 5 rows, the table works properly. When a sixth row is added, a scrollbar appears within the datagrid and I can scroll up/down and the headers remain fixed at the top and visible. Unfortunately, once I have a lot of data, this is a waste of space -- I have 60% of the screen's height to work with, but only 5 rows are being shown at a time.
If I set autoheight to false, the scrollbar that appears is attached to the parent div. Scrolling up/down allows me to see the data, but the headers at the top of the grid scroll out of view.
Is there a way to ask the datagrid to show as many rows as it can fit and provide a scrollbar for the rest?
---- EDIT ----
Setting autoheight to false would be exactly what I want if the datagrid would resize itself along with the parent when I resize my browser. Is there a good way to achieve that?
I think you're looking for grid.resize(); If you look at the file "Grid.js.uncompressed.js" in the dojox nightly files here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/ You can see exactly what it does. The dataGrid should inherit this method, if you're using it. One way to use it is to resize the containing div based on the window's height, and then resize the grid inside:
function changeHeight() {
document.getElementById("div Id in which the dojo grid is there").style.height ="your desired height";
dijit.byId('Id of the dojo grid').resize();
dijit.byId('Id of the dojo grid').update();
}
Another option method is do do something like this:
function resizeGrid() {
// do whatever you need here, e.g.:
myGrid.resize();
myGrid.update();
}
dojo.addOnLoad(function() {
dojo.connect(window, "onresize", resizeGrid);
});