Alex Rivera | Logout

Chrome/Webkit inline-block refresh problem

Asked 2011-09-02T09:56:38.140
10

The problem I found is the following:

Situation: I have overall div that has a inline-block display. Inside it are two element that have an inline-block display as well.

Then I add (thanks to JavaScript) a <br/> between the two elements. The second goes to the next line, which is the normal behavior.

Buggy part: The <br/> is then removed (JavaScript again) and... the display doesn't change. It appears that the box of the overall div is not recalculated. In the end I have two similar markup that doesn't appear the same way (which is a bit problematic, isn't it).

It works fine on Firefox (it appears to be webkit based as the Android browser behave the same way). So my question is, is there a workaround that doesn't use methods that will alter the DOM? The library used is jQuery.

A test case here.

EDIT: As suggested by duri, I filled a bug report in webkit bugzilla, it's here. But I'm still looking for a workaround ;)

javascript google-chrome webkit css
Edit
Report

1 Answer

0

As a work around, you could set the style to display: block when you want them on individual lines and revert to inline-block when you want them to be friends.

I have created a JS Fiddle example

Which demonstrates this fix:

function addBr(){
    $('span').css({ display: 'block'});
}
function removeBr(){
    $('span').css({ display: 'inline-block'});
}

$("#add").click(addBr);
$("#remove").click(removeBr);
answered 2011-11-29T15:12:49.830

Your Answer