Question

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 ;)

Answer 1

Way what I found: remove all childs from overall DIV, and then append all except BR’s:

function removeBr(){
    var ahah=document.getElementById("ahah");
    var childs=[],child;
    while(child=ahah.firstChild) {
        if(!child.tagName||child.tagName.toLowerCase()!=='br')
            childs.push(child);
        ahah.removeChild(child);
    }
    for(var i=0;i<childs.length;i++)
        ahah.appendChild(childs[i]);
}

http://jsfiddle.net/4yj7U/4/

Other variant:

function removeBr(){
    var node=$("#ahah")[0];
    node.style.display='inline';
    $("#ahah").children("br").remove(); 
    setTimeout(function(){node.style.display='';},0);
}