splitter with splitbar and now scrolling

[appdev]

i have a splitbar inside a splitter. because my table has like 40 columns the splitter automatically set scrollbar to both horizontal and vertical. i don't want this to happen. i want the height and width to set to 100%. i don't want to have scrollbar inside scrollbar. how do i disable that function so the only scroll bar i have left is the one on the browser. thanks.

[Svetlina Anati]

Hi Duy,

In order to remove the splitter's scrollbars and leave only the browser's ones, you can use its client-side API and resize it according to its content. A similar KB article which you can use as a start point is available below:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[appdev]

nothing in that post seems to fix my problem.

[Tsvetie]

Hi Duy,
There are two requirements in your first post that contradict themselves, namely:

• You want the RadSplitter to be 100% of the width and height of the browser window
• You do not want the splitter to display scrollbars

Let me explain in detail why exactly those two contradict each other. When you configure a control to occupy 100% of the width and height of its parent, in order for this element to respect those settings (e.g. its content should not stretch it), you have to apply overflow to that element as well. That is, how the element would handle the case when the height/width of its content exceeds its own height/width. The cases are:

1. overflow:auto - Display scrollbars when necessary - that is exactly what a RadPane does.
2. overflow:scroll - Always display scrollbars - no matter if the content overflows the element
3. overflow:hidden - This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region - you can do this by setting Scrolling="None" for the RadPane
4. overflow:visible - This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

Please refer to the W3 site for additional information on the overflow CSS property.

That is why, in case you do not want the element to display scrollbars and be 100% wide and high, the only setting that you can use is overflow:hidden (Scrolling=None). However, I do not suppose that you would like to clip the content in the RadPanes.

That is why, you have to decide which configuration you would like to use for the RadSplitter:

1. Width=100%, Height=100% and the RadPanes would display scrollbars when necessary
2. Calculate the Height of the RadSplitter based on the height of its content and set that value as Height for the splitter as mentioned in the article that my colleague provided http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx

In case I have misunderstood your scenario, please provide detailed information on your setup and on the expected result. It would be best if you could send us a simple running project, demonstrating your setup as well.

Greetings,
Tsvetie
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.