I have an HTML ul
that I generate dynamically using JavaScript. After I generate it, I set the style on said ul
using JQuery's $('#id').css('property',value)
method. This is what the code in question looks like:
$('#actionSpace #datasetContent')
.css('-moz-column-count',this.content.length)
.css('-webkit-column-count',this.content.length)
.css('column-count',this.content.length)
.css('width',this.content.length*150 + 'px');
Essentially, I set 3 different column-count
properties - once for regular css, once for css in the -moz domain, and once for css in the -webkit domain, and then I also set the width
property.
This code works just fine in Firefox - the css for the ul
element with an id of datasetContent
updates just fine.
However, when I run this in webkit (either Safari or Chrome), this stops working. What's bizarre is that the width
property (the very last thing I set in that long line of css above) sets properly, but none of the other properties get set. If I change them manually within Chrome's inspector, the site updates just fine. However, of course, I cannot reasonably expect users of my site to manually tinker around with CSS on my page to make it look good :)
Does anybody have any idea what might be causing this problem?
UPDATE I've tried switching the ul
to a div
, and that didn't make a difference at all. The issue is specifically just JQuery CSS & the column-count properties. Perhaps this is something to bring up directly to the folks over at JQuery? I will wait and see if there are any responses here, and if not, I will find the appropriate channel there.
Have you considered applying your CSS using a single .css({ // array })
rather than chaining .css(property, value)
? As you've written it above, it would make sense that your styles would work in Firefox because -moz-column-count
was correctly applied, but I'm not sure the two consecutive uses of .css() can be chained like that. This doesn't throw an error in Chrome Dev Tools?
I would think
$('#actionSpace #datasetContent').css({
'-moz-column-count': this.content.length,
'-webkit-column-count': this.content.length,
'column-count': this.content.length,
'width': this.content.length * 150 + 'px'
});
might work better.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With