I am having a problem where when I fill a html input box like:
If I add one character more it will fall out like:
This is the css:
form {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Here is a fiddle
I have tested this with chrome only.
Update
This does not happen in safari
Update 2
This does not happen in firefox
Here is the bug report
Related
I'm trying to create a layout with automatic CSS columns. They look fine in Firefox but behave very strangely in Opera (both latest versions, Mac).
In Opera when there is sufficient content, the text all appears vertically centred in the columns, whereas I want it to be top-aligned (and would expect it to be by default).
Also if there is a lot of content without a break, it reverts to a single column and seems to 'break out' of the flow.
I have tried vertical-align and I have been fiddling about with flex – but this seems to break the columns completely.
.two-col .textwidget {
-webkit-column-gap: 50px; /* Chrome, Safari, Opera */
-moz-column-gap: 50px; /* Firefox */
column-gap: 50px;
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count:2; /* Firefox */
column-count:2;
}
As I said in Firefox it appears how I would expect and how I would like. In Opera – no.
I've tried to read the number of columns from HTML attribute.
Something like this one:
div.columns[cols] {
column-count: attr(cols)
-webkit-column-count: attr(cols) /* Chrome, Opera, Safari */
-moz-column-count: attr(cols) /* Firefox */
}
It doesn't seem to work, and I don't know if I'm missing something or it just won't work. And if so, it would be nice to have a better solution than this:
div.columns[cols="2"] {
column-count: 2
-webkit-column-count: 2 /* Chrome, Opera, Safari */
-moz-column-count: 2 /* Firefox */
}
div.columns[cols="3"] {
column-count: 3
-webkit-column-count: 3 /* Chrome, Opera, Safari */
-moz-column-count: 3 /* Firefox */
}
div.columns[cols="4"] {
column-count: 4
-webkit-column-count: 4 /* Chrome, Opera, Safari */
-moz-column-count: 4 /* Firefox */
}
div.columns[cols="5"] {
column-count: 5
-webkit-column-count: 5 /* Chrome, Opera, Safari */
-moz-column-count: 5 /* Firefox */
}
Thank you ;)
No, you can't do that.
The permitted options per MDN are:
column-count: integer /* an actual number */
column-count: auto;
column-count: inherit;
column-count: initial;
column-count: unset;
You can actually do it just look at the grammar http://www.w3.org/TR/css3-values/#attr-notation although I've not tried it so I have no idea what the browser support is like.
You would need to use the data- prefix on the html attribute eg:
<div class="columns" data-cols="n">content</div>
And make sure you pass the second argument to attr so your css would look like this:
div.columns {
column-count: attr(cols integer)
-webkit-column-count: attr(cols integer)
-moz-column-count: attr(cols integer)
}
I have a paragraph inside the p tag and want to make the top half floating to the right and the bottom half to the left. Is there a property code I can use to do this inside the p tag or do I have to create a new id selector tag to do this?
Use CSS3's Multiple Column Layout
p{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
http://jsfiddle.net/sjmcpherso/0k3nnpas/
to get the bottom column on the left add
p{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
direction:rtl;
text-align:left;
}
Note: CSS3 Columns are IE10+ see https://css-tricks.com/almanac/properties/c/columns/ for more details
I've got a weird issue with CSS columns under IE10.
css:
.columns {
-moz-column-count: 2; /* Firefox */
-webkit-column-count: 2; /* Safari and Chrome */
column-count: 2;
max-width: 450px;
min-width: 400px;
opacity: 0.9;
}
When the number of items is odd everything is fine, but when I've got an even number of items the top one is spit between two columns. Please see image
Please see here plunker http://plnkr.co/edit/8aKV6kHjhAIhRF26ZU0v?p=preview
column-count is working only >=IE10
I want to display my records like Multiocol tag holds. tag may be no longer to use as only netscape supports.
Is there any alternative tag to support same like Operation here is an example
Check this out
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-count
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
You can use css3 to achieve the results like this:
div{
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
Or 2d-transforms like Multi-columns
And here is one with selectable option