Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Damian Crawford
3760
Scrollbars problems for Grid when placed inside web tab
posted

Hi all,

I am experiencing a problem with the scrollbars of a page where I have webhierarchical datagrid placed inside a webtab.

The grid's horizontal scrollbar never seems to be visible. One is still able to scroll by holding in the mouse scroll button, but this is not the expected nor the required behavior.

I have included an example of the behavior I am experiencing.

 

What I would like to know is if it will be possible, based on the supplied sample to disable the webtab scrollbars, but have the grid make its scrollbars visible if/and when required based on the browser window size.

I have implemented a fix suggested in one of the blogs by wrapping the grid in a div and specifying some of the style properties, but this has not resolved the issue.

I have also tried the grid and webtab clientside properties for height and width, but this has not yielded and successful results.

My environment is as follows:

 VS2010

IE9

Widows 7 32 bit.

Infragistics ASP.Net Version 11.2.20112.2086

.Net 4

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

 

Regards.

Whdg_WebTab_Scrollbar.zip
  • 24497
    posted

    Hi JJB,

    I looked at your sample, but could not run it, because of missing resources and other files. But that is ok and probably not related to your question.

    If you set ScrollBars="Hidden", then WebTab should not generate scollbars. I think that scrollbars are coming from
    <div id="divWhdg" style="height:100%; width:100%; overflow:auto; position:relative;">

    In your sample tabItem besides divWhdg also has another child GridPager. If that control generates visible content, then you should not use hard coded % height for divWhd. Because that div (and hGrid as well) will take height of their ContentTabItem container and overall height of tab-content will be actual height of tabItem + heightOfGridPager.

    I suggest you to use any browser tool (like Developer tools in IE9), which allows to select html element, check its styles/bounds/attributes, modify attributes and see effect of your changes.

    You also may temporary set visible markers for various elements in your application, in order to better see their bounds. For example,
    <div id="divWhdg" style="height:100%; width:100%; border:2px solid red; overflow:auto; position:relative;">

    If you remove GridPager and set height/width of divWhdg to 95...99%, then it should solve problem with undesired scrollbars and scrollbars of hGrid should work correctly.

    You also may consider to remove divWhdg and use built-into tabItem position:relative:

    <ig:ContentTabItem runat="server" EnableRelativeLayout="true" Text="Web Hierarchical DataGrid" ScrollBars="Hidden" AutoSize="NotSet">