6

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.

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.