Nested splitter with margin control overlap

[Sean]

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.

[Vessy]

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

[Sean]

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>

[Vessy]

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