Hi JJB,

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.

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.

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"

The grid and custom pager is contained inside a WebTab.

Please refer to the attached sample.

Could you please advise.

Regards.

Hello JJB,

If you need any further assistance with the matter, please do not hesitate to ask.

HI JJB,

Thank you for sample, I was able to run it and check its rendering.

Considering the layout of your application it will not be not possible to support requirements related to height and width. The WebTab and WebGrid generate html and may adjust it on client, but eventual rendering is defined by rules of browser. I suggest you keep in mind at least following few basic rules:
1. Heights of all elements with undefined style.height attribute are collapsed.
2. Percentage values of width/height of children are based on client size of parent excluding possible borders and paddings of children.
3. Heights of all block-child-elements are combined

Example:
If you have a container like DIV or TD, or SPAN, etc. which has actual (offset) height equals to 100px, and that container has 2 child DIVs, which have 1px borders, 3px padding and height of one child is 100% and height of the other child is 20px, then overall height of those 2 child DIVs will be equal to 100+1+1+3+3+20+1+1+3+3=136px.
If you want to stretch those 2 children to height of their parent, then for 2nd child you should use not height=100%, but height=64px or height=64%.

That is what I mentioned last time: you can not have 2 children where one of them has height=100%. If you want to stretch second child (grid) to the height of container with unknown/variable height then the only option is to use dynamic javascript calculation which keeps track on all resing events, measures clientHeight of parent, substructs height of top-child and sets calculated height to grid. That is actually what is done by WebTab for its child elements including content panes. It is ok to go that way, but that requires quite of efforts.

About adjustments for borders:
Since WebTab and grid by default have borders, usage of 100% for width and height in order to stretch them to the size of container can not be used. You have 3 choices:
1. remove all borders and padding from WebTab and grid (it will affect their appearance)
2. try to use something like 99-99.8%: experimental value to cover most-use cases for end users. That might create few pixel gaps on edges, but that is easiest solution.
3. process resize events and use dynamic calculated values. Example:
gridElem.style.width=containerOffsetWidth/(containerOffsetWidth+2) * 100 + "%"

About heights of parents:
In your sample all parents (html, body, form, TABLE with id=Table1, and TD container of WebTab do not have height, so they are collapsed. In this situation heights of WebTab and its child grid are not possible to maintain.
You may try to do following:
1. Add to head following: <style type="text/css">html,body,form{height:100%;}</style>
2. Add to Table2 following: <table id="Table1" style="height:100%;" ...>
3. Add to TD container of WebTab following: <td style="height:100%;">

If you need custom pager, then it is almost equivalent to writng a new control and requires javascript adjustments to layout. You might wrap your pager and grid into DIV, add javascript logic to dynamically adjust widths of pager and grid to DIV.clientWidth and height of grid to (DIV.clientHeight-pager.offsetHeight)+"px". In this case if that DIV is the only child in tabItem, then you may apply style.height=100% to that DIV.

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.

Regards.