Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery CSS setter not working in webkit when setting column-count property

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.

like image 401
thisissami Avatar asked Jun 27 '13 00:06

thisissami


1 Answers

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.

like image 76
mschofield Avatar answered Sep 29 '22 22:09

mschofield