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

Panel body height does not match underlay height

Expand Messages
  • mtalt41970
    Hi, I have a dynamically created panel that I set the height on, the problem is that it seems to create the underlay at the correct height, but the content
    Message 1 of 5 , Oct 8, 2007
    • 0 Attachment
      Hi,

      I have a dynamically created panel that I set the height on, the
      problem is that it seems to create the underlay at the correct height,
      but the content (body) is not set at the proper height. I'm using the
      SAM css file for the container.

      Thanks for you help,
      Michelle

      <script type="text/javascript">
      YAHOO.namespace("mtp");
      YAHOO.mtp.panels = [];

      function mtp() {
      var newMod;
      var isNew = true;
      var panelid = "myPanel";
      var args = {};

      args.visible = true;

      args.constraintoviewport = true;
      args.width = "400px";
      args.height = "400px";
      args.fixedcenter = true;
      args.draggable = true;
      args.modal = false;

      if (YAHOO.mtp.panels[panelid]) {
      newMod = YAHOO.mtp.panels[panelid];
      newMod.cfg.applyConfig(args);
      isNew = false;
      } else {
      newMod = new YAHOO.widget.Panel(panelid, args);
      YAHOO.mtp.panels[panelid] = newMod;
      }

      var htmlStr = "HELLO";

      newMod.setHeader("Test Panel");
      newMod.setBody(htmlStr);
      newMod.render(document.body);
      }

      </script>
    • bretlevy
      I suggest not setting a height at all for a floating/shadowed panel. I had the same problem if the body content of the panel causes it to grow bigger than
      Message 2 of 5 , Oct 8, 2007
      • 0 Attachment
        I suggest not setting a height at all for a "floating/shadowed"
        panel. I had the same problem if the body content of the panel
        causes it to grow bigger than what the height specifies. I took the
        height configuration out and it handles it fine. This is not true of
        width, however, so keep specifying that. You can look at the login
        page of a site I'm working on (it is still in development!) --
        corp.bluelinkdirect.com and see what I did for the "login" panel.

        Hope that helps...

        ~~bret


        --- In ydn-javascript@yahoogroups.com, "mtalt41970" <mtalt41970@...>
        wrote:
        >
        > Hi,
        >
        > I have a dynamically created panel that I set the height on, the
        > problem is that it seems to create the underlay at the correct
        height,
        > but the content (body) is not set at the proper height. I'm using
        the
        > SAM css file for the container.
        >
        > Thanks for you help,
        > Michelle
        >
        > <script type="text/javascript">
        > YAHOO.namespace("mtp");
        > YAHOO.mtp.panels = [];
        >
        > function mtp() {
        > var newMod;
        > var isNew = true;
        > var panelid = "myPanel";
        > var args = {};
        >
        > args.visible = true;
        >
        > args.constraintoviewport = true;
        > args.width = "400px";
        > args.height = "400px";
        > args.fixedcenter = true;
        > args.draggable = true;
        > args.modal = false;
        >
        > if (YAHOO.mtp.panels[panelid]) {
        > newMod = YAHOO.mtp.panels[panelid];
        > newMod.cfg.applyConfig(args);
        > isNew = false;
        > } else {
        > newMod = new YAHOO.widget.Panel(panelid, args);
        > YAHOO.mtp.panels[panelid] = newMod;
        > }
        >
        > var htmlStr = "HELLO";
        >
        > newMod.setHeader("Test Panel");
        > newMod.setBody(htmlStr);
        > newMod.render(document.body);
        > }
        >
        > </script>
        >
      • mtalt41970
        Thanks. My biggest problem is that the content for the body is dynamic and I want to prevent the panel from getting too big. :( This did not happen in the
        Message 3 of 5 , Oct 8, 2007
        • 0 Attachment
          Thanks.

          My biggest problem is that the content for the body is dynamic and I
          want to prevent the panel from getting too big. :(

          This did not happen in the older version of YUI.


          --- In ydn-javascript@yahoogroups.com, "bretlevy" <bret@...> wrote:
          >
          >
          > I suggest not setting a height at all for a "floating/shadowed"
          > panel. I had the same problem if the body content of the panel
          > causes it to grow bigger than what the height specifies. I took the
          > height configuration out and it handles it fine. This is not true of
          > width, however, so keep specifying that. You can look at the login
          > page of a site I'm working on (it is still in development!) --
          > corp.bluelinkdirect.com and see what I did for the "login" panel.
          >
          > Hope that helps...
          >
          > ~~bret
          >
          >
          > --- In ydn-javascript@yahoogroups.com, "mtalt41970" <mtalt41970@>
          > wrote:
          > >
          > > Hi,
          > >
          > > I have a dynamically created panel that I set the height on, the
          > > problem is that it seems to create the underlay at the correct
          > height,
          > > but the content (body) is not set at the proper height. I'm using
          > the
          > > SAM css file for the container.
          > >
          > > Thanks for you help,
          > > Michelle
          > >
          > > <script type="text/javascript">
          > > YAHOO.namespace("mtp");
          > > YAHOO.mtp.panels = [];
          > >
          > > function mtp() {
          > > var newMod;
          > > var isNew = true;
          > > var panelid = "myPanel";
          > > var args = {};
          > >
          > > args.visible = true;
          > >
          > > args.constraintoviewport = true;
          > > args.width = "400px";
          > > args.height = "400px";
          > > args.fixedcenter = true;
          > > args.draggable = true;
          > > args.modal = false;
          > >
          > > if (YAHOO.mtp.panels[panelid]) {
          > > newMod = YAHOO.mtp.panels[panelid];
          > > newMod.cfg.applyConfig(args);
          > > isNew = false;
          > > } else {
          > > newMod = new YAHOO.widget.Panel(panelid, args);
          > > YAHOO.mtp.panels[panelid] = newMod;
          > > }
          > >
          > > var htmlStr = "HELLO";
          > >
          > > newMod.setHeader("Test Panel");
          > > newMod.setBody(htmlStr);
          > > newMod.render(document.body);
          > > }
          > >
          > > </script>
          > >
          >
        • bretlevy
          I don t know your exact situation, but it sounds familiar! I have had several instances where I didn t want the panel to grow or I wanted it a specific size
          Message 4 of 5 , Oct 9, 2007
          • 0 Attachment
            I don't know your exact situation, but it sounds familiar! I have
            had several instances where I didn't want the panel to grow or I
            wanted it a specific size regardless of the content. By putting a
            div with a specific size in the body and then setting the overflow
            accordingly (like auto or hidden) you can do this. You might have a
            class like:

            .PANELBOX { height:15em; width:500px; overflow:hidden; }

            or

            .PANELBOX { height:15em; width:500px; overflow:auto; }

            Then your panel would be (roughly) a known height (or exactly if you
            put in a pixel measurement, for example) and width regarless of
            content. You would be ignoring overflow content or accessing it via
            scroll bars, respectively.

            If you're showing some kind of "preview", then the "hidden" version
            is useful, otherwise the scrolling one works. Even forms and other
            active content can be in the scrolling part!

            ~~bret



            --- In ydn-javascript@yahoogroups.com, "mtalt41970" <mtalt41970@...>
            wrote:
            >
            > Thanks.
            >
            > My biggest problem is that the content for the body is dynamic and I
            > want to prevent the panel from getting too big. :(
            >
            > This did not happen in the older version of YUI.
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "bretlevy" <bret@> wrote:
            > >
            > >
            > > I suggest not setting a height at all for a "floating/shadowed"
            > > panel. I had the same problem if the body content of the panel
            > > causes it to grow bigger than what the height specifies. I took
            the
            > > height configuration out and it handles it fine. This is not
            true of
            > > width, however, so keep specifying that. You can look at the
            login
            > > page of a site I'm working on (it is still in development!) --
            > > corp.bluelinkdirect.com and see what I did for the "login" panel.
            > >
            > > Hope that helps...
            > >
            > > ~~bret
            > >
            > >
            > > --- In ydn-javascript@yahoogroups.com, "mtalt41970" <mtalt41970@>
            > > wrote:
            > > >
            > > > Hi,
            > > >
            > > > I have a dynamically created panel that I set the height on, the
            > > > problem is that it seems to create the underlay at the correct
            > > height,
            > > > but the content (body) is not set at the proper height. I'm
            using
            > > the
            > > > SAM css file for the container.
            > > >
            > > > Thanks for you help,
            > > > Michelle
            > > >
            > > > <script type="text/javascript">
            > > > YAHOO.namespace("mtp");
            > > > YAHOO.mtp.panels = [];
            > > >
            > > > function mtp() {
            > > > var newMod;
            > > > var isNew = true;
            > > > var panelid = "myPanel";
            > > > var args = {};
            > > >
            > > > args.visible = true;
            > > >
            > > > args.constraintoviewport = true;
            > > > args.width = "400px";
            > > > args.height = "400px";
            > > > args.fixedcenter = true;
            > > > args.draggable = true;
            > > > args.modal = false;
            > > >
            > > > if (YAHOO.mtp.panels[panelid]) {
            > > > newMod = YAHOO.mtp.panels[panelid];
            > > > newMod.cfg.applyConfig(args);
            > > > isNew = false;
            > > > } else {
            > > > newMod = new YAHOO.widget.Panel(panelid, args);
            > > > YAHOO.mtp.panels[panelid] = newMod;
            > > > }
            > > >
            > > > var htmlStr = "HELLO";
            > > >
            > > > newMod.setHeader("Test Panel");
            > > > newMod.setBody(htmlStr);
            > > > newMod.render(document.body);
            > > > }
            > > >
            > > > </script>
            > > >
            > >
            >
          • mtalt41970
            That worked! Thank you so much. :)
            Message 5 of 5 , Oct 9, 2007
            • 0 Attachment
              That worked! Thank you so much. :)

              --- In ydn-javascript@yahoogroups.com, "bretlevy" <bret@...> wrote:
              >
              >
              > I don't know your exact situation, but it sounds familiar! I have
              > had several instances where I didn't want the panel to grow or I
              > wanted it a specific size regardless of the content. By putting a
              > div with a specific size in the body and then setting the overflow
              > accordingly (like auto or hidden) you can do this. You might have a
              > class like:
              >
              > .PANELBOX { height:15em; width:500px; overflow:hidden; }
              >
              > or
              >
              > .PANELBOX { height:15em; width:500px; overflow:auto; }
              >
              > Then your panel would be (roughly) a known height (or exactly if you
              > put in a pixel measurement, for example) and width regarless of
              > content. You would be ignoring overflow content or accessing it via
              > scroll bars, respectively.
              >
              > If you're showing some kind of "preview", then the "hidden" version
              > is useful, otherwise the scrolling one works. Even forms and other
              > active content can be in the scrolling part!
              >
              > ~~bret
              >
              >
              >
              > --- In ydn-javascript@yahoogroups.com, "mtalt41970" <mtalt41970@>
              > wrote:
              > >
              > > Thanks.
              > >
              > > My biggest problem is that the content for the body is dynamic and I
              > > want to prevent the panel from getting too big. :(
              > >
              > > This did not happen in the older version of YUI.
              > >
              > >
              > > --- In ydn-javascript@yahoogroups.com, "bretlevy" <bret@> wrote:
              > > >
              > > >
              > > > I suggest not setting a height at all for a "floating/shadowed"
              > > > panel. I had the same problem if the body content of the panel
              > > > causes it to grow bigger than what the height specifies. I took
              > the
              > > > height configuration out and it handles it fine. This is not
              > true of
              > > > width, however, so keep specifying that. You can look at the
              > login
              > > > page of a site I'm working on (it is still in development!) --
              > > > corp.bluelinkdirect.com and see what I did for the "login" panel.
              > > >
              > > > Hope that helps...
              > > >
              > > > ~~bret
              > > >
              > > >
              > > > --- In ydn-javascript@yahoogroups.com, "mtalt41970" <mtalt41970@>
              > > > wrote:
              > > > >
              > > > > Hi,
              > > > >
              > > > > I have a dynamically created panel that I set the height on, the
              > > > > problem is that it seems to create the underlay at the correct
              > > > height,
              > > > > but the content (body) is not set at the proper height. I'm
              > using
              > > > the
              > > > > SAM css file for the container.
              > > > >
              > > > > Thanks for you help,
              > > > > Michelle
              > > > >
              > > > > <script type="text/javascript">
              > > > > YAHOO.namespace("mtp");
              > > > > YAHOO.mtp.panels = [];
              > > > >
              > > > > function mtp() {
              > > > > var newMod;
              > > > > var isNew = true;
              > > > > var panelid = "myPanel";
              > > > > var args = {};
              > > > >
              > > > > args.visible = true;
              > > > >
              > > > > args.constraintoviewport = true;
              > > > > args.width = "400px";
              > > > > args.height = "400px";
              > > > > args.fixedcenter = true;
              > > > > args.draggable = true;
              > > > > args.modal = false;
              > > > >
              > > > > if (YAHOO.mtp.panels[panelid]) {
              > > > > newMod = YAHOO.mtp.panels[panelid];
              > > > > newMod.cfg.applyConfig(args);
              > > > > isNew = false;
              > > > > } else {
              > > > > newMod = new YAHOO.widget.Panel(panelid, args);
              > > > > YAHOO.mtp.panels[panelid] = newMod;
              > > > > }
              > > > >
              > > > > var htmlStr = "HELLO";
              > > > >
              > > > > newMod.setHeader("Test Panel");
              > > > > newMod.setBody(htmlStr);
              > > > > newMod.render(document.body);
              > > > > }
              > > > >
              > > > > </script>
              > > > >
              > > >
              > >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.