thr3ads.net - Rails spinoffs - IE Sortable Style Problem [Apr 2006]

If this information is useful, please help other people find it:
Share via:

Lonnie Kyser

2006-Apr-11 05:42 UTC

IE Sortable Style Problem

Hi Guys,
 
I am having a problem in IE (tested versions 6 and 7 beta) with sortable divs in
a container div with overflow set to scroll.  It looks like all of the divs have
their position set to relative after the sortable initializes, and also after
being dragged.  When a div (any element?) has a relative position in a
containing div with overflow set to scroll, all of the divs with relative
positioning in the container behave as if the have position fixed, and they will
not scroll.  The scroll bar will appear on the containing div, and you can move
it up and down, but the divs do not scroll.  Also, dragging behaves quite
strange if you remove the relative positioning after drag.
 
As a test I added a button that will loop through all of the sortable divs and
remove their positioning, and the div then scrolls as needed.
 
I have to have the ability to keep the sortable divs in a container other than
the window, as it is acting as a popup div, but other approaches to achieve the
desired effect are welcome as well.
 
This is NOT a problem in firefox, but we have to support IE 6 and 7 as well as
firefox.
 
I am using latest versions of both prototype and scriptaculous.
 
I have setup a test page where you can see the problem in action.  You can see
it here: http://thekysers.com/ie_bug/test.htm
 
To test, load up the page in IE 6 or 7 beta and try and use the div scroll bar. 
If you press the ''Remove scrollable div positioning'' button,
you will see that the divs scroll correctly but the dragging does not work well.
 
Thanks in advance for any help.  This is a great community.
 
LJ Kyser
 
Below is the code for any who do not wish to visit the site.
 
----------------
<html><head><title>IE Div Bug</title><script
type="text/javascript" language="javascript"
src="js/prototype.js"></script><script
type="text/javascript" language="javascript"
src="js/scriptaculous.js"></script><style
type="text/css">div#divContainer { border: 1px solid #000000;
width: 400px; height:300px; overflow: scroll;}
div#divContainer div { border: 1px solid #000000; margin: 5px; padding: 2px;
cursor: move;}</style><script type="text/javascript"
language="javascript">function unPos() { for (var i = 1; i
<=6;i++) {  $(''div_''+i).style.position =
''''; }}</script></head><body><input
type="button" value="Remove scrollable div positioning"
onClick="unPos();" /><h2>Example: Sorting
divs</h2><p>Sorting isn''t just for lists.  Here
we''re sorting divs - some of them even have some complex markup inside
them including styling,links, tables, and form elements.  In order to style
elements other than lists, we need to pass a third argument to the addList
functionthat tells scriptaculous which elements should be
draggable.</p><div id="divContainer"> <div
id="div_1">This is the first div</div>
 <div id="div_2">This is the second div</div> <div
id="div_3">This is the third div</div> <div
id="div_4">  This is the fourth div, it also has a lot of text and
will cover more than one line.  It''s bigger than the other divs here,
but that should   really be no problem.  Oh yeah, it also has
<b>formatting</b>, and <a href="#">links</a>
</div> <div id="div_5">This is the sixth div</div>
 <div id="div_6">  This is the seventh div.  It also has a table
below with some form inputs  <table>   <tr><td>First
Name:</td><td><input
type="text"></td></tr>   <tr><td>Nice
Demo?</td><td><input type="radio">
Yes<br><input type="radio"> No</td></tr> 
</table>
 </div> <br style="clear: both;"></div><script
type="text/javascript">// <![CDATA[
Sortable.create(''divContainer'',{tag:''div''});//
]]></script></body></html>
----------------
 
 
_________________________________________________________________
Search on the go: Try Windows Live(tm) Search for Mobile beta
http://www1.imagine-msn.com/minisites/mobile/Default.aspx?locale=en-us

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

tsukue-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2006-Apr-11 14:40 UTC

head link

Re: IE Sortable Style Problem

Hi,
I think what you need is a "position:relative;" in
"div#divContainer
{..." section.
At least that worked for me. (IE6, win2k)

> I am having a problem in IE (tested versions 6 and 7 beta) with sortable
> divs in a container div with overflow set to scroll.  It looks like all of
> the divs have their position set to relative after the sortable
initializes,
> and also after being dragged.

Seemingly Similar Threads

Search for more reasonably related threads

Rails spinoffs - Apr 2006 - IE Sortable Style Problem

IE Sortable Style Problem

Re: IE Sortable Style Problem

Seemingly Similar Threads