CODEWITHSUNDEEP
cssdojo
WtLgi
WtLgi

Reputation: 237

dojo claro and sizing

I'm not sure if this is some css issue I've never run into before, or it's an issue with using the new claro theme in dojo 1.5. But right now, what CSS says is 100% sizing doesn't include the borders of my BorderContainer:

css:

html,body, .dijitBorderContainer {
   width: 100%;
   height: 100%;    
}

h1 {
    margin-top: 0em;
}

#sidebar {
    width: 300px;
}

and html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>stuff</title>
    <style type="text/css">
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.css";
        @import "css/application.css";
    </style>
    <script type="text/javascript">
        var djConfig = {
            isDebug: false,
            parseOnLoad: true,
            baseUrl: './',
        };
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script>  
    <script type="text/javascript">
        dojo.require('dijit.layout.BorderContainer');
    </script>
</head>
<body class="claro">
    <div dojoType="dijit.layout.BorderContainer" liveSplitters="true"></div>
</body>

And with this setup, the bordercontainer is just slightly too large for the window and brings up the scroll bars. All that doesn't fit is the border. Any ideas?

Upvotes: 0

Views: 962

Answers (1)

casablanca
casablanca

Reputation: 70691

I don't know anything about Dojo but what you are experiencing sounds like standard CSS behaviour. CSS width refers to the width of the element's content only, excluding margin, padding and border. Have a look at this page on the CSS box model.

Upvotes: 1

Related Questions