I had a similar problem with the FloatingPane Dojo widget disappearing
behing certain elements. In my case this was because Internet Explorer
interpreted the z-index CSS attribute (which forces the FloatingPane to
be rendered on top of every other element) different than Firefox.
While Firefox interprets the z-index attribute globally, meaning that it
will render an element with a high z-index value on top of all elements,
even those in different contexts (CSS 2), Internet Explorer interprets
this only for the current context, meaning that an element with a high
z-index value might disappear behind elements that are defined outside
this context (CSS 2.1).
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>z-index</title>
</head><body>
<div style="position:absolute; top:100px; left:100px; border:1px solid
#888; background:#f88; width: 208px; height: 181px;">
<b>A</b>
</div>
<div style="position:absolute; top:130px; left:130px; border:1px solid
#888; background:#88f; width: 208px; height: 181px;">
<b>B</b>
</div>
<div style="position:absolute; top:160px; left:160px; border:1px solid
#888; background:#eee; width: 208px; height: 181px;">
<b>C</b>
<div style="position:absolute; top:60px; left:-60px; z-index:10;
border:1px solid #888; background:#8ff; width: 208px; height: 181px;">
<b>D:10</b>
</div>
</div>
<div style="position:absolute; top:190px; left:190px; border:1px solid
#888; background:#8f8; width: 208px; height: 181px;">
<b>E</b>
</div>
</body></html>
Have a look at the "D" box. In Firefox it is rendered on top of the "E"
box which is defined later on in the document. But in Internet Explorer
it is rendered BEHIND the "E" box, although it has a z-index of 10.
Something similar might be happening whith the Dialog widget.
Cheers,
Uli
Kolesnikov, Alexander GNI schrieb:
It looks like I am having a similar problem to described here. I used a
dojo Dialog and it worked and looked fine until I decided to make it
visible using the updateComponents property of a button. Now it appears
at the very bottom of the page and *behind* the gray background so that
I can't do anything with it. Did anybody else have this problem?
Thanks,
Alexander
-----Original Message-----
From: Jesse Kuhnert [mailto:[EMAIL PROTECTED]
Sent: 14 August 2007 02:30
To: Tapestry users
Subject: Re: [T4] Problems with Dialog component
You should try 4.1.3-snapshot to be sure - but sometimes the problem is
just conflicting css rules on your page.
Try segregating the dialog in to a minimal page with little to no css
rules and work your way out from there. (if 4.1.3 doesn't solve it)
On 7/26/07, Martino Piccinato <[EMAIL PROTECTED]> wrote:
Hi everybody,
I'm experiencing lots of problems with Dialog component with Tapestry
4.1.2, don't know if other or getting the same problems, I'm just
following the Dialog tutorial on online documentation.
First problem is that I get an exception if not setting the optional
"hidden" parameter with an ognl binding as in tutorial
hidden="ognl:hiddenDialog" otherwise I'd get a
ReadOnlyBindingException.
But this is not the biggest problem just by following the tutorial I
can set the parameter with an ognl binding and go ahead, what seems
not to be working at all is the hid()/show() mechanism, meaning that
when I click on the link to show the dialog the dialog appears bottom
left and BEHIND the "grey" layer used to disable the rest of the
screen
I don't have any form whatsoever in my page or in dojo dialog, I
investigated a bit with firebug and this is what appear BEFORE
clicking on "showDialog" link:
<a id="DirectLink" onclick="return
tapestry.linkOnClick(this.href,'DirectLink', false)"
href="/kironweb/StartPage,$DirectLink.sdirect?updateParts=dialogCompon
ent">Toggle
dialog</a>
<script type="text/javascript">
<!--
dojo.addOnLoad(function(e) {
tapestry.widget.synchronizeWidgetState("dialogComponent", "Dialog",
{"bgColor":"black","bgOpacity":0.4000000059604645}, false);
dojo.widget.byId("dialogComponent").hide();});
// -->
</script>
<div id="dialogComponent" class="dojoDialog" dojoattachpoint="wrapper"
style="overflow: visible; position: absolute; z-index: 999; display:
none;"> <span tabindex="0" dojoonblur="clearTrap"
dojoonfocus="trapTabs" dojoattachpoint="tabStartOuter"/>
<span tabindex="0" dojoonblur="clearTrap" dojoonfocus="trapTabs"
dojoattachpoint="tabStart"/>
<div style="position: relative; z-index: 2;"
dojoattachpoint="containerNode"> DIALOG CONTENT</div>
<span tabindex="0" dojoonblur="clearTrap" dojoonfocus="trapTabs"
dojoattachpoint="tabEnd"/>
<span tabindex="0" dojoonblur="clearTrap" dojoonfocus="trapTabs"
dojoattachpoint="tabEndOuter"/>
</div>
<div class="dialogUnderlay" style="position: absolute; top: 0px; left:
0px; z-index: 998; display: none; background-color: rgb(0, 0, 0);
height: 1px; width: 1px;"/>
This is what is in the DOM Tree AFTER pressing the show dialog button:
<div id="dialogComponent" class="dojoDialog" dojoattachpoint="wrapper"
style="visibility: visible; left: 0px; top: 337.5px;"> DIALOG
CONTENT</div> <div class="dialogUnderlay" style="position: absolute;
top: 190px;
left: 0px; z-index: 998; display: block; background-color: rgb(0, 0,
0); height: 318px; width: 1264px; opacity: 0.4;"/>
So, I can se the dialog content but not positioned and "under" the
"dialogUnderlay" div and the application is just blocked obviously.
It's a very basic example on a very basic page, just following the
tutorial. My cache is disabled. Any suggestion? Does anybody had the
same problem?
Tnx
Martino
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
