[Dojo-interest] LayoutContainers, ContentPanes and TabContainers
Simon Holroyd
holroyd at sanger.ac.uk
Wed Feb 21 03:45:25 MST 2007
Try this, I've just removed your styles, the duplication of id and
widgetId, which are synonymous. The 'layout' widgets layout exactly how
they say they do without styles, you need only fiddle with the
dimensions of the laid out components. Anyway, hope this helps.
-Simon
<!--
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Dojo Test</title>
<script type="text/javascript"
src="/js/dojo-0.4.1-kitchen_sink/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.TabContainer");
dojo.require("dojo.widget.ContentPane");
</script>
<style>
</style>
</head>
<body>
<div widgetId="mainLayout" dojoType="LayoutContainer"
style="width:100%; height:100%;">
<div widgetId="header" dojoType="ContentPane"
layoutAlign="top" style="background-color:red;">
This is the header
</div>
<div widgetId="footer" dojoType="ContentPane"
layoutAlign="bottom" style="background-color:blue;">
This is the footer
</div>
<div widgetId="lefter" dojoType="ContentPane"
layoutAlign="left" style="background-color:green;">
This is the lefter
</div>
<div widgetId="mainTabContainer" dojoType="TabContainer"
layoutAlign="client" selectedChild="tab1">
<div widgetId="tab1" dojoType="LayoutContainer"
label="Tab1">
<div dojoType="ContentPane" widgetId="tab1Header"
layoutAlign="top" style="background-color:pink;">
This is the tab1 header
</div>
<div dojoType="ContentPane" widgetId="tab1Content"
layoutAlign="client" style="background-color:yellow;">
This is the tab1 content
</div>
<div dojoType="ContentPane" widgetId="tab1Bottom"
layoutAlign="bottom" style="background-color:grey;">
This is the tab1 bottom
</div>
</div>
<div id="tab2" dojoType="ContentPane" label="Tab2">
This is the tab2
</div>
</div>
</div>
</body>
</html>
On Wed, 2007-02-21 at 11:25 +0100, Olivier THIERRY wrote:
> Hello,
>
> I have the same kind of problem, using dojo 0.4.2 RC1 (don't know if
> the problem is the same with 0.4.1, I'm going to check it)
>
> I use a LayoutContainer with both width and height at 100%. It
> contains a "header" div on top, a "lefter" div on left, a "footer" div
> on bottom and a "main" div on client.This "main" div contains itself a
> TabContainer.
>
> From what I understood (and what seems logical to me), the "main" div
> should take the remaining space in the layout container.
> But if I don't set the height of my "main" div, only the "header" div
> appears, but lefter, footer and main div don't appear. Using Firebug,
> I saw that the height for these divs is at 0px ! It's the same when a
> set the height for my "main" div to 100%.
>
> The only way to make them appear is to set the main div height to a
> fixed value (500px for example).But in this case, the height of the
> layount container is not taken into account.
>
> What is strange is that I use another LayoutContainer inside my
> TabController and it works perfect ...
>
> Here is my HTML page.
>
> <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
> pageEncoding="ISO-8859-1"%>
> <!--
> <!DOCTYPE html
> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> -->
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=ISO-8859-1">
> <title>Dojo Test</title>
> <script type="text/javascript" src="dojo/dojo.js"></script>
> <script type="text/javascript">
> dojo.require("dojo.widget.LayoutContainer");
> dojo.require("dojo.widget.TabContainer");
> dojo.require ("dojo.widget.ContentPane");
> </script>
> <style>
> #mainLayout {
> width: 100%;
> height: 100%;
> }
> #header {
> background-color: green;
> height: 50px;
> color: white;
> }
> #footer {
> background-color: red;
> height: 50px;
> color: white;
> }
> #lefter {
> width:150px;
> background-color: yellow;
> color: white;
> }
> #main {
> padding : 10px 10px 10px 10px;
> }
> #mainTabContainer {
> width: 100%;
> height: 100%;
> }
> .dojoTabPaneWrapper {
> padding : 10px 10px 10px 10px;
> }
> </style>
> </head>
> <body>
> <div widgetId="mainLayout" dojoType="LayoutContainer">
> <div id="header" widgetId="header" dojoType="ContentPane"
> layoutAlign="top">
> This is the header
> </div>
> <div id="footer" widgetId="footer" dojoType="ContentPane"
> layoutAlign="bottom">
> This is the footer
> </div>
> <div id="lefter" widgetId="lefter" dojoType="ContentPane"
> layoutAlign="left">
> This is the lefter
> </div>
> <div id="main" widgetId="main" dojoType="ContentPane"
> layoutAlign="client">
> <div id="mainTabContainer" widgetId="mainTabContainer"
> dojoType="TabContainer" selectedChild="tab1" labelPosition="top">
> <div widgetId="tab1" dojoType="LayoutContainer"
> label="Tab1">
> <div dojoType="ContentPane"
> widgetId="tab1Header" layoutAlign="top">
> This is the tab1 header
> </div>
> <div dojoType="ContentPane"
> widgetId="tab1Content" layoutAlign="client">
> This is the tab1 content
> </div>
> <div dojoType="ContentPane"
> widgetId="tab1Bottom" layoutAlign="bottom">
> This is the tab1 bottom
> </div>
> </div>
> <div id="tab2" dojoType="ContentPane"
> label="Tab2">
> This is the tab2
> </div>
> </div>
> </div>
> </div>
> </body>
> </html>
>
> Is this a bug ? Or is there someting wrong in my HTML code ?
>
> Thanks in advance ;)
>
> Olivier
>
>
> 2007/2/21, Simon Holroyd <holroyd at sanger.ac.uk>:
> Hello,
>
> >From what I understand you just need to set the size of the
> LayoutContainer to whatever (height:100%; width:100% - if you
> want it to
> fit the entire view port.
>
> <div dojoType="LayoutContainer" style="height:100%;
> width:100%">
> <div dojoType="ContentPane" layoutAlign="top">This is the
> header</div>
> <div dojoType="TabContainer" layoutAlign="client">
> <div dojoType="ContentPane" label="Tab1"
> id="tab1">Tab1</div>
> <div dojoType="ContentPane" label="Tab1"
> id="tab1">Tab1</div>
> </div>
> <div dojoType="ContentPane" layoutAlign="bottom">This is
> the
> footer</div>
> </div>
>
> Then you play with the css on each of the containers you've
> placed in
> the LayoutContainer.
>
> -Simon
>
> On Tue, 2007-02-20 at 16:44 -0600, Dean Karres wrote:
> > Hi,
> >
> > I have more questions about LayoutContainers, ContentPanes
> and
> > TabContainers. I am running dojo-0.4.1-widget on a linux
> platform.
> >
> > I know this has to be something simple that I am skipping
> over but I
> > am not seeing it.
> >
> > First, here are samples:
> >
> > http://www.itg.uiuc.edu/~karres/layout1.html
> > http://www.itg.uiuc.edu/~karres/layout2.html
> > http://www.itg.uiuc.edu/~karres/layout3.html
> > http://www.itg.uiuc.edu/~karres/layout4.html
> >
> > They are all "the same" except for the location of a CSS
> height element
> > that tries to enforce the height of the "client"
> LayoutContainer.
> >
> > Ok, My understanding of LayoutContainers suggests that the
> whole
> > browser window should be filled with the layout specified
> and that
> > it should expand/shrink as the browser window is
> resized. This does
> > not seem to be happening for me.
> >
> > The layout description is (a mono-space font would be good
> here):
> >
> > TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
> > TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
> > TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
> > LLLLL____________|tab|tab|tab|tab|
> > LLLLL |
> > ... |
> > LLLLL |
> > LLLLL |
> > FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
> >
> > Where "TTT..." is the header/title/banner area
> > "LLL..." will be a left-hand control bar 20% wide
> > "FFF..." is a footer area
> >
> > The other bit is the "client" area that I assumed would be
> the
> > size of the remainder of the visible browser window. It
> contains
> > a TabContainer with doLayout="false" so that i can get the
> tabs to
> > float to the right.
> >
> > Each tab definition has an href clause defined that points
> to a very
> > simple html page that looks like:
> >
> > <html>
> > <head>
> > </head>
> > <body>
> > <div style="background-color: #aaa; height: 40em; width:
> 100%;">
> > <p>Hi </p>
> > </div>
> > </body>
> > </html>
> >
> >
> > All of the example html files listed above will display to
> some degree
> > in firefox v1.5.0.9 -- at least until you resize the browser
> then
> > perhaps the header/banner area will display. Nothing is
> displayed
> > in Safari or IE.
> >
> > Ok, so that is one issue. The examples above do not show in
> Safari
> > or IE and they are wonky in FF.
> >
> > Another issue has to do with the apparent size of the each
> tab's real
> > estate based on content. In layout1.html the whole display
> is squished
> > into a very small unit and there is a scrollbar on the tab
> area.
> >
> > The other examples are my attempts to figure out how to
> mandate a
> > height for the tab content area. In Layout1 there is no CSS
> height
> > specified. In layout2 I put a CSS height:43em; on the
> "client" div.
> > In layout3 the height is moved to the TabContainer div; and
> in layout4
> > it is placed on each of the tab container ContentPanes.
> >
> > Ideas?
> > _______________________________________________
> > Dojo FAQ: http://dojo.jot.com/FAQ
> > Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> > Dojo-interest at dojotoolkit.org
> > http://dojotoolkit.org/mailman/listinfo/dojo-interest
>
> _______________________________________________
> Dojo FAQ: http://dojo.jot.com/FAQ
> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> Dojo-interest at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
>
> _______________________________________________
> Dojo FAQ: http://dojo.jot.com/FAQ
> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> Dojo-interest at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
More information about the Dojo-interest
mailing list