I have a webgrid in a webtab contentpane. But gridview always overflow outside of contentpane. I could not I fix it.
Could anyone tell what is missing?
Mz source code is:
<table id="tblMain" border="1" cellpadding="0" cellspacing="0" style="width: 100%; height: 600px; border: solid 1px LightBlue; table-layout: fixed;"> <tr> <td runat="server" id="tdTree" style="width: 300px; text-align: left; vertical-align: top; background-color: ButtonFace; height: 600px;"> <div id="divTree" style="overflow: auto; width: 300px; height: 600px; scrollbar-3dlight-color: Gray; scrollbar-arrow-color: Gray; scrollbar-track-color: lightsteelblue; scrollbar-darkshadow-color: Gray; scrollbar-face-color: lightsteelblue; scrollbar-highlight-color: Black; scrollbar-shadow-color: Black; border:none 0px ;"> <div style="padding-top: 5px; padding-left: 2px;"> <fieldset id="fldsNav" style="border: 0px; width: 100%; height: 100%; overflow: visible;"> <legend id="lgdNav" style="background-color: Silver; color: White; font-weight: bold; font-size: 11pt; padding-top: 1px; padding-left: 2px; padding-right: 2px; padding-bottom: 0px; border-left: solid 1px white; border-right: solid 1px white; border-top: solid 1px white; border-bottom: none;">Navigation Explorer</legend> <asp:UpdatePanel ID="upnNav" runat="server"> <ContentTemplate> //navigation items. </ContentTemplate> </asp:UpdatePanel> </fieldset> </div> </div> </td> <td id="tdMid" style="background-color: lightsteelblue; height: 600px; width: 6px"> </td> <td id="tdContent" style="height: 600px; vertical-align: top; text-align: left; background-color: gainsboro;"> <asp:UpdatePanel ID="upnTabs" runat="server"> <ContentTemplate> <igtab:UltraWebTab ID="uwtChilds" runat="server" EnableAppStyling="True" FixedLayout="false" Height="600px" Width="100%" OnTabClick="uwtChilds_TabClick" CustomRules=""> <Tabs> <igtab:Tab Text="test"> <ContentPane Scrollable="Auto"> </ContentPane> <ContentTemplate> <igtbl:UltraWebGrid ID="uwgContent" runat="server" EnableAppStyling="True" OnPageIndexChanged="uwgContent_PageIndexChanged"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout AllowColSizingDefault="Free" AllowColumnMovingDefault="OnClient" AllowSortingDefault="OnClient" BorderCollapseDefault="Separate" HeaderClickActionDefault="SortMulti" Name="ctl00xuwgContent" RowHeightDefault="20px" RowSelectorsDefault="No" ScrollBar="Never" SelectTypeRowDefault="Extended" StationaryMargins="Header" StationaryMarginsOutlookGroupBy="True" TableLayout="Fixed" Version="4.00" ViewType="OutlookGroupBy"> <FrameStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" CustomRules="position:relative;" > </FrameStyle> <Images ImageDirectory="~/appResource/Office2007Silver/WebGrid/"> </Images> <Pager AllowPaging="True" MinimumPagesForDisplay="2" PageSize="20" Alignment="Left"> <Style BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"><BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px"></BorderDetails></Style> </Pager> <EditCellStyleDefault BorderStyle="None" BorderWidth="0px"> </EditCellStyleDefault> <FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </FooterStyleDefault> <HeaderStyleDefault BackColor="LightGray" BorderStyle="Solid" HorizontalAlign="Left"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </HeaderStyleDefault> <RowStyleDefault BackColor="Window" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt"> <Padding Left="3px" /> <BorderDetails ColorLeft="Window" ColorTop="Window" /> </RowStyleDefault> <GroupByRowStyleDefault BackColor="Control" BorderColor="Window"> </GroupByRowStyleDefault> <GroupByBox> <Style BackColor="ActiveBorder" BorderColor="Window"></Style> </GroupByBox> <AddNewBox Hidden="False"> <Style BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px"><BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px"></BorderDetails></Style> </AddNewBox> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> <FilterOptionsDefault AllowRowFiltering="OnClient"> <FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Height="300px" Width="200px"> <Padding Left="2px" /> </FilterDropDownStyle> <FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"> </FilterHighlightRowStyle> <FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px"> <Padding Left="2px" /> </FilterOperandDropDownStyle> </FilterOptionsDefault> </DisplayLayout></igtbl:UltraWebGrid> </ContentTemplate> </igtab:Tab> </Tabs> </igtab:UltraWebTab> </ContentTemplate> </asp:UpdatePanel> </td> </tr> </table>
Hi,
If child controls (their html elements) overflow bounds of ContentPane, then it means that they use position:relative/absolute. That problem is mostly related to special features of IE. In order to keep IE happy, application may use ContentPane.EnableRelativeLayout=true. For older versions of UltraWebTab, application may fix that by inserting in content pane a relative wrapper DIV and move all old content inside of it.
<ContentTemplate> <div style="width:100%;height:100%;position:relative;overflow:auto;"> ... </div></ContentTemplate>
I am having a similar problem and the work around does not work.
I have a grid inside a tab contentpane and it overflows. I want the tab to add scroll bars when the grid overflows. The scrollbar adds successfully but the content still overflows.
The tab code and Grid are below.
<igtab:Tab Text="Log Details" meta:resourcekey="TabResource2">
<ContentPane runat="server" ID="ContentPane2" Scrollable="Scroll" >
</ContentPane>
</igtab:Tab>
And the Grid inside the EventLog control
meta:resourcekey="uwgEventLogResource1" >
<Bands>
<igtbl:UltraGridBand AllowAdd="No" AllowColSizing="Free" AllowColumnMoving="None" AllowDelete="No" AllowRowNumbering="None" AllowSorting="OnClient"
AllowUpdate="No" HeaderClickAction="SortMulti" RowSelectors="No" SelectTypeCell="None" SelectTypeCol="None" SelectTypeRow="None">
<Columns>
<Header Caption="EventId"></Header>
</igtbl:UltraGridColumn>
<Header Caption="Type">
</Header>
<RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo>
</Footer>
<Header Caption="Details">
<RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo>
<Header Caption="Date">
<RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo>
<Header Caption="User">
<RowLayoutColumnInfo OriginX="4"></RowLayoutColumnInfo>
</Columns>
<RowStyle Cursor="Hand" />
<RowTemplateStyle BackColor="Window" BorderColor="Window" BorderStyle="Ridge">
<BorderDetails WidthBottom="3px" WidthLeft="3px" WidthRight="3px" WidthTop="3px" />
</RowTemplateStyle>
<AddNewRow Visible="NotSet" View="NotSet"></AddNewRow>
</igtbl:UltraGridBand>
</Bands>
EnableInternalRowsManagement="True" BorderCollapseDefault="Separate" HeaderClickActionDefault="SortMulti" RowHeightDefault="20px"
RowSelectorsDefault="No" StationaryMargins="Header" StationaryMarginsOutlookGroupBy="True" TableLayout="Fixed" Version="4.00" >
<FilterOptionsDefault AllowRowFiltering="OnClient" AllString="(Alle)" ShowEmptyCondition="No" ShowNonEmptyCondition="No" RowFilterMode="AllRowsInBand">
<FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px"
CustomRules="overflow:auto;" Font-Names="Arial" Font-Size="10px" Width="100px" Cursor="Hand">
<Padding Left="2px" Top="0px" />
</FilterDropDownStyle>
<FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"></FilterHighlightRowStyle>
</FilterOptionsDefault>
<GroupByBox Hidden="True">
<Style BackColor="ActiveBorder" BorderColor="Window"></Style>
<boxstyle backcolor="ActiveBorder" bordercolor="Window">
</boxstyle>
</GroupByBox>
<FrameStyle BorderColor="Silver" BorderStyle="Solid" Font-Names="Arial" Font-Size="12px" BorderWidth="1px">
<BorderDetails ColorBottom="Silver" ColorLeft="Silver" ColorRight="White" ColorTop="Silver" />
</FrameStyle>
<HeaderStyleDefault BackColor="WhiteSmoke" BorderStyle="Solid" HorizontalAlign="Left">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</HeaderStyleDefault>
<RowStyleDefault BackColor="Window" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt">
<Padding Left="3px" />
<BorderDetails ColorLeft="Window" ColorTop="Window" />
<GroupByRowStyleDefault BackColor="Control" BorderColor="Window">
</GroupByRowStyleDefault>
<activationobject bordercolor="" borderwidth="">
</activationobject>
</igtbl:UltraWebGrid>
That happens because grid uses position:relative for its html elements.
The latest version (hot fixes) of UltraWebTab has new property ContentPane.EnableRelativeLayout. That will fix your problem. Otherwise, you need to insert into ContentTemplate
<div style='width:100%;height:100%;position:relative;'>...</div>
and move all your content into that div (replace ...)