Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#9505 closed defect (invalid)

FF3.5 BorderContainer Iframe get vertical Scrollbar

Reported by: Avachan Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.3.1
Keywords: Cc:
Blocked By: Blocking:

Description

I use Firefox 3.5 since today. Before I uses 3.0.11 and IE 7 and 8. Till today and only on FF 3.5 i have the problem of a vertical scrollbar in the IFrame.

Beispiel: index.php

<html>
<head>
  <title></title>
  <script type="text/javascript" src="/dojoroot/1_3_1/dojo/dojo.js" 
    djConfig="isDebug:false, parseOnLoad: true"}>
  </script>
  <style type="text/css">
    @import "/dojoroot/1_3_1/dojo/resources/dojo.css";
    @import "/dojoroot/1_3_1/dijit/themes/tundra/tundra.css";
    body {
      width:100%;
      height:100%;
    }
  </style>
  <script type="text/javascript">
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
  </script>
</head>
<body class="tundra">
  <div dojoType="dijit.layout.BorderContainer" design="sidebar" id="borderContainer" splitter="true" style="width:100%;height:100%">
    <div dojoType="dijit.layout.ContentPane" region='left' width="200px" splitter="true">
        Left 
    </div>
    <div dojoType="dijit.layout.ContentPane" region='center' splitter="true">
        <IFrame src="inner.html" style="width:100%; height:100%"> </IFrame>
    </div>
  </div>
</body>
</html>

The inner Scrollbars are ok. but the outer one in the BorderContainer? is to much.

Greetings, Ava-chan

Attachments (2)

iframepane.html (1.4 KB) - added by dante 10 years ago.
a sample Iframe ContentPane? prototype / test
iframepane2.html (1.7 KB) - added by dante 10 years ago.
implements _setSrcAttr and _setHrefAttr for giggles.

Download all attachments as: .zip

Change History (10)

comment:1 Changed 10 years ago by bill

Resolution: invalid
Status: newclosed

This seems like a user error. You defined the iframe to be 100% of the size of the center ContentPane, but then there's also the border on the iframe, and the padding of the ContentPane.... it's only natural to get a scroll bar.

How about using 95% ?

comment:2 Changed 10 years ago by Avachan

99% is ok. But I do not look like its right. You can disable the border of the IFrame and its grown bigger to fit it's size.

You say not real Bug, but I think something must be wrong. Because when I put a Table on a Content Pane and set it to 100 % width I do not become a scrollbar. If I do it with height, there is the pitty.

I "fixed" the Problem by coment the line 620 in dijit.css out.

.dijitContentPane {

display: block; /* overflow: auto; */

}

seems to work in IE 7 and FF 3.5, FF 3.0.11

Ava-chan

comment:3 Changed 10 years ago by bill

I guess the reason the table works is because it doesn't have a border. If you disable the border on the <iframe> and the padding on the ContentPane I think the iframe would also work.

Regarding setting overflow to hidden: sure, that works... actually you can just say style="overflow: hidden" on the ContentPane to get the same effect.

I also wonder if you could just use the href attribute of ContentPane (or dojox.layout.ContentPane) rather than using an <iframe> at all.

In theory you could also make the <iframe> itself the ContentPane, like

<div dojoType=dijit.layout.BorderContainer>
    ...
   <iframe dojoType=dijit.layout.ContentPane ...>
</div>

... but that didn't seem to be working for me, not sure why. <iframe>'s are a bit tricky.

comment:4 Changed 10 years ago by Avachan

I have set it to hidden : ) Thanks 4 your response.

Yes I can use the href attribute for content Panes. But I think I can't use links inside of the ContentPanes? only to change the inside loaded Page. Or better, I don't can use links which are uses <a href> </a>.

To any others who read here, ignore my post above its stupid bullshit and look at bills. : )

Many regards, Ava-chan

comment:5 Changed 10 years ago by bill

BTW I see your point about clicking links, that might be a good reason to use the iframe.

Changed 10 years ago by dante

Attachment: iframepane.html added

a sample Iframe ContentPane? prototype / test

comment:6 Changed 10 years ago by dante

fwiw, I've always thought we should have an IFramePane that behaves like a contentpane (in the sense .attr("href" would set the src="" attrib, etc) and that it would work inside a borderContainer/dialog/accordion should the user so choose such an interface (iframes have their own place in the world)

Attached is a basic basic dijit.layout.IFramePane prototype. I see an error that doesn't appear to break anything from working in IE8 ...

IFrame only have a few quirks about them, empty src="", https:// mixed content, etc, etc, which we should be able to smooth out fairly easy.

Just my $0.02US

Changed 10 years ago by dante

Attachment: iframepane2.html added

implements _setSrcAttr and _setHrefAttr for giggles.

comment:7 Changed 10 years ago by Avachan

Looks very nice in IE 7.

But in FF3.0.11 and FF3.5 Your class had problems with the size. He makes the IFrame 100 % and not like IE7 the rest up to 100%.

So no one can see the Scrollbar.

But very nice Idea

comment:8 Changed 10 years ago by Avachan

        resize: function (size) {
          var viewport = dijit.getViewport();
          var width = viewport.w;
          width -= dojo.style(this.domNode,"left");
          if (this.region == "center") dojo.style(this.domNode, "width", width+"px");
        }

With this reize function it is working in IE7 and FF3.5

Note: See TracTickets for help on using tickets.