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 JJB,
If you need any further assistance with the matter, please do not hesitate to ask.
Hello Nikolay/Viktor.
I have, based on Viktor's feedback a workable solution. Not perfect but we can work with it.
The issue I now have is that on load the horizontal scroll bar does not always appear, only after a
resize event. I do however call the resize client-side function on load to ensure that it fires.
The other issue which is intermittent in the sample, but is constant in my production app is that
the form will load and display the horizontal scroll bar, but the scrollbar is half way up the screen.
I have tried various approaches, but have not been able to resolve the issue.
The grid and custom pager is contained inside a WebTab.
Please refer to the attached sample.
Could you please advise.
It seems that this behavior is caused by the table, containing the WebTab. I suggest that you check the styling of this table or just remove it, as it has only one cell.
Please let me know if you have any further questions.
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.
Hello Nikolay,
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.
Please let me know if this helps.
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.