splitter with splitbar and now scrolling

4 posts, 0 answers
  1. appdev
    appdev avatar
    223 posts
    Member since:
    Sep 2008

    Posted 10 Apr 2009 Link to this post

    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.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Apr 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. appdev
    appdev avatar
    223 posts
    Member since:
    Sep 2008

    Posted 11 Apr 2009 Link to this post

    nothing in that post seems to fix my problem.
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Apr 2009 Link to this post

    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.
Back to Top