Actually I found a workaround for this.
I now inject a dummy <div> after the remove operation - and that refreshes the
display. Not nice, but it works.
Code now looks like this:
$('#messagecontainer'+messageid).remove();
$('.boxed').append(document.createElement('div'));
where #messagecontainer is the individual result div as stated in my original
post and .boxed is the container which holds all the result divs.
Maybe this is a workaround for someone else, so I wanted to put it on the
list.
Uwe
On Wednesday 02 January 2008, Uwe C. Schroeder wrote:
> Hi Everyone,
>
> I've run into a little problem which leaves me stunned.
> I'm having a page with a list of div's (a search result). It looks like
> this:
>
> <container div>
> <div id="result1"/>
> <div id="result2"/>
> <div id="result3"/>
> <div id="result4"/>
> </container div>
>
> the result divs certainly contain something. Now I have a button in each of
> the result divs that allows the result do be removed. When the button is
> clicked (below for result2) this snipped of code is executed:
>
> $('#result2').remove()
>
> On FF2 this works nicely. Not so on IE7 (or 6 for that matter). What
> happens is that the element is removed, however the elements below are not
> moved up properly. It now looks like this:
>
> result 1
> space the height of former result 2
> result3 and result4 overlapping
>
> The moment some other javascript that draws on the page is executed
> everyting falls in place correctly. In my case it's a modal "yes no" dialog
> (jqmodal), but I assume it doesn't really matter. Anything that "draws" on
> the page will make it look correct.
>
> Any ideas?
> Thanks
>
> Uwe
