I posted an earlier question about making having columns wrap in a way that utilizes the most space in the viewport, right here. Combining some of the answers, I came up with the following jfiddle. I will be having a variable number of columns (2-5) and a variable number of words in each column. If you resize the jfiddle window horizontally, you'll notice that the middle column uses a third of the viewport even though there are barely any words in there, essentially leaving empty white space. I wouldn't mind using jquery/js, but I'd like to have the columns more smartly resized.
The current CSS I have is
body {
padding: 1em;
display: table;
width: 100%;
}
div {
display: table-cell;
-moz-column-width:7em;
-webkit-column-width:7em;
column-width:7em;
}
span {
display: block;
width: 5em;
}
The body is the container, and the divs represent the columns, and the spans are the words in each column. The only thing I want to avoid at all costs is having the columns go underneath each other.
Your columns act the way they do because they are equal in size. You have a single style for div so all columns get the same styling rules applied and (in your fiddle) equally share the width getting 1/3 of the horizontal space each.
Only having 7 entries in Column B means that it doesn't reach the bottom so does not wrap into inside the div like the other columns with more contents, so cannot use the additional space.
It not really a case of "even though there are barely any words in there" its because "there are barely any words in there" - there is not enough content to wrap into the space based on the height of the table cells.
The height of the cell is determined by the contents of all three columns and how they wrap. So whichever column has the most words will wrap its contents until is takes up a amount of space vertically on the page. This is then the height for the entire table and all three columns. If either of the other two columns don't have enough content to wrap they will leave space.
If you double the number of words in columns A for example you can easily get a situation where there is "left space" in both column B and column C.
Related
I don't think I asked this as clearly as I could for easy searching, but here goes:
How can I make a bootstrap column extend to a larger height so that when the columns wrap around, they get offset by it even if it's not tall enough to cause that normally.
Essentially, how do I make the bottom panel in this bootply stay centered in both cases?
http://www.bootply.com/FCgrUtGuQ0
My left panel will be of variable length, which means that if I use a col-x-offset-x it will get pushed over further if the left panel extends below middle.
If I add the bottom panel to a new row then it will have whitespace above it if the panel left is longer than middle.
I tried the negative margin trick without success. It lets you change the background colour which those examples all used, but it doesn't seem to cause the floated panels to shift right.
I need this layout to behave differently at smaller screen sizes, so I can't just put the middle and bottom in the same col-x-6 as this is actually my lg layout, and at sm I need it to act with left at the top in a row, middle and right as two columns in the second row, and bottom as a third row.
Negative margin trick:
.row {
overflow:hidden;
}
#extend-down {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
This isn't answering my own question directly, as it doesn't explain how to expand the column height to make the repositioning happen properly, and it's not generic to all column sizes and arrangements.
But in my exact case this arrangement of columns and rows case can be solved with two master columns and then separating the contents of the second, where 3-6-3 columns can easily be made to be 3-9(4-8) columns which maintain the same 3-6-3 spacing.
http://www.bootply.com/UTq2klEuCG
By putting the middle, right, and bottom in the second column then letting those wrap around naturally seems to handle all my cases with this specific layout.
So I went from
col-x-3
col-x-6
col-x-3
col-x-6
to
col-x-3
col-x-9
{
col-x-8
col-x-4
col-x-8
}
This isn't ideal, as a 2-8-2 arrangement might be best at a large screen size, but the math doesn't work to easily create a subset within the col-x-10 that would need that follows the same spacing as a 2-8-2.
When tables are rendered the table usually only takes up 100% of the screen (if it is big enough) and then the columns get as little space each as is possible. Typically the columns will get as much space as the longest non-breakable content requires. How can I make things so that each column will get as much space as its longest content, even if that means the table will have to take up more than 100% of the screen width? I want each column to be as long as its longest content, regardless of how much space the table will have to consume.
Try this:
td {
white-space: nowrap;
}
This makes it so the text in each table data cell will not wrap.
Proof it works: Here.
I have an HTML table with 2 columns. I want to show them both full, the second with right align. Now I make that with width: 100%; for the first column. But now the second column is always wrapped by words.
I want the second column to be on the right, but wrapped only if there is not enough space to show both columns full.
If you are really thinking about mobile or smaller screens on this case you should consider using a media query. In this case, when the screen falls below a certain width, you can specify a wider width for the right column.
http://www.css3.info/preview/media-queries/
Add the following CSS styling to the cell on the right:
td {white-space: nowrap;}
This will prevent the text inside the cell from wrapping, as in your example.
I have some data (a list) that I need to display in a layout with rows and columns. On my desktop I have room for it to have 5 columns, but my mobile device only has enough width for one column. How can I display this data so that if there isn't room for another column, the next item just starts a new row.
I tried using "float: left;" and it's very close to what I want, but when there isn't any more room and it starts the next row, I need the columns to still line up.
update: The problem with float:left; is that the items don't line up into columns. Since the items are user-editable I don't have any way of knowing ahead of time how wide they might be.
update2: Removed references to table and instead described what a table looks like.
This shows an example of how the markup is and what I have attempted. It also has a manually built table that shows what I'm trying to get it to do.
http://jsfiddle.net/7rrcQ/
If you want them to line up in columns, then obviously for a column its elements must have always the same width. If you don't want to touch floated elements width, then you can wrap them in another div and then fix that div width.
Otherwise calculate dinamically with javascript floated element width and apply to them margins to line up with the column. But anyway you have to have in mind some column width, known a priory or calculated from first dynamically loaded element in that column.
If you want to adjust number of columns to the page width, then all column elements from all columns must have the same width if you want them to line up, because one element may be from a column or from another depending on the page width. If this width is in percentages, then there will be always same number of columns independently of the page width. In the other case (in pixel, em's), column elements will "jump" to the next row when page is gets more narrow.
I hope this is what you were looking for.. http://jsfiddle.net/7rrcQ/5/
<div class="newContainer">
<div class="tdElement">Lorem</div>
<div class="tdElement">ipsum</div>
<div class="tdElement">dolor</div>
<div class="tdElement">sit</div>
<div class="tdElement">amet,</div>
<div class="tdElement">consectetur</div>
<div class="tdElement">adipiscing</div>
<div class="tdElement">elit.</div>
</div>
Your Css
.container {
overflow: auto;
width: 100%;
}
.tdElement{
border:1px solid black;
float:left;
width:100px;
}
It is not possible to achieve the result without setting the items to a specific width (in some units). A table (whether in HTML or using display: table etc. in CSS) can get its column widths allocated by browsers according to the width requirements of the items, but then you need to have content divided in columns in a specific manner.
To make the amount of columns depend on the available total width, you would need scripting and guesswork.
If equal-width items are acceptable (and I don’t see why not) and if you can make a reasonable guess on the maximum width in em unit, you could use your current (div and span markup) and only the following style sheet:
.item {
border: solid 1px;
padding: 0 0.15em;
float: left;
width: 5.5em;
text-align: right;
}
The main problem is that adjacent borders won’t collapse. Sorry, I have no solution to that.
Is there a way to prioritize one table column in HTML? The thing is, I've got 4 columns, and the content may change a lot for the content in all cells. But I want the first column to take up as much space as possible, so the 3 other columns only use as much width as they need to keep everything on one line.
The table itself has a fixed width.
Assign a class to the three last cells in each row like this: <td class="tight">. Now, add CSS like this to your stylesheet:
td.tight
{
width: 1px;
white-space: nowrap;
}
The width rule instructs your cell to be as narrow as possible, and the white-space rule dictactes that the contents of the cell should never wrap across several lines.
This solution assumes, that the table is styled to have some fixed width (possible 100%).