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

Dialog size restricted by some other element?

Expand Messages
  • kiwinuovo
    I am using YUI Grid, YUI Menu, YUI TabView and YUI Dialog all on the same page. My page has basically a header, a narrow, vertical navigation pane on the left
    Message 1 of 3 , Jun 4, 2008
      I am using YUI Grid, YUI Menu, YUI TabView and YUI Dialog all on the same page. My page has basically a header, a narrow, vertical navigation pane on the left and a main panel occupying the rest of the screen.

      In my navigation pane, I also display a table that contains some gadgets which are used to show and hide a YUI Dialog. The HTML code below reflects the rendered version of the original HTML after the YUI library and custom JS code did their bits. The div with id "qad_shp_c" is the YUI
      dialog.

      What puzzles me now is that the dialog is restricted somehow in its width. If I move the dialog to the right, it starts to shrink such that the right hand side basically stays put until the dialog is only a gray strip. I can freely move the dialog left such that it even moves off the screen. This is exactly what I would like to happen if I move the dialog right.

      Does anybody know what restricts the size or placement of the dialog?

      Here is my HTML:

      <body>
        <div id="doc3">
          <div id="hd">...</div>

          <div id="bd">
            <div class="yui-b" id="yui-main">...<div>
            <div class="yui-b">
              <div id="APALUIMenu" class="yuimenu yui-module yui-overlay visible bd c11">...</div>
              <div id="quickaccess">
                <table border="0" cellpadding="2" cellspacing="5" width="100%">
                  <tbody>
                    <tr>
                      <td>
                        <img id="qas_shp" src="/images/icons/actions/view_detailed.png" class="c4" title="lookup Shipments " alt="image" name="qas_shp" />
                        <div id="qad_shp_c" class="yui-panel-container yui-dialog shadow c14">
                          <div id="qad_shp" class="hiddendiv yui-module yui-overlay yui-panel c13">
                            <div id="qad_shp_h" class="hd c12">Shipments</div>
                            <div class="bd">
                              <form id="qaf_shp" name="qaf_shp">
                                <script type="text/javascript">
                                  var myTabs = new YAHOO.widget.TabView("demo");
                                </script>
                                <div id="demo" class="yui-navset">
                                  <ul class="yui-nav">
                                    <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
                                    <li><a href="#tab2"><em>Tab Two Label</em></a></li>
                                    <li><a href="#tab3"><em>Tab Three Label</em></a></li>
                                  </ul>
                                  <div class="yui-content">
                                    <div><p>Tab One Content</p></div>
                                    <div><p>Tab Two Content</p></div>
                                    <div><p>Tab Three Content</p></div>
                                  </div>
                                </div>
                              </form>
                            </div>
                            <div class="container-close"></div>
                          </div>
                          <div class="underlay"></div>
                        </div>
                      </td>
                      <td></td>
                      <td class="columnLabel">Shipments</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </body
      >

    • kiwinuovo
      Here is a crude attempt to illustrate the problem: +--------------------------------------------+ ! YUI Web App !
      Message 2 of 3 , Jun 4, 2008
        Here is a crude attempt to illustrate the problem:


        +--------------------------------------------+
        !                YUI Web App                 !
        +---------+----------------------------------+
        !         !                                  !
        ! +-----+ !                                  !
        ! !Hello! !                                  !
        ! +-----+ !                                  !
        !         !                                  !
        +---------+----------------------------------+
                    Fig. 1: Original state


                    

        ello!----------------------------------------+
        ----+            YUI Web App                 !
        +---------x----------------------------------+
        !         !                                  !
        !         !                                  !
        !         !                                  !
        !         !                                  !
        !         !                                  !
        +---------+----------------------------------+
               Fig. 2: After moving up and left
            
            
            


        +--------------------------------------------+
        !                YUI Web App                 !
        +---------+----------------------------------+
        !         !                                  !
        !         !                                  !
        !         !                                  !
        !         !                                  !
        !      +-+!                                  !
        +------!H!+----------------------------------+
             Fig. 3: After moving down and right
            
            
            


        +---------x----------------------------------+
        !         x      YUI Web App                 !
        +---------x----------------------------------+
        !         x                                  !
        !         x                                  !
        !         x                                  !
        !         x                                  !
        !         x                                  !
        +---------x----------------------------------+
        Fig. 4: Dialog can't cross border drawn with x

      • Satyen Desai
        Hi, * Do you have a width specified on the Dialog? * Any specific browser? * And it s definitely the width which is restricted and not the Dialog stacking
        Message 3 of 3 , Jun 6, 2008
          Hi,

          * Do you have a width specified on the Dialog?
          * Any specific browser?
          * And it's definitely the width which is restricted
          and not the Dialog stacking underneath the right panel/getting clipped?

          I did hit something similar when working on an "auto" width Dialog example containing TabView here:
          http://yuiblog.com/sandbox/yui/v251/examples/container/widthlessPanel.html

          But that was when I hit the edge of the viewport (see the CSS comments for how I resolved it).

          If you could post a URL we could look at, it would be much easier to figure out what you may be hitting in your use case.

          Regards.
          Satyen

          p.s. Nice ascii wireframes, BTW
          ________________________________________
          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of kiwinuovo
          Sent: Wednesday, June 04, 2008 8:32 PM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] Re: Dialog size restricted by some other element?

          Here is a crude attempt to illustrate the problem:


          +--------------------------------------------+
          !                YUI Web App                 !
          +---------+----------------------------------+
          !         !                                  !
          ! +-----+ !                                  !
          ! !Hello! !    &n bsp;                             !
          ! +-----+ !                                  !
          !         !                                  !
          +---------+----------------------------------+
                      Fig. 1: Original state


                      

          ello!----------------------------------------+
          ----+    ;         YUI Web App                 !
          +---------x----------------------------------+
          !         !                                  !
          !         !                                  !
          !         !                                 ;  !
          !         !                                  !
          !         !                                  !
          +---------+----------------------------------+
                 Fig. 2: After moving up and left
              
              
              


          +--------------------------------------------+
          !                YUI Web App          &n bsp;      !
          +---------+----------------------------------+
          !         !                                  !
          !         !                                  !
          !         !                                  !
          !         !           ;                        !
          !      +-+!                                  !
          +------!H!+----------------------------------+
               Fig. 3: After moving down and right
              
              
              


          +---------x----------------------------------+
          !         x      YUI Web App                 !
          +---------x----------------------------------+
          !          x                                  !
          !         x                                  !
          !         x                                  !
          !         x                                  !
          !   ;       x                                  !
          +---------x----------------------------------+
          Fig. 4: Dialog can't cross border drawn with x
        Your message has been successfully submitted and would be delivered to recipients shortly.