My outside container has the columns: 2 style.
The content of that is a grid with two columns itself, the labels on one side and the input on the right. The idea is that when the viewport is large enough, the content is split in two columns, and when it's small it's only one column.
It works well on Chrome, but in Safari there is an annoying behavior. The column wraps inside my grid rows.
I created a codepen that demonstrates the problem. Resize the text area to trigger column wrap.
In Chrome rows are wrapped whole:
In Safari, rows are split across columns:
I expected this to work
input, textarea, label {
/* This has no apparent effect */
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
but no luck.
Any hint?
Related
I have a div #customers_table which contains several <div> columns. I am not using any <table>, rather I make my inner divs behave like a table columns. These columns/data is coming from database. So the columns can be less or more depending on what you choose to add or remove in this web page.
I can't set a fixed width to #customers_table as I explained above we don't know in advance how many columns are going to display. So I wanted a horizontal scrollbar when the columns are enough to view in screen. The horizontal scrollbar will appear when the columns are out of viewpoint.
A sample extracted part of my HTML:
<div id="customers">
<div id="customers_table">
div columns
div columns
div columns
...
...
...
</div>
</div>
To achieve this, I wrapped my #customers_table div within a parent div #customers. I have applied following CSS to these 2 divs:
#customers {
overflow-x:auto;
overflow-y:hidden;
width:100%;
}
#customers_table {
border:1px solid red;
min-width:1500px;
padding:5px;
}
You can see that I am applying a min-width of 1500px. Though it does work when I add 2 or 3 more columns from my website. But when I add more and more columns the columns headers/divs are screwed up and break to second line.
Please see the screenshots below:
This is fine (when columns are less):
We can scroll through to see hidden data.
But when we add more and more columns then this issue arises:
I can't increase min-width since I don't know how many new columns will come in this table. So what is the solution to this problem so that the end result should match with my first screenshot irrelevant of the fact how many new columns a person can add?
My problem is when I try to add margin bottom to all elements of columns:2 list, i've added margin-bottom:5px for spacing but for some reason it doubles the spacing. One in the third element bottom and the fourth element top (which gives me the problem)
Is there any solution for my problem?
I have just hit this bug in Chrome.
With a little investigation, it seems the bottom of the last <li> in the first column gets placed at the top of the 2nd column.
The solution was to apply the follwing to the <li>'s:
display: inline-block;
width: 100%;
Hope this helps, someone else.
I recently had a similar issue too and the solution is in MDN docs.
.card {
break-inside: avoid;
page-break-inside: avoid;
}
And an example from MDN.
Actually it was bug inside an old version of Chrome.
I tried Firefox and Chrome current versions; neither of them had this problem.
Given a document with h2 elements followed by p elements, I some times get a page break between the h2 and the first p, when using wkhtmltopdf.
I have tried:
h2 {
page-break-after: avoid;
break-after: avoid;
}
h3 + p {
page-break-before: avoid;
}
which I think should avoid page breaks after all h2 elements, and avoid all page breaks before a p element that follows a h2.
Neither of these seem to have any effect. Perhaps I am misusing them.
What does seem to work is page-break-inside: avoid;, but that means I have to wrap the header and first paragraph in an element and apply that style to it. Perhaps that is the only solution right now, but it causes me some other problems.
Can anyone offer any help?
From: http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf_0.10.0_rc2-doc.html
The current page breaking algorithm of WebKit leaves much to be
desired. Basically webkit will render everything into one long page,
and then cut it up into pages. This means that if you have two columns
of text where one is vertically shifted by half a line. Then webkit
will cut a line into to pieces display the top half on one page. And
the bottom half on another page. It will also break image in two and
so on. If you are using the patched version of QT you can use the CSS
page-break-inside property to remedy this somewhat. There is no easy
solution to this problem, until this is solved try organising your
HTML documents such that it contains many lines on which pages can be
cut cleanly.
I think that means page-break-inside: avoid; is the only option that works right now (although I am using version 0.12.1.1).
What is the reason of using float:left for an element with width:100% in the 1140px Grid V2 by Andy Taylor https://github.com/andytlr/cssgrid
.row .twelvecol {
width: 100%;
float: left;
}
If for no other reason, probably consistency. Since all the other column numbers have to be floated (to get them as column groups across the row), it may be simply so that the full width column .twelvecol would have the same float applied, therefore being less likely to cause issues of it behaving differently with its wrappers or content compared to other column groupings.
Look at this fiddle even in a modern browser (Firefox 18) and note how the second full width row (the third row of the example) is not showing its yellow background color because the float was removed from it but it holds a floated element in it. This would be the type of issue avoided by putting a float on it.
I'm using this free html template to create a page that displays some information about a web application. Please see this JsFiddle for reference: http://jsfiddle.net/wx3Gz/1/
The problem are the tables in the three columns in the main content.
I'd like to set the tables to the same width as the column (274px) each, and the content should be automatically arranged within.
For the first table I'd like to have the 2nd column to be as wide as the content requires, the first column then should take up the rest of the available width and overflow with ellipsis.
Anything I already tried (setting display: block on the table, using tabley-layout: fixed) resulted in either a table with all the columns having the same (wrong) width or in the most cases in content overflowing the column.
The perfect solution would format all tables in the three group-elements to a max width and allow to set a css class on the columns (the th elements, that is) that should show ellipsis where the column gets to wide). An almost perfect solution would require that css class on every cell.
I need this to work in Firefox and IE7/8. Ideally also IE9 and Chrome.
Try setting a max-width on the table cells rather than on the table directly:
td {
max-width: 200px;
}
td div, td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Here's a modified version of your code. I'm not on Windows, so I can't check in IE.