1

I'm using jQuery to allow the user the dynamically change the padding of a DIV containing text.

I'm using a range slider that fires off the following to updated the container DIV's padding on change:

$('#preview > div').css('padding', ui.value + '%' );

In Firefox this works fine, but in Chrome not all of the elements are being updated to reflect the new padding. The easiest way to explain is with pictures:

Image 1 - Before DIV padding is increased. 1. In image 1, the padding is at 5% and both the headline and the paragraph text is centered in the DIV as it should be.

Image 2 - After padding changed, only the first paragraph has recalculated its column width. Heading is off-center, and most paragraphs have retained their previous width, so overflowing. 2. In image 2, I have increased the padding equally around the text, which should cause the heading and paragraphs to compress into narrower a column, but still centered on the page. As you can see, only the first paragraph is being properly updated as I change the padding.

Once this is done, and with the text incorrectly positioned, if I change another style property (such as changing the heading font), it immediately causes all elements in the page to be refreshed, and positioned correctly.

Is there a command I can use to force jQuery to recalculate the positioning of every element inside the DIV?

Thanks!

Mateo
  • 1,271
  • 2
  • 12
  • 19
  • 1
    It would be helpful if you could post the html, as it might just be the selector. – tw16 Jan 19 '12 at 01:21
  • I can recreate the issue in jsfiddle. Run the code in Firefox, and changing the container DIV's padding using the slider causes the paragraphs inside to adjust accordingly. Do the same in Chrome, and the paragraphs stay at their original width, and push off to the right. http://jsfiddle.net/ms3Jd/ – Mateo Jan 19 '12 at 01:49
  • If you use px instead of %, does it work for all divs or just the first one? Trying to figure out if the '%' is the problem or something else. – Yoni Baciu Jan 19 '12 at 19:23
  • I rephrased the question more concisely, and found the answer here: http://stackoverflow.com/questions/8927478/jquery-css-rendering-works-in-firefox-not-in-chrome – Mateo Jan 21 '12 at 02:34

2 Answers2

0

Try changing your selector to 

$('#preview div')
Andrew Cooper
  • 32,176
  • 5
  • 81
  • 116
0

Using percents for padding can be tricky. Try giving #preview a hardcoded width (e.g. 800px) and see what happens. 'padding' is relative to the 'width' of the applied element's parent node.

When the padding of the first DIV is increased it might increase the width of the containing element and the next DIV will have a different padding calculation. It might be browser dependant.

I suggest to work without percentages in this case.

Yoni Baciu
  • 2,667
  • 1
  • 22
  • 28
  • Thanks, but for various reasons I prefer to use % for this one. But I did try your advice. Unfortunately it made no difference. – Mateo Jan 19 '12 at 01:23