-1

I have two div elements where one wraps around the other. Then I use JavaScript to add border to the outer div in runtime. Somehow webkit based browser doesn't do a reflow when the outer border is changed. The end result looks ugly - the inner div overflows the outer. Here is the HTML code: [div id="outer][div id="inner" style="border: solid blue; height: 50px;"][/div][/div]

Event handler is simple as well: document.getElementById("outer").setAttribute("style", "border: solid green")

I couldn't believe it when I found this out since it's such a trivial reflow task. Or did I missing anything? Does anyone encounter similar problem, what's the workaround? Thanks.

Feng Chen
  • 29
  • 4
  • Sorry the HTML didn't show: [div id="outer"][div id="inner" style="border: solid blue; height: 50px"][/div][/div] – Feng Chen Aug 06 '10 at 16:28

2 Answers2

0

border: solid green Doesn't state any size, eg: "border:1px solid green"

I don't think it's safe to reset the entire style attribute because you might mess up some other things. Try adding a class to className, which is a bit cleaner.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
0

If you set the outer and inner to float:left it will work as planned. However, you will either need to give it a fixed width or have content inside the div (inner).

#outer { float: left;}
#inner { float: left;}

[div id="outer"][div id="inner"]Text[/div][/div]

Mark
  • 5,680
  • 2
  • 25
  • 26
  • Floating the div does seem to trigger the reflow. I was doing "display: inline-block;" and it had similar effect. Additional markup is needed (clear the float or add line break etc.) to support these workarounds, which is ugly. I am just wondering why Webkit can't even handle such simple thing. – Feng Chen Aug 11 '10 at 16:45