I have a long list of short items, such as below:
Apples
Oranges
Banana
USB stick
...
I would like this list to split into columns automatically to fill the width of the containing element, such that no item is broken onto two lines ("USB⏎stick" ), and the bullets line up nicely. Is this even possible? If so, how?
No. With css columns, you can set either the column width or the number of columns. There's no 'auto detect width' option.
I usually go for width in em and let the number of columns depend on the client's browser window width.
Related
I`m working with Vaadin 14 and i have a problem with sizing cells in Grid.
I would like to set autowidth on all columns to reduce size of column with small content size, but for long i want to achive max size of column without horizontall scroll ( i want to see all columns at once) and when it would exceed size of the table then i would like to wrap conten inside this column.
When i'm setting autoWidth for all columns then my long conten is shown in one line and i must scrolling horizontally to see other columns.
When i`m setting
grid.addThemeVariants(GridVariant.LUMO_COMPACT,GridVariant.LUMO_WRAP_CELL_CONTENT);
then my long column has this same size but with multi-line content as other columns with short content. Other columns are too long for their content.
I can`t set width separately for each column couse i dont know how many columns will be in the Grid and which column will have long or short content.
Here’s what I would try:
Use the LUMO_WRAP_CELL_CONTENT variant
For all other columns than the one with long content, set autoWidth and flexGrow=0
For the column with long content, set width to what you want as max-width and set flexGrow=1
For a printable layout I want to display a dynamic list (coming from an array) that should 'flow' through 4 columns of different heights, to look like this:
The blue elements are the four columns with the list (ul) inside.
The heights of the blue columns are fixed.
How can I achieve this with CSS? I looked at multicolumns in css but there the columns have to be the same height so that's not working I guess.
What's the best way to do this? It's fine if it only works in current web browsers.
I checked out 'flexbox' as well as 'css-grid' and even though it may be achievable I resign from doing it.
Instead I took another way and changed the initial array in the way I can comfortably place it in the different (now not connected) DIVs.
So here is an issue:
Web sites features 4 columns with descriptions, each inside the <p> element.
The problem: since text size differs by column, some columns are shorter than the others and when using a mobile phone or a tablet, they appear like this:
http://imgur.com/DZ7YKnz
How would one solve such issue? At first I have tried the min-height attribute but since there are so many resolutions, and sometimes I split into 4 instead of 2 columns per row, depending on device, setting min height for each resolution is a pain.
Is there any other way to do that?
Site: https://www.piere.lt
A solution could be using some javacript to equal the height of all columns; there are a lot of libraries like http://brm.io/jquery-match-height/
A suggestion: use pure-u-md-1-2 pure-u-lg-1-4 to show items 2 by 2 at lower resolutions
I am using ItemTemplate ( that is ViewCell ). I got know about the Orientation article in Xamarin documentation but there is no point about handling ListView orientation.
Hope to get the answer
Screen shots
http://i.stack.imgur.com/lkMvC.png
http://i.stack.imgur.com/5PrJj.png
As you can see from your screenshots, this is not an orientation problem, your listview IS the full width in both cases, what is quite possibly wrong are your layout options.
Can you show us your item template definition?
You are using a grid inside the ViewCell?
In that case, first make sure the grid's horizontal options are set to FillAndExpand, then check the grid column size definition.
Can you also show us the grid's column size definitions?
If they all have fixed sizes assigned, then they will always be that size, no matter how much unsued space there is.
There are 2 ways to make them use more space.
If possible, you should use the "star" sizes. This is where you give your columns sizes as portions of the available space.
If you give your first column the size 1*
and the second column size 1*
they will both take exactly half of the available width.
You can use any other numbers to select portions, such as three columns with sizes 5* 3* 1*
Which would make your first column 5 times as big as the third, and the second column would be 3 times as big as the third.
Again, in total, they will take the entire available width.
The second column sizing option is to use "Auto" sized columns, which will size the columns according to the elements inside them. Whatever size the largest element inside that column (in any of the rows) takes, that is the size that column will have.
To take the whole screen width in this case, at least one of the columns content should have "AndExpand" on it's horizontal options.
This is somewhat easier as it will automatically size the columns and you just take care of populating them properly with content, but be wary as this approach is significantly slower.
Finally, if you experience performance issues, consider implementing the ViewCell with an AbsoluteLayout. It can be a bit more pain to set up, but should work faster than grid if you have a bunch of rows inside the list view and a bunch of data in each row.
I have a tr with td's containing inputs. I'm not applying any size attribute or style with regard to width.
Some inputs contain just single digits and some contain words. The ones containing single digits have much extra white space and the ones containing words contain far less.
When I resize the page containing the table, the table shrinks to keep fitting 100% of the page. But, all the inputs seem to basically resize at about the same rate with no regard for which input has the most space to give up. By space, I mean the empty area in the input that does not show any data; the extra space to the right (as my inputs are left aligned).
Is there a css property that would apply to this situation to help accomplish reducing the size of the inputs which have the most white space to give up first and putting off truncating visible text as long as possible?
You could try auto sizing the inputs using a script like this:
https://stackoverflow.com/a/931695/288568
Anyways, the script is not for drop downs so far, but could be adapted.
But: If in the first line there is a 1 and in the second a 11 then the inputs would have different sizes.