Problem in container page

[Amit]

Hi,
i have used Splitter control in a aspx page. and aspx page hosted with in the i frame.
when i run the app then scroll appear in iframe, while i have divided Red pane in two part
75% and 25%, but scroll appear why does scroll come in iframe?
i have seen that RedPane auto generate pane width in pixals , that may be issue, i am not sure but can any one help me?
CSS Used:

 .divRow
    {
      width: 99%;
      padding: 10px;
      display: block;
    }
    .divColumnLeft
    {
      float: left;
      margin: 2px;
    }
    .divColumnRight
    {
      float: right;
      margin: 2px;
    }
    label
    {
      vertical-align: middle;
    }
    .inutTextCtrl
    {
      width: 95%;
    }
    .panelHeight
    {
      min-height: 500px;
      height: 100%;
    }
    .splitterBarWidth
    {
      width: 1%;
      min-width: 4px;
    }

Parent aspx page:
 <div style="width: 100%; overflow: hidden;">
    <div class="divColumnLeft" style="width: 12%; float: left; height: 100%;">
      <asp:Menu ID="tabsMenu" runat="server" Orientation="Vertical" StaticEnableDefaultPopOutImage="False"
        CssClass="vTabMenu" DynamicSelectedStyle-CssClass="vTabActiveStyle" OnMenuItemClick="Menu1_MenuItemClick"
        StaticMenuItemStyle-CssClass="vTabInActiveStyle">
        <Items>
          <asp:MenuItem Text="My List" Value="0" />
          <asp:MenuItem Text="My Info" Value="1" Selected="true" />
        </Items>
      </asp:Menu>
    </div>
    <div class="divColumnLeft" style="width: 88%; float: right; min-height: 510px;">
      <iframe id="iFrameIssueTracker" runat="server" clientidmode="Static" width="100%;"
        height="510" src="MyMaster.aspx"></iframe>
    </div>
  </div>

Child Page MyMaster.aspx

