You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by "Kolesnikov, Alexander GNI" <Al...@CIGNA.com> on 2007/11/23 13:02:28 UTC

RE: [T4] Problems with Dialog component

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:jkuhnert@gmail.com] 
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 <ma...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>


-- 
Jesse Kuhnert
Tapestry/Dojo team member/developer

Open source based consulting work centered around
dojo/tapestry/tacos/hivemind. http://blog.opencomponentry.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org



------------------------------------------------------------------------------
CONFIDENTIALITY NOTICE: If you have received this email in error, please immediately notify the sender by e-mail at the address shown.  This email transmission may contain confidential information.  This information is intended only for the use of the individual(s) or entity to whom it is intended even if addressed incorrectly.  Please delete it from your files if you are not the intended recipient.  Thank you for your compliance.  Copyright 2007 CIGNA
==============================================================================


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: [T4] Problems with Dialog component

Posted by Ulrich Stärk <ul...@spielviel.de>.
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:jkuhnert@gmail.com] 
> 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 <ma...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>>
> 
> 


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org