Nested splitter with margin control overlap

4 posts, 0 answers
  1. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 12 Aug 2013 Link to this post

    My code looks like this

    RadSplitter
       - RadPane Scrolling=none id=ParentPane
          - div style="margin: 10px"
             - RadTab
             - RadMultiPage height=350px
                -RadPageView
                   -RadSplitter height=350px
                        -RadPane
                        -RadPane

    The last RadSplitter/Panes in that nesting are running beyond the bounds of their parent and getting cropped (assume the cropping is because I have scrolling set to none) If I remove the margin: 10 and use padding instead it does the same thing ... overlaps. If I remove the margin/padding of 10px it fits fine ... Im just trying to create some space between the boundary of the ParentPane and the tab/multipage the tabs and pages seem to be respecting the boundary as I set background colors and they fit the space fine but the nested panes are overlapping. I want the widths to be flexible not fixed.
  2. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 15 Aug 2013 Link to this post

    Hi Sean,

    I am afraid that the provided information is not enough to determine what is causing the issue. Could you try to isolate the problem into a sample fully runnable project and send it so we could examine the exact markup? You can see how to do it in the following blog post: Isolating a problem in a sample project

    Looking forward to hearing from you,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 15 Aug 2013 Link to this post

    I've already refactored my design to accomodate the issue but in case someone else has the issue ... this is code from a blank project using NO internal stylesheets only the telerik defaults have attached a screenshot ....

    <div style="padding: 10px; background: lime; margin: 25px;">
    <telerik:radsplitter id="rspMain" runat="server">
       <telerik:radpane id="rpRoot" runat="server" backcolor="Lime" scrolling="None">
          <div style="margin: 10px; background:yellow">
             <telerik:radtabstrip id="rtsRoot" runat="server" multipageid="rmpmain">
                <tabs>
                   <telerik:radtab text="Tab One" />
                   <telerik:radtab text="Tab Two" />
                </tabs>
             </telerik:radtabstrip>
             <telerik:radmultipage id="rmpmain" runat="server" selectedindex="0">
                <telerik:radpageview id="pageone" runat="server">
                   <telerik:radsplitter id="splitter" runat="server">
                      <telerik:radpane id="rpone" runat="server">
                         <div style="background: fuchsia; padding: 10px;">
                            one
                         </div>
                      </telerik:radpane>
                      <telerik:radpane id="rptwo" runat="server">
                         <div style="background: orange; padding: 10px;">
                            two
                         </div>
                      </telerik:radpane>
                   </telerik:radsplitter>
                </telerik:radpageview>
                <telerik:radpageview id="pagetwo" runat="server">
                 
                </telerik:radpageview>
             </telerik:radmultipage>
          </div>
       </telerik:radpane>
    </telerik:radsplitter>
    </div>



  5. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 19 Aug 2013 Link to this post

    Hello Sean,

    The experienced behavior is caused by the fact the Splitter is taking 100% of the size of its parent Pane, so the size of the parent becomes 100%+the size of the margin/padding. You can overcome this situation by setting the Splitter's ResizeWithParentPane property to "False" and its Width and Height to "100%".
    <telerik:RadPageView ID="pageone" runat="server">
        <telerik:RadSplitter ID="splitter" runat="server" ResizeWithParentPane="false" Width="100%" Height="100%">
            ...
        </telerik:RadSplitter>
    </telerik:RadPageView>

    Additionally, I assume that the main Splitter in the provided code-snipet contains only one RadPane just for testing purposes, but I should mention that in order to behave correctly the Splitter must contain at least two RadPanes.

    You might also substract some pixels from the height of a Splitter, which size is configured in percentages by setting the desired value to its HeightOffset property. My suggestion, though, is to separate the TabStrip and the MultiPage into two separate RadPanes so the Splitter will handle the height recalculation by itself.

    I hope this information will be helpful for you.

    Regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top