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.
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">
Hello Viktor,
Thank you for the reply and suggestions.
However I am still not getting the result I am looking for. I did see that I did not perhaps clarify the scenario enough.
In terms of the scrollbars, I only require scroll bars when the grid columns exceed the width of the browser window.
The webtab should fill 100% of the height of the form or control it is wrapped in, and the grid inside the tab should take up 100% the height inside the form/control it is wrapped.
I cannot remove the grid pager as that is an integral part of the grid navigation. We did try and use it inside the grid pager behaviour template, but this generated other problems with the grid and pager( and it's not relevant at the moment).
The grid pager should, with scrolling also fill the tab 100%, and not take up the initial width on load and when scrolling occurs leave blank space to the right of the pager control.
This is why the div wrapping the grid was introduced, both to allow for that, as well as it was a suggested Infragistics fix for the scroll bar problem.
I have re-attached the sample, with the resource files, etc. included.
I hope a have now clarified the requirement I am trying to implement.
I am currently working on a client-side work-around, but as this application depends on performance I do not want to add over-head if it is not necessary.
Hello Nikolay,
Please refer to my post in this blog on 05-10-2012 12:25 PM - as I have not had any reply regarding the post.
I tested your sample and I was able to reproduce the described issue under Chrome and Firefox. IE 9 displayed the scrollbar correctly. However, I would suggest you to set some width for Table1, because the WebTab have width="100%", which forces the control to take the whole width of its parent. For example:
<table id="Table1" runat="server" frame="void" cellspacing="0" cellpadding="0" style="table-layout: fixed;"
height="100%" width="100%">
<tr>
<td style="height:100%;" >
<ig:WebTab ID="WebTab1" runat="server" Height="100%" Width="100%"
EnableOverlappingTabs="True" DisplayMode="Scrollable">
...
Please let me know if this helps.
Hi Nikolay,
I have implemented the fix as suggested, but the problem as described is persisting.
Any other ideas?
Could you please attach a screenshot of what you are seeing, just to be sure I understand what’s wrong with the scrollbars. Here is what I see when I first run your project:
And after I add width=”100%” to Table1:
First off, have you tested with IE 9, as I specified my environment in the first post.
I see you are testing with Firefox - this will not be a "like for like" comparison.
Also, switch views using the dropdown in the custom pager, to get the behavior described.
Hello JJB,
I'm just checking if you have resolved your issues.
Can you please provide an isolated sample, separate from your project, demonstrating the issue. Also, please explain in more details what is the behavior you are experiencing and what do you want to accomplish, because I’m not sure I fully understand your requirements.
Thank you.
I have implemented your suggestion, but the issue is still persisting. Any other ideas?
I tested with IE9 but until now I have not noticed that sometimes after refreshing the page the scrollbar disappears. I would suggest you to add the following CSS rule to .igtab_THContent class: overflow: auto !important;. This seems to solve the issue.