[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>&nbsp;</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> &nbsp;</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">&nbsp;&nbsp;&nbsp;
>                             <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