[Dojo-interest] scrollbar issue
Bill Keese
wkeese at gmail.com
Mon Nov 9 07:23:34 EST 2009
You've got a BorderContainer sized to fit the viewport:
<div dojoType = "dijit.layout.BorderContainer" style =
"width:100%;height:100%;">
Why would you expect a scrollport on the viewport?
On Mon, Nov 9, 2009 at 4:22 PM, Vishwajeet Borade <
Vishwajeet.Borade at merceworld.com> wrote:
> Bill Keese wrote:
>
> We've got a lot of test cases for dijit and the scroll bars always show up
> fine, so I'm not sure what's different about your code.
>
> If you can come up with a test case then we could figure out what's
> causing the problem.
>
> On Sat, Nov 7, 2009 at 4:00 PM, Vishwajeet Borade <
> Vishwajeet.Borade at merceworld.com> wrote:
>
>>
>> My HTML screens in question have been designed using DOJO
>> and some of them span over multiple pages.
>> My problem is that none of these screens are showing any
>> horizontal or vertical scrollbars though the content overflows
>> exceeding the browser window size.
>>
>> I have tried fixing this doing things like;
>> --------------------
>>
>> html {
>> overflow: -moz-scrollbars-vertical;
>> overflow-y: scroll;}
>>
>> <body style="overflow:scroll;height:101%;" scroll="yes">
>> --------------------------
>>
>> I have observed that the scrollbar being not visible
>> has something to do with the DOJO's CSS.
>> I am using DOJO themes either by setting
>> <BODY class="tundra">
>> or
>> <BODY class="soria">
>>
>> As soon as I remove this 'class' property from 'BODY' tag my
>> scrollbar's are displayed the way I want and vice versa.
>> I tried looking through soria.css and tundra.css for any clues
>> but none that could help me.
>>
>
> Hi Bill,
> Thanks a lot for the reply.
> Please find my sample HTML code below which demonstrates
> the problem I am facing with vertical scroll bar.
> I am using 'BorderContainer' here which splits the screen into 'top',
> 'center'
> and 'bottom' regions. 'top' region contains header and 'bottom' one the
> footer
> while the 'center' region holds form elements.
> Here it seems to me that 'BorderContainer' is preventing browser from
> displaying
> the vertical scroll bar because as soon as I get rid of the
> 'BorderContainer' from
> the code the scroll bar appears.
>
> ----------------------------------------------------------------------------------------------------
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
> <title> Extranet </title>
> <style type="text/css">
> @import "dojo/dojo/resources/dojo.css";
> @import "dojo/dijit/themes/tundra/tundra.css";
> @import "dojo/dijit/themes/soria/soria.css";
> @import "dojo/dojox/grid/resources/tundraGrid.css";
> @import "css/extranet/common.css";
> html {
> overflow: -moz-scrollbars-vertical;
> overflow-y: scroll;
> }
> </style>
> <link rel="stylesheet" type="text/css"
> href="./dojo/dojox/grid/resources/Grid.css"/>
> <script type="text/javascript" src="dojo/dojo/dojo.js"
> djConfig="parseOnLoad: true"></script>
> <script type="text/javascript">
> dojo.require("dojo.parser");
> dojo.require("dijit.layout.ContentPane");
> dojo.require("dijit.layout.BorderContainer");
> dojo.require("dijit.form.Button");
> dojo.require("dijit.Menu");
> dojo.require("dijit.Toolbar");
> dojo.require("dijit.dijit");
> dojo.require("dijit.layout.ContentPane");
> dojo.require("dijit.layout.BorderContainer");
> dojo.require("dojo.data.ItemFileWriteStore");
> dojo.require("dijit.form.Button");
> dojo.require("dijit.form.Textarea");
> dojo.require("dojox.grid.DataGrid");
> </script>
> <script type="text/javascript">
> layout = [{cells:[[ {name:'Sr No.',field:'srno', width:'auto'},
> {name:'PO Number',field:'pono', width:'auto'},
> {name:'Item Type',field:'itemType', width:'auto'},
> {name:'Item Code',field:'itemId', width:'auto'},
> {name:'Ordered Quantity', field:'orderedQty', width:'auto'},
> {name:'Color', field:'color', width:'auto'},
> {name:'Shade', field:'shade', width:'auto'},
> {name:'Length', field:'lngth', width:'auto'},
> {name:'Width', field:'width', width:'auto'},
> {name:'Description',field:'description', width: 'auto'}]]}];
>
> var POdata = {items : [
> {srno : 1, pono: 'PO214', itemType: 'Fabric', itemId : 'AB24',
> orderedQty : '72*2.42m', color : 'white', shade : 'metallic white', lngth :
> '72m', width : '2.42m', description : ''},
> {srno : 2, pono: 'PO214', itemType: 'Fabric', itemId : 'AD90',
> orderedQty : '150*3.2m', color : 'blue', shade : 'navy blue', lngth:
> '150m', width : '3.2m', description : ''},
> {srno : 3, pono: 'PO214', itemType: 'Fabric', itemId : 'CV65',
> orderedQty : '94*2.62m', color : 'silver', shade : 'royal silver', lngth :
> '94m', width : '2.62m', description : ''},
> {srno : 4, pono: 'PO215', itemType: 'Button', itemId : 'AB34',
> orderedQty : '200', color : 'NA', shade : 'NA', lngth : 'NA', width: 'NA',
> description : ''},
> {srno : 5, pono: 'PO215', itemType: 'Button', itemId : 'AB45',
> orderedQty : '200', color : 'NA', shade: 'NA', lngth : 'NA', width : 'NA',
> description : ''},
> {srno : 6, pono: 'PO215', itemType: 'Button', itemId : 'NB12',
> orderedQty : '500', color : 'NA', shade : 'NA', lngth : 'NA', width : 'NA',
> description : ''},
> {srno : 8, pono: 'PO215', itemType: 'Thread', itemId : 'BN08',
> orderedQty : '400', color : 'NA', shade : 'NA', lngth : 'NA', width : 'NA',
> description : ''},
> {srno : 9, pono: 'PO215', itemType: 'Thread', itemId : 'BN08',
> orderedQty : '400', color : 'NA', shade : 'NA', lngth : 'NA', width : 'NA',
> description : ''},
> {srno : 10, pono: 'PO215', itemType: 'Thread', itemId : 'CN08',
> orderedQty : '400', color : 'NA', shade : 'NA', lngth : 'NA', width : 'NA',
> description : ''}]};
>
> var dataStore = new dojo.data.ItemFileWriteStore({data:POdata});
> </script>
> </head>
> <body class="soria" style="height:100%;">
> <div dojoType = "dijit.layout.BorderContainer" style =
> "width:100%;height:100%;">
> <div dojoType = "dijit.layout.ContentPane" region = "top" style =
> "height:10%; border:0px;" href="logo.html"> </div>
> <div dojoType = "dijit.layout.ContentPane" region = "center" style
> = "width:100%; border:0px;">
> <div dojoType="dijit.layout.ContentPane"
> href="suppliermenu.html"> </div>
> <div id="Mresult" align="center">
> <table style="width:80%; border-collapse: collapse;">
> <tr class="sectionheader">
> <td colspan="4" align="center" style="">
> <font size="3"><b><u>PURCHASE ORDER:
> 2120</u></b></font>
> </td>
> </tr>
> <tr rowspan="2">
> <td colspan="2" align="left" style="">
> <font size="2"
> color="#800000"><b>Date:</b></font><font size="1" color="black"
> face="verdana">18-Sept-2009</font><br>
> <font size="2" color="#800000"><b>Date
> Requested:</b></font><font size="1" color="black"
> face="verdana">18-Sept-2009</font>
> </td>
> </tr>
> <tr>
> <td> </td>
> </tr>
> <tr>
> <td style="text-align: left;vertical-align:
> text-top;">
> <font size="2"
> color="#800000"><b><u>Buyer</u></b></font>
> <div style="display: inline;
> padding-left:10%;">
> <font size="1" color="black"
> face="verdana"><br>Zodiac Clothing Company Ltd.<br>Apte Properties,
> 10/76<br>Off Dr. E.
> Moses Road, Worli<br>Mumbai 400 018<br>Phone:
> +91 022 66677000<br>Fax: 66677279</font>
> </div>
> </td>
> <td style="text-align: left;vertical-align:
> text-top;">
> <font size="2"
> color="#800000"><b><u>Supplier</u></b></font>
> <div style="display: inline;margin-left:2%;">
> <font size="1" color="black"
> face="verdana"><br>Yellow Hammer Accessories<br>48, Indira Nagar<br>Sungam
> By Pass
> Road<br>Mumbai</font>
> <br><font size="1" color="#800000"><b><u>Order
> Contact</u></b></font><br><font size="1" color="black"
> face="verdana">Name:ABC<br>Phone: +91 022 66677000<br>Fax:66677279</font>
> </div>
> </td>
> </tr>
> <tr>
> <td> </td>
> </tr>
> <tr>
> <td style="text-align: left;vertical-align:
> text-top;">
> <font size="2" color="#800000"><b><u>Invoice
> To</u></b></font>
> <div style="display:inline;margin-left:2%;">
> <font size="1" color="black"
> face="verdana"><br>Zodiac Clothing Company Ltd.<br>Apte Properties,
> 10/76<br>Off Dr. E.
> Moses Road, Worli<br>Mumbai 400 018<br>Phone:
> +91 022 66677000<br>Fax: 66677279</font>
> </div>
> </td>
> <td style="text-align: left;vertical-align:
> text-top;">
> <font size="2"
> color="#800000"><b><u>Delivery</u></b></font>
> <div style="display:inline;margin-left:2%;">
> <font size="1" color="black"
> face="verdana"><br>Zodiac Clothing Company Ltd.<br>Apte Properties,
> 10/76<br>Off Dr. E. Moses Road,
> Worli<br>Mumbai 400 018<br>Phone: +91 022 66677000<br>Fax: 66677279</font>
> </div>
> </td>
> </tr>
> </table>
> </div>
> <br>
> <div
> style="margin-left:auto;margin-right:auto;text-align:center;">
> <font size="2" color="#800000"><b><u>PO
> Details</u></b></font>
> </div>
> <div dojoType="dojox.grid.DataGrid" jsId="grid1"
> store="dataStore" id="polistgrid"
> clientSort="true" style="width:80%;
> margin-left:auto;margin-right:auto;" rowSelector="20px" structure="layout">
> </div>
> <br>
> <div align="center">
> <table style="width:80%; border-collapse: collapse;">
> <tr>
> <td style="text-align: left;vertical-align:
> text-top;">
> <font size="2" color="#800000"><b>Accept/Reject
> PO:<span>*</span> </b></font>
> <font size="2" color="black"
> face="verdana">Accept</font>
> <input type="radio" name="confirmpo"
> id="acceptpo" value="accept">
> <font size="2" color="black"
> face="verdana">Reject</font>
> <input type="radio" name="confirmpo"
> id="rejectpo" value="reject" checked>
> </td>
> <td style="text-align: left;vertical-align:
> text-top;" >
> <font size="2" color="#800000"><b>Upload
> Proforma Invoice:<span>*</span></b></font>
> <input type="file" name="uploadPI" value="">
> </td>
> </tr>
> <tr>
> <td colspan="2">
> Comment:<br/> <textarea name="comment"
> style="width:80%"></textarea>
> </td>
> </tr>
> <tr>
> <td style="text-align: center;vertical-align:
> text-top;" colspan="2">
> <input type="submit" name="submit"
> value="Submit">
> </td>
> </tr>
> </table>
> </div>
> </div>
> <div dojoType = "dijit.layout.ContentPane" region = "bottom" style
> = "height:2%; border:0px;" href="footer.html"></div>
> </div>
> </body>
> </html>
> ---------------------------------------------------------------------------------------------------
>
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://docs.dojocampus.org
> Dojo-interest at mail.dojotoolkit.org
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-interest/attachments/20091109/3262c72f/attachment.htm
More information about the Dojo-interest
mailing list