The site I am creating contains windows that can be dragged around the page (think desktop). When one of those windows contains a SELECT element, it always overlays all of the other elements on the page. This is, of course, a problem with the windowing effect as the select box appears above other windows. This is only a problem in IE. Per my research, the problem is due to SELECT elements being rendered by the OS and not the browser itself and means that we cannot set the z-index of the element. The most promising solution I found online involved using an IFRAME to hide the SELECT element when another window floats over the one containing the SELECT. It seems that this would be a fairly common problem, so I hope that there may be a pre-existing solution to the problem or that the library already contains handling that I have not found. Any thoughts? Has anyone encountered this problem before? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
You need to put an iframe into your windows to cover any underlying select boxes - check this out: http://www.net4visions.com/dev/dialog/dialog.htm -----Original Message----- From: Josh [mailto:joshua.a.kahn-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org] Sent: Tuesday, September 26, 2006 5:42 PM To: Ruby on Rails: Spinoffs Subject: [Rails-spinoffs] Select overlays all DHTML components in IE The site I am creating contains windows that can be dragged around the page (think desktop). When one of those windows contains a SELECT element, it always overlays all of the other elements on the page. This is, of course, a problem with the windowing effect as the select box appears above other windows. This is only a problem in IE. Per my research, the problem is due to SELECT elements being rendered by the OS and not the browser itself and means that we cannot set the z-index of the element. The most promising solution I found online involved using an IFRAME to hide the SELECT element when another window floats over the one containing the SELECT. It seems that this would be a fairly common problem, so I hope that there may be a pre-existing solution to the problem or that the library already contains handling that I have not found. Any thoughts? Has anyone encountered this problem before? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Josh, yes, the window-level select problem is one of the most annoying
IE shortcommings.
I didn''t like the iframe solution for some reason--I can''t
remember why,
maybe it was too slow for some pages. Anyway, I use the following class
to temporarily set "visibility: hidden". It is different from
"display:
none" in that the element takes up the same amount of space, while
"display: none" collapses the elements.
var SelectToggler = Class.create();
SelectToggler.prototype = {
initialize: function(element) {
if( document.all ) {
element = $(element) || document;
this.visible = true;
this.running = false;
this.selectList =
document.getElementsByTagName(''select'') || [];
}
},
show: function(booleanShow) {
if( document.all && this.visible!=booleanShow &&
!this.running) {
this.running = true;
for( var i = 0; i<this.selectList.length; i++ ) {
this.selectList[i].style.visibility = booleanShow ?
''visible'' :
''hidden'';
}
this.visible = booleanShow;
this.running = false;
}
}
};
Josh wrote:> The site I am creating contains windows that can be dragged around the
> page (think desktop). When one of those windows contains a SELECT
> element, it always overlays all of the other elements on the page.
> This is, of course, a problem with the windowing effect as the select
> box appears above other windows. This is only a problem in IE.
>
> Per my research, the problem is due to SELECT elements being rendered
> by the OS and not the browser itself and means that we cannot set the
> z-index of the element. The most promising solution I found online
> involved using an IFRAME to hide the SELECT element when another window
> floats over the one containing the SELECT.
>
> It seems that this would be a fairly common problem, so I hope that
> there may be a pre-existing solution to the problem or that the library
> already contains handling that I have not found.
>
> Any thoughts? Has anyone encountered this problem before?
>
>
> >
>
>
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Ken Snyder wrote:> Josh, yes, the window-level select problem is one of the most annoying > IE shortcommings. > > I didn''t like the iframe solution for some reason--I can''t remember why, > maybe it was too slow for some pages. Anyway, I use the following class > to temporarily set "visibility: hidden". It is different from "display: > none" in that the element takes up the same amount of space, while > "display: none" collapses the elements.But this will only work if your "windows" completely cover the select inputs. If they can sometimes only cover some of the input, then the iframe approach is the only one I know that will work. AFAIK, IE7 should have this fixed, and since it will be a "forced" upgrade when it comes out, it might not be worth worrying about. -- Michael Peters Developer Plus Three, LP --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Unfortunately, I need to be able to support IE6 for the time being, so
it looks like the iframe approach is preferrable.
Per Marco''s post, I have been looking at the code at
http://www.net4visions.com/dev/dialog/_dialog.js. Specifically, the
_createHTML function in the Dialog class:
<code>
obj = document.createElement(''IFRAME'');
obj.frameborder = 0;
Element.setStyle(obj, {border: 0 + ''px'', position:
''absolute'',
backgroundColor: ''#ffffff'', top: 0 + ''px'',
left: 0 + ''px'', zIndex:
-1});
this.dContainer.insertBefore(obj, this.dTitle);
</code>
When I tried to do something similar, I ended up with the white iframe
overlaying my window background (an image set by CSS background
property). Other articles recommend setting ''display: none''
for the
iframe and not setting a background color, but this caused the iframe
to no longer be effective in covering the select elements.
It seems my problem is related to using the background property to
create my window border, even with the window''s div wrapper''s
z-index
set to 1000. Thoughts?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Hi, I helped Marco with his dialogs. I think you''re missing piece is a transparency filter in the style of the iFrame... filter: ''progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'' On 9/26/06, Josh <joshua.a.kahn-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > Unfortunately, I need to be able to support IE6 for the time being, so > it looks like the iframe approach is preferrable. > > Per Marco''s post, I have been looking at the code at > http://www.net4visions.com/dev/dialog/_dialog.js. Specifically, the > _createHTML function in the Dialog class: > > <code> > obj = document.createElement(''IFRAME''); > obj.frameborder = 0; > Element.setStyle(obj, {border: 0 + ''px'', position: ''absolute'', > backgroundColor: ''#ffffff'', top: 0 + ''px'', left: 0 + ''px'', zIndex: > -1}); > this.dContainer.insertBefore(obj, this.dTitle); > </code> > > When I tried to do something similar, I ended up with the white iframe > overlaying my window background (an image set by CSS background > property). Other articles recommend setting ''display: none'' for the > iframe and not setting a background color, but this caused the iframe > to no longer be effective in covering the select elements. > > It seems my problem is related to using the background property to > create my window border, even with the window''s div wrapper''s z-index > set to 1000. Thoughts? > > > > >-- Ryan Gahl Application Development Consultant Athena Group, Inc. Inquire: 1-920-954-9798 x2903 Blog: http://www.someElement.com --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Note that the autocompleter (in controls.js) does just that-- maybe the code for this can be extracted and made in a small helper thingy. -Thomas Am 26.09.2006 um 17:41 schrieb Josh:> > The site I am creating contains windows that can be dragged around the > page (think desktop). When one of those windows contains a SELECT > element, it always overlays all of the other elements on the page. > This is, of course, a problem with the windowing effect as the select > box appears above other windows. This is only a problem in IE. > > Per my research, the problem is due to SELECT elements being rendered > by the OS and not the browser itself and means that we cannot set the > z-index of the element. The most promising solution I found online > involved using an IFRAME to hide the SELECT element when another > window > floats over the one containing the SELECT. > > It seems that this would be a fairly common problem, so I hope that > there may be a pre-existing solution to the problem or that the > library > already contains handling that I have not found. > > Any thoughts? Has anyone encountered this problem before? > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Thanks Ryan and Thomas, that did it. That is a very annoying IE quirk. It seems to me that the draggable elements with select elements embedded in them do not move as smoothly as other draggables. Is there a workaround for this as well? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---