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>
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>