Loading ...
Sorry, an error occurred while loading the content.

Bug with modal Panel

Expand Messages
  • korean.sensation
    Hi, I ve recently discovered that when I set the position of an element to relative, the modal backdrop does not cover that element. Here s what I mean:
    Message 1 of 10 , Jun 1, 2007
    • 0 Attachment
      Hi, I've recently discovered that when I set the position of an element to relative, the modal backdrop does not cover that element.

      Here's what I mean:
      http://www.firmwater.com/experiments/yui/test.html

      The second div tag has a style "position: relative". When a modal dialog is displayed, the mask backdrop isn't masking out the second div tag. Is there something that I'm forgetting or is this a bug in the YUI?

    • Mike Lee
      Hi korean.sensation, This looks like a bug in YUI. You can file a bug at SourceForge: http://sourceforge.net/projects/yui And that way, as the bug reporter,
      Message 2 of 10 , Jun 4, 2007
      • 0 Attachment
        Hi korean.sensation,

        This looks like a bug in YUI. You can file a bug at SourceForge:
        http://sourceforge.net/projects/yui

        And that way, as the bug reporter, you can follow our progress as we
        work on it as well. Please include your example as well, since that
        will help us track down and resolve this issue.

        Thanks!



        --- In ydn-javascript@yahoogroups.com, "korean.sensation"
        <korean.sensation@...> wrote:
        >
        > Hi, I've recently discovered that when I set the position of an element
        > to relative, the modal backdrop does not cover that element.
        >
        > Here's what I mean:
        > http://www.firmwater.com/experiments/yui/test.html
        >
        > The second div tag has a style "position: relative". When a modal dialog
        > is displayed, the mask backdrop isn't masking out the second div tag. Is
        > there something that I'm forgetting or is this a bug in the YUI?
        >
      • korean.sensation
        Hi Mike, I filed the bug on SourceForge. Also, it seems that a quick and dirty fix is to manually set the z-index of the backdrop to 1. ... element ... dialog
        Message 3 of 10 , Jun 4, 2007
        • 0 Attachment
          Hi Mike,

          I filed the bug on SourceForge. Also, it seems that a quick and dirty
          fix is to manually set the z-index of the backdrop to 1.

          --- In ydn-javascript@yahoogroups.com, "Mike Lee" <mikelee@...> wrote:
          >
          > Hi korean.sensation,
          >
          > This looks like a bug in YUI. You can file a bug at SourceForge:
          > http://sourceforge.net/projects/yui
          >
          > And that way, as the bug reporter, you can follow our progress as we
          > work on it as well. Please include your example as well, since that
          > will help us track down and resolve this issue.
          >
          > Thanks!
          >
          >
          >
          > --- In ydn-javascript@yahoogroups.com, "korean.sensation"
          > <korean.sensation@> wrote:
          > >
          > > Hi, I've recently discovered that when I set the position of an
          element
          > > to relative, the modal backdrop does not cover that element.
          > >
          > > Here's what I mean:
          > > http://www.firmwater.com/experiments/yui/test.html
          > >
          > > The second div tag has a style "position: relative". When a modal
          dialog
          > > is displayed, the mask backdrop isn't masking out the second div
          tag. Is
          > > there something that I'm forgetting or is this a bug in the YUI?
          > >
          >
        • Todd Kloots
          korean.sensation - This is due to a known bug in IE surround z-index and use of relative positioning. The README file for Container
          Message 4 of 10 , Aug 2, 2007
          • 0 Attachment
            "korean.sensation" -

            This is due to a known bug in IE surround z-index and use of relative
            positioning. The README file for Container
            (http://developer.yahoo.com/yui/build/container/README) documents this
            as a known issue and has a suggested fix.

            - Todd

            korean.sensation wrote:
            >
            > Hi, I've recently discovered that when I set the position of an
            > element to relative, the modal backdrop does not cover that element.
            >
            > Here's what I mean:
            > http://www.firmwater.com/experiments/yui/test.html
            >
            > The second div tag has a style "position: relative". When a modal
            > dialog is displayed, the mask backdrop isn't masking out the second
            > div tag. Is there something that I'm forgetting or is this a bug in
            > the YUI?
            >
            >
          • Frank Apap
            Are there any other known workarounds? In my code it would be very difficult to add the container s div directly to the body element. ... relative ... this ...
            Message 5 of 10 , Aug 2, 2007
            • 0 Attachment
              Are there any other known workarounds? In my code it would be very
              difficult to add the container's div directly to the body element.



              --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...>
              wrote:
              >
              > "korean.sensation" -
              >
              > This is due to a known bug in IE surround z-index and use of
              relative
              > positioning. The README file for Container
              > (http://developer.yahoo.com/yui/build/container/README) documents
              this
              > as a known issue and has a suggested fix.
              >
              > - Todd
              >
              > korean.sensation wrote:
              > >
              > > Hi, I've recently discovered that when I set the position of an
              > > element to relative, the modal backdrop does not cover that
              element.
              > >
              > > Here's what I mean:
              > > http://www.firmwater.com/experiments/yui/test.html
              > >
              > > The second div tag has a style "position: relative". When a
              modal
              > > dialog is displayed, the mask backdrop isn't masking out the
              second
              > > div tag. Is there something that I'm forgetting or is this a bug
              in
              > > the YUI?
              > >
              > >
              >
            • php08691
              I m glad I m not the only one that noticed this. I m seeing this too but only in Firefox (unfortunately). I m also seeing that when the modal is created (again
              Message 6 of 10 , Aug 3, 2007
              • 0 Attachment
                I'm glad I'm not the only one that noticed this. I'm seeing this too
                but only in Firefox (unfortunately). I'm also seeing that when the
                modal is created (again only in Firefox) the page height increases.
                Once the modal is closed, the page shrinks back to the original
                height. Looks like I'm sticking with 2.2.2 for now :(

                Here's an example of two divs, one absolute and one relative poking
                through the modal in Firefox: http://www.notonebit.com/temp/modal230.htm

                If you switch the js and css files back to version 2.2.2 they work fine


                --- In ydn-javascript@yahoogroups.com, "Frank Apap" <fsa3@...> wrote:
                >
                > Are there any other known workarounds? In my code it would be very
                > difficult to add the container's div directly to the body element.
                >
                >
                >
                > --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@>
                > wrote:
                > >
                > > "korean.sensation" -
                > >
                > > This is due to a known bug in IE surround z-index and use of
                > relative
                > > positioning. The README file for Container
                > > (http://developer.yahoo.com/yui/build/container/README) documents
                > this
                > > as a known issue and has a suggested fix.
                > >
                > > - Todd
                > >
                > > korean.sensation wrote:
                > > >
                > > > Hi, I've recently discovered that when I set the position of an
                > > > element to relative, the modal backdrop does not cover that
                > element.
                > > >
                > > > Here's what I mean:
                > > > http://www.firmwater.com/experiments/yui/test.html
                > > >
                > > > The second div tag has a style "position: relative". When a
                > modal
                > > > dialog is displayed, the mask backdrop isn't masking out the
                > second
                > > > div tag. Is there something that I'm forgetting or is this a bug
                > in
                > > > the YUI?
                > > >
                > > >
                > >
                >
              • Satyen Desai
                Hi Frank, The root issue just relates to z-index management of the positioned elements on your page. The suggestion that the Panel be added (appended) to
                Message 7 of 10 , Aug 3, 2007
                • 0 Attachment
                  Hi Frank,

                  The root issue just relates to z-index management of the "positioned"
                  elements on your page.

                  The suggestion that the Panel be added (appended) to document.body is
                  just one way of resolving z-index complexity, by ensuring that the
                  Panel's "actual" position in the stacking order is not influenced by
                  the z-indices of any parent elements which maybe positioned.

                  If you don't want to append your Panel to document.body you can
                  manually set the z-index of the container in which you place the
                  Panel, to make sure it is on top of everything else on the page.

                  If you post your markup structure, we can identify what needs to be
                  changed.

                  Hope that helps,
                  Satyen
                • php08691
                  Hi Satyen, So you re saying that a z-index set on the modal object like this: mySimpleDialog = new YAHOO.widget.SimpleDialog( dlg , { width: 20em , height:
                  Message 8 of 10 , Aug 3, 2007
                  • 0 Attachment
                    Hi Satyen,

                    So you're saying that a z-index set on the modal object like this:

                    mySimpleDialog = new YAHOO.widget.SimpleDialog("dlg", {
                    width: "20em",
                    height: "30em",
                    zIndex: 6, ...

                    would fix it?


                    --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdezzi@...> wrote:
                    >
                    > Hi Frank,
                    >
                    > The root issue just relates to z-index management of the "positioned"
                    > elements on your page.
                    >
                    > The suggestion that the Panel be added (appended) to document.body is
                    > just one way of resolving z-index complexity, by ensuring that the
                    > Panel's "actual" position in the stacking order is not influenced by
                    > the z-indices of any parent elements which maybe positioned.
                    >
                    > If you don't want to append your Panel to document.body you can
                    > manually set the z-index of the container in which you place the
                    > Panel, to make sure it is on top of everything else on the page.
                    >
                    > If you post your markup structure, we can identify what needs to be
                    > changed.
                    >
                    > Hope that helps,
                    > Satyen
                    >
                  • Satyen Desai
                    Hey php08691, For your example (http://www.notonebit.com/temp/modal230.htm), yes it should. Actually for the above URL, just setting it zindex:2 would fix it [
                    Message 9 of 10 , Aug 3, 2007
                    • 0 Attachment
                      Hey php08691,

                      For your example (http://www.notonebit.com/temp/modal230.htm), yes
                      it should. Actually for the above URL, just setting it zindex:2
                      would fix it [ which would give the SimpleDialog a z-index of 2, the
                      mask a z-index of 1, which would put the mask above the
                      absolutely/relatively positioned divs you have on the page ]

                      Hope that helps,
                      Satyen


                      --- In ydn-javascript@yahoogroups.com, "php08691" <jalvich@...>
                      wrote:
                      >
                      > Hi Satyen,
                      >
                      > So you're saying that a z-index set on the modal object like this:
                      >
                      > mySimpleDialog = new YAHOO.widget.SimpleDialog("dlg", {
                      > width: "20em",
                      > height: "30em",
                      > zIndex: 6, ...
                      >
                      > would fix it?
                      >
                      >
                      > --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdezzi@>
                      wrote:
                      > >
                      > > Hi Frank,
                      > >
                      > > The root issue just relates to z-index management of
                      the "positioned"
                      > > elements on your page.
                      > >
                      > > The suggestion that the Panel be added (appended) to
                      document.body is
                      > > just one way of resolving z-index complexity, by ensuring that
                      the
                      > > Panel's "actual" position in the stacking order is not
                      influenced by
                      > > the z-indices of any parent elements which maybe positioned.
                      > >
                      > > If you don't want to append your Panel to document.body you can
                      > > manually set the z-index of the container in which you place the
                      > > Panel, to make sure it is on top of everything else on the page.
                      > >
                      > > If you post your markup structure, we can identify what needs to
                      be
                      > > changed.
                      > >
                      > > Hope that helps,
                      > > Satyen
                      > >
                      >
                    • php08691
                      Indeed it did, thanks for the tip
                      Message 10 of 10 , Aug 3, 2007
                      • 0 Attachment
                        Indeed it did, thanks for the tip <smacks forehead>

                        --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdezzi@...> wrote:
                        >
                        > Hey php08691,
                        >
                        > For your example (http://www.notonebit.com/temp/modal230.htm), yes
                        > it should. Actually for the above URL, just setting it zindex:2
                        > would fix it [ which would give the SimpleDialog a z-index of 2, the
                        > mask a z-index of 1, which would put the mask above the
                        > absolutely/relatively positioned divs you have on the page ]
                        >
                        > Hope that helps,
                        > Satyen
                        >
                        >
                        > --- In ydn-javascript@yahoogroups.com, "php08691" <jalvich@>
                        > wrote:
                        > >
                        > > Hi Satyen,
                        > >
                        > > So you're saying that a z-index set on the modal object like this:
                        > >
                        > > mySimpleDialog = new YAHOO.widget.SimpleDialog("dlg", {
                        > > width: "20em",
                        > > height: "30em",
                        > > zIndex: 6, ...
                        > >
                        > > would fix it?
                        > >
                        > >
                        > > --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdezzi@>
                        > wrote:
                        > > >
                        > > > Hi Frank,
                        > > >
                        > > > The root issue just relates to z-index management of
                        > the "positioned"
                        > > > elements on your page.
                        > > >
                        > > > The suggestion that the Panel be added (appended) to
                        > document.body is
                        > > > just one way of resolving z-index complexity, by ensuring that
                        > the
                        > > > Panel's "actual" position in the stacking order is not
                        > influenced by
                        > > > the z-indices of any parent elements which maybe positioned.
                        > > >
                        > > > If you don't want to append your Panel to document.body you can
                        > > > manually set the z-index of the container in which you place the
                        > > > Panel, to make sure it is on top of everything else on the page.
                        > > >
                        > > > If you post your markup structure, we can identify what needs to
                        > be
                        > > > changed.
                        > > >
                        > > > Hope that helps,
                        > > > Satyen
                        > > >
                        > >
                        >
                      Your message has been successfully submitted and would be delivered to recipients shortly.