|
scrollbar issue
|
View:
New views
12 Messages
—
Rating Filter:
Alert me
|
 |
scrollbar issue
by Vishwajeet Borade
::
Rate this Message:
Hi,
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; -------------------- _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Vishwajeet Borade
::
Rate this Message:
My HTML screens in question have been designed using DOJOI 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. DOJO please fix this for us. I will be really thankful. _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Bill Keese-2
::
Rate this Message:
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@...> wrote:
_______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Vishwajeet Borade
::
Rate this Message:
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. 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@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Bill Keese-2
::
Rate this Message:
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@...> wrote:
_______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Vishwajeet Borade
::
Rate this Message:
You've got a BorderContainer sized to fit the viewport: I am really sorry for engaging dojo-community for such a trivial looking problems. Before posting any threads here I always ensure that the problem I am facing is indeed a problem. I write smaller test cases to reproduce the same problems and to try and see if it can resolved by trying various alternative ways. I do lot of net searching as well and if problem still persists I take recourse to dojo-community. In this case I have tried setting 'BorderContainer's' height attribute to various values including 100%, 'auto' and not mentioning this attribute at all. But nothing helps. It works fine in Internet Explorer but not in Firefox. So what could be the best approach? Even a vague or remote pointer would help. Thanks a lot in advance. _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Bill Keese-2
::
Rate this Message:
I don't understand, what is it supposed to look like? Where exactly do you want a scrollbar to appear? On the ContentPanes inside of the BorderContainer? Or on the browser itself?
On Mon, Nov 9, 2009 at 10:49 PM, Vishwajeet Borade <Vishwajeet.Borade@...> wrote:
_______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Vishwajeet Borade
::
Rate this Message:
I don't understand, what is it supposed to look like? Where exactly do you want a scrollbar to appear? On the ContentPanes inside of the BorderContainer? Or on the browser itself?I need a vertical scrollbar to appear on the browser itself. In case of standard HTML code, without using any of DOJO API features, whenever content rendered in the browser window exceeds its size, say height, a vertical scrollbar appears on the right hand side of window. We don't have to take any special care for this to happen; it just happens automatically. I want to simulate exactly the same feature in my pages. In my case I am dividing BorderContainer in three regions, top, center and bottom. Motive is to position a fixed header and footer in top and bottom regions respectively while other HTML code like FORM elements and grid etc goes in the center region. Now my content exceeds browser window size and spans over almost 2-3 windows vertically. I want user to have a vertical scrollbar to be displayed on the right side of main browser window. Initially I didn't mention BorderContainer's 'height' attribute at all but it displays me blank screen while setting height attribute to '100%' doesn't show a scroll bar. I need to click somewhere on the screen and then use 'page up' and 'page down' keys to see the hidden content below. I hope I make my point clear. Thanks. _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Dustin Machi-2
::
Rate this Message:
You should take a look at the BorderContainer docs and examples. The
border container is a layout widget which is designed to control the layout and sizing of its children instead of the browser viewport growing to the size of the content. Using a bordercontainer in your case would put a header at the top and a footer at the bottom of the visible screen (regardless of its size), and the center "content" are will be variable sized. It would be this area only that scrolls, not the entire browser window. here is the test page for the normal use case of the 'full screen' border container, http://archive.dojotoolkit.org/nightly/checkout/dijit/tests/layout/test_BorderContainer_full.html . There are no browser scroll bars, only the area in the middle would scroll (if there was enough content in there). Dustin On Nov 10, 2009, at 1:08 AM, Vishwajeet Borade wrote: > Hi, >> I don't understand, what is it supposed to look like? Where >> exactly do you want a scrollbar to appear? On the ContentPanes >> inside of the BorderContainer? Or on the browser itself? > I need a vertical scrollbar to appear on the browser itself. > > In case of standard HTML code, without using any of DOJO API > features, whenever > content rendered in the browser window exceeds its size, say height, > a vertical > scrollbar appears on the right hand side of window. We don't have > to take any > special care for this to happen; it just happens automatically. > I want to simulate exactly the same feature in my pages. > In my case I am dividing BorderContainer in three regions, top, > center and bottom. > Motive is to position a fixed header and footer in top and bottom > regions respectively > while other HTML code like FORM elements and grid etc goes in the > center > region. Now my content exceeds browser window size and spans over > almost 2-3 > windows vertically. I want user to have a vertical scrollbar to be > displayed on > the right side of main browser window. > Initially I didn't mention BorderContainer's 'height' attribute at > all but it displays me blank screen while > setting height attribute to '100%' doesn't show a scroll bar. I need > to click somewhere on the > screen and then use 'page up' and 'page down' keys to see the hidden > content below. > > I hope I make my point clear. > Thanks. > > > > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Vishwajeet Borade
::
Rate this Message:
You should take a look at the BorderContainer docs and examples. The border container is a layout widget which is designed to control the layout and sizing of its children instead of the browser viewport growing to the size of the content. Using a bordercontainer in your case would put a header at the top and a footer at the bottom of the visible screen (regardless of its size), and the center "content" are will be variable sized. It would be this area only that scrolls, not the entire browser window. here is the test page for the normal use case of the 'full screen' border container, http://archive.dojotoolkit.org/nightly/checkout/dijit/tests/layout/test_BorderContainer_full.html . There are no browser scroll bars, only the area in the middle would scroll (if there was enough content in there). Thanks a lot for this enlightenment. I am really sorry if my earlier explanation gave the impression that I wanted the vertical scrollbar to appear over all of the browser window. I always wanted the header and footer to stand still and center portion to have a scrollbar enabled navigation. and I was failing to achieve exactly that. finally, I went through the link provided by you and just copied the CSS portion of the sample code there to my page and it worked wonders. ------------------ html, body, #container { width: 100%; /* make the body expand to fill the visible window */ height: 100%; overflow: hidden; /* erase window level scrollbars */ padding: 0 0 0 0; margin: 0 0 0 0; font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif; } ---------------------------- A newbie wouldn't know that he has to set these CSS properties for a BorderContainer to be able to use scrollbars. :-) Or is that these CSS properties are already set in the standard CSS files shipped with DOJO? If that was the case my code should have worked at the first go. Vertical scrollbar is now visible in my pages. But I am staring at a new problem now. Only small part of vertical scrollbar is visible now and one would face lot of difficulty in noticing and using it. Setting 'width' property to any value less than 100% creates lot of empty space on either sides but scrollbar is still only partially visible. Even playing with 'padding' and 'margin' values didn't help. over to the dojo-community again. Thanks a lot. _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Peter E Higgins-2
::
Rate this Message:
Vishwajeet Borade wrote:
> > finally, I went through the link provided by you and > just copied the CSS portion of the sample code there to my page > and it worked wonders. > ------------------ > html, body, #container { > width: 100%; /* make the body expand to fill the > visible window */ > height: 100%; > overflow: hidden; /* erase window level scrollbars */ > padding: 0 0 0 0; > margin: 0 0 0 0; > font: 10pt > Arial,Myriad,Tahoma,Verdana,sans-serif; > } > ------------ This is literally the first thing documented about borderContainer @ http://docs.dojocampus.org/dijit/layout/BorderContainer#setting-sizes The only required part is the width/height, which is just a CSS-ism relating to the way percentage sizes work in the browser. From link: note: In order to set the overall size of a BorderContainer to the full size of the viewport, the <body> element needs an explicit size set as well as a size on the BorderContainer itself: <style type="text/css"> body, html { width:100%; height:100%; margin:0; padding:0 } #borderContainer { width:100%; height:100% } </style> Otherwise, the computed style of the BorderContainer will report 0 rather than the browser-calculated size of the viewport. Regards, Peter -- Peter E Higgins Dojo Project Lead : http://dojotoolkit.org _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
|
|
Re: scrollbar issue
by Vishwajeet Borade
::
Rate this Message:
Peter E Higgins wrote:
Vishwajeet Borade wrote: Thanks Peter, Sorry to have not gone through the suggested examples earlier. Surely it would have saved lot of time of community to be used to address other issues. |Vertical scrollbar is now visible in my pages. |But I am staring at a new problem now. Only small part of vertical scrollbar |is visible now and one would face lot of difficulty in noticing and using it. |Setting 'width' property to any value less than 100% creates lot of empty |space on either sides but scrollbar is still only partially visible. |Even playing with 'padding' and 'margin' values didn't help. Do someone have any inputs regarding my other problem listed above? Thanks. _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest |
| Free embeddable forum powered by Nabble | Forum Help |
