Login Register
Home » Support » Forums » Dijit (dijit.*, 0.9+) » Dijit Support » dijit.layout.BorderContainer doesn't look right

dijit.layout.BorderContainer doesn't look right

Submitted by purdticker on Tue, 06/10/2008 - 00:12.

I've been playing with this dijit.layout.bordercontainer for a while now, why is this so difficult?

Ultimately, I'm trying to set up a calendar layout which takes up the entire screen. If I have to use a fixed width, that is ok, too. For now, though, I'm just trying to make a very simple bordercontainer. Here is my code so far, why does this display so ugly?

<head>
        <title>EBS Portal - ControlM Calendar</title>   
   
        <!-- load the dojo toolkit base -->
        <script type="text/javascript" src="js/dojo/dojo.js"
            djConfig="parseOnLoad:true, isDebug:true"></script>
            
        <script type="text/javascript">
        /* our JavaScript will go here */
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        </script>
   
        <style type="text/css">
        /* our CSS can go here */
        </style>
    </head>
    <body><!-- this is a Typical WebPage starting point ... -->
            

        <div dojoType="dijit.layout.BorderContainer"
                style="border: 2px solid black; width: 90%; height: 500px; padding: 10px;">
                <div dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; width: 100px;">
                        left
                </div>
                <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;">
                        right
                </div>
                <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;">
                        top bar
                </div>
                <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;">
                        bottom bar
                </div>
                <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 0px;">
                        center
                </div>
        </div>

    </body>
‹ Basic BorderContainer Functionality Problems updating multiple Trees with ItemFileWriteStore ›

missing the CSS

Submitted by alex on Tue, 06/10/2008 - 06:23.

hey purdticker:

Looks like your page is indeed set up to build and parse things right, except that Dijit does depend on some style sheets that ship along with it. You I'd change the header part of your document to look like this:

<head>
        <title>EBS Portal - ControlM Calendar</title>   
   
        <!-- load the dojo toolkit base -->
        <script type="text/javascript" src="js/dojo/dojo.js"
            djConfig="parseOnLoad:true, isDebug:true"></script>
           
        <script type="text/javascript">
            /* our JavaScript will go here */
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
        </script>
   
        <style type="text/css">
            @import  "js/dojo/resources/dojo.css";
            @import  "js/dijit/themes/tundra/tundra.css";

            /* our CSS can go here */

        </style>
    </head>
    <body class="tundra">

The first CSS require ("dojo.css") is totally optional, but to get the themed widgets to look right, you'll need to pull in a theme CSS file (in this case tundra) and set the class of the body element to apply the theme.

Regards

--
Project Lead, The Dojo Toolkit 
President, The Dojo Foundation

thanks!

Submitted by purdticker on Tue, 06/10/2008 - 18:08.

yay thank you so much, looks beautiful