<div style="width: 100%; height: 100%; min-height: 550px;">
    <div style="width: 100%;">
      <h4>
        List
      </h4>
    </div>
    <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical" Width="100%"
      Height="100%">
      <telerik:RadPane ID="RadPane2" CssClass="panelHeight" MinWidth="550" runat="server"
        Width="65%">
        <div style="width: 96%; overflow: hidden;">
          <div class="divRow">
            <div class="divColumnLeft" style="width: 8%;">
              <label>
                Project</label>
            </div>
            <div class="divColumnLeft" style="width: 34%;">
              <asp:DropDownList ID="PListVal" CssClass="inutTextCtrl" runat="server">
                <asp:ListItem Text="First" />
                <asp:ListItem Text="Second" />
              </asp:DropDownList>
            </div>
            <div class="divColumnLeft" style="width: 17%;">
              <asp:DropDownList ID="ByVal" CssClass="inutTextCtrl" runat="server">
                <asp:ListItem Text="To" />
                <asp:ListItem Text="By" />
              </asp:DropDownList>
            </div>
            <div class="divColumnLeft" style="width: 31%;">
              <asp:DropDownList ID="ListVal" Width="100%" runat="server">
                <asp:ListItem Text="User" />
                <asp:ListItem Text="gned" />
              </asp:DropDownList>
            </div>
            <div style="min-width: 5%;" class="divColumnRight">
              <asp:Button ID="btnS" Text="Go"  runat="server" />
            </div>
          </div>
          <div class="divRow">
            <div style="width: 8%;" class="divColumnLeft">
              <label>
                Action</label>
            </div>
            <div style="width: 34%;" class="divColumnLeft">
              <asp:DropDownList ID="ActionListVal" runat="server" CssClass="inutTextCtrl">
                <asp:ListItem Text="Choose Action for this itesss..." />              
              </asp:DropDownList>
            </div>
            <div style="width: 17%;" class="divColumnLeft">
              <div style="display: inline-block;">
                <div class="truncate-name">
                  <asp:Button ID="btnA" runat="server" Text="Go" /></div>
                <label>
                  Filter</label>
              </div>
            </div>
            <div style="width: 31%;" class="divColumnLeft">
              <asp:TextBox ID="txtVal" runat="server" Width="100%" />
            </div>
            <div style="min-width: 5%;" class="divColumnRight">
              <asp:Button ID="Button1" Text="Go"  runat="server" /></div>
          </div>
        </div>
        <telerik:RadGrid ID="ListRadGrid" AutoGenerateColumns="false" AllowPaging="True"
          AllowSorting="True" runat="server" ShowGroupPanel="true" BorderStyle="Solid">
          <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" Height="100%" />
          <GroupingSettings CaseSensitive="false" />
          <MasterTableView TableLayout="Fixed">
            <Columns>
              <telerik:GridTemplateColumn HeaderStyle-Width="50" HeaderStyle-HorizontalAlign="Center"
                ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                  <asp:CheckBox ID="chkRedCheckBox" runat="server" ClientIDMode="Static" />
                </ItemTemplate>
                <HeaderTemplate>
                  <asp:CheckBox ID="RedCheckBoxHeader" runat="server" ClientIDMode="Static" />
                </HeaderTemplate>
              </telerik:GridTemplateColumn>
              <telerik:GridBoundColumn Resizable="true" HeaderText="ID1" DataField="Row1"
                UniqueName="Row1" SortExpression="Row1" HeaderStyle-Width="60px" FilterControlWidth="30px"
                AutoPostBackOnFilter="true" CurrentFilterFunction="equalto" ShowFilterIcon="false" />
              <telerik:GridBoundColumn Resizable="true" HeaderText="E" DataField="E" UniqueName="E"
                AllowSorting="false" HeaderStyle-Width="50px" ShowFilterIcon="false" />
              <telerik:GridHyperLinkColumn Resizable="true" HeaderText="Attach" DataTextField="Attach"
                UniqueName="Attach" HeaderStyle-Width="100" NavigateUrl="#" ItemStyle-Wrap="false" />
              <telerik:GridHyperLinkColumn Resizable="true" DataTextField="Desc" NavigateUrl="#"
                HeaderText="Desc" HeaderStyle-Width="180" ItemStyle-Wrap="false" />
              <telerik:GridBoundColumn Resizable="true" HeaderText="Pr1" DataField="Pr1"
                UniqueName="Pr1" ItemStyle-Wrap="false" SortExpression="Pr1" FilterControlWidth="80px"
                HeaderStyle-Width="120px" />
              <telerik:GridBoundColumn Resizable="true" HeaderText="A1" DataField="A1" UniqueName="A1"
                SortExpression="A1" FilterControlWidth="80px" HeaderStyle-Width="60px" />
              <telerik:GridBoundColumn ItemStyle-Wrap="false" Resizable="true" HeaderText="To"
                DataField="AssignTo" UniqueName="To" SortExpression="To" FilterControlWidth="120px" />
              <telerik:GridBoundColumn HeaderText="Id" Resizable="true" DataField="Id" UniqueName="Id"
                 FilterControlWidth="80px" Visible="false" HeaderStyle-Width="120px" />
            </Columns>
          </MasterTableView>
          <ClientSettings>
            <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="false"
              AllowColumnResize="True"></Resizing>
          </ClientSettings>
        </telerik:RadGrid>
        <div style="width: 95%;">
          <div class="divRow">
            <div style="width: 8%;" class="divColumnLeft">
              <label>
                Action</label>
            </div>
            <div style="width: 34%;" class="divColumnLeft">
              <asp:DropDownList ID="DropDownList1" runat="server" CssClass="inutTextCtrl">
                <asp:ListItem Text="Choose Action for 234344..." />
              </asp:DropDownList>
            </div>
            <div style="width: 17%;" class="divColumnLeft">
              <div style="display: inline-block;">
                <div class="truncate-name">
                  <asp:Button ID="Button2" runat="server" Text="Go" /></div>
                <label>
                  Filter</label>
              </div>
            </div>
            <div style="width: 31%;" class="divColumnLeft">
              <asp:TextBox ID="TextBox1" runat="server" Width="100%" />
            </div>
            <div style="min-width: 5%;" class="divColumnRight">
              <asp:Button ID="Button3" runat="server" />
            </div>
          </div>
        </div>
      </telerik:RadPane>
      <telerik:RadSplitBar ID="RadSplitBar3" CssClass="splitterBarWidth" CollapseMode="Backward"
        runat="server" />
      <telerik:RadPane ID="RadPane3" runat="server" Collapsed="true" CssClass="panelHeight"
        MaxWidth="255" Width="34%">
        <div style="padding-top: 62px; height: 100%;">
          <asp:Chart ID="Chart2" runat="server" BorderlineColor="#B3AEB3" BorderlineDashStyle="Solid"
            BackColor="#EAEAEA" Width="250px" Height="393px">
            <Titles>
              <asp:Title Name="Title1" Text="My ABS Alignment="TopCenter" Font="Verdana, 12pt, style=Bold">
              </asp:Title>
            </Titles>
            <Series>
              <asp:Series Name="Series1" CustomProperties="DrawingStyle=Pie,
                                 PieDrawingStyle=Concave, MaxPixelPointWidth=50" ShadowOffset="2"
                ChartType="Pie" IsValueShownAsLabel="True">
              </asp:Series>
            </Series>
            <ChartAreas>
              <asp:ChartArea Name="ChartArea1" BorderDashStyle="NotSet" BackColor="#EAEAEA">
                <AxisX>
                  <MajorGrid Enabled="False" />
                </AxisX>
              </asp:ChartArea>
            </ChartAreas>
          </asp:Chart>
          <div style="padding-top: 7px;">
            <div class="divColumnLeft">
              <asp:Button ID="btnLessTenDays" runat="server" Text="< 1B Desc" />
            </div>
            <div class="divColumnLeft">
              <asp:Button ID="btnTenToTwentyDays"  runat="server" Text="ABSD Dsds" />
            </div>
            <div class="divColumnLeft">
              <asp:Button ID="btnGreaterTwentyDays"  runat="server" Text="A My Iiii />
            </div>
          </div>
        </div>
      </telerik:RadPane>
    </telerik:RadSplitter>
  </div>

[Dobromir]

Hi Amit,

The scroll bar that appears inside the <iframe> is caused by structure of the page loaded inside, more specifically, because of the <div> element that is a sibling to the splitter.

In cases where you need to have RadSplitter with variable height (height in percents) and additional content above and / or bellow the splitter you can either use one of the following approaches:

1. Use additional splitter as wrapper to separate the main splitter and the additional content in different panes.
2. Set RadSplitter's HeightOffset property to value that is the combined height of all additional content.

Regards,
Dobromir
the Telerik team

[Amit]

Thanks for reply.

Can you show me any small example?

Thanks.

[Dobromir]

Hi Amit,

I have prepared a sample page demonstrating both approaches described in my previous reply. Please find it attached.

All the best,
Dobromir
the Telerik team