Problem in container page

4 posts, 0 answers
  1. Amit
    Amit avatar
    2 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2012 Link to this post

    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>

  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 28 Mar 2012 Link to this post

    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
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amit
    Amit avatar
    2 posts
    Member since:
    Mar 2012

    Posted 28 Mar 2012 Link to this post

    Thanks for reply.

    Can you show me any small example?

    Thanks.
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 30 Mar 2012 Link to this post

    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
    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 their blog feed now.
Back to Top