Infragistics Forums

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,

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

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>

</igtbl:UltraGridColumn>

<Header Caption="Details">

</Header>

<RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo>

</Footer>

</igtbl:UltraGridColumn>

<Header Caption="Date">

</Header>

<RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo>

</Footer>

</igtbl:UltraGridColumn>

<Header Caption="User">

</Header>

<RowLayoutColumnInfo OriginX="4"></RowLayoutColumnInfo>

</Footer>

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

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.

Where i can Use that property

ContentPane.EnableRelativeLayout=true.

There is no property in ContentPane Attruibute.  and then The Next Step

 <ContentTemplate>
 <div style="width:100%;height:100%;position:relative;overflow:auto;">
   ...
 </div>
</ContentTemplate>

This Coding also not responding .. same output only shows

Hi Ravikumar,

Below is aspx with 2 tabs which show both ways. Any of them should fix overflow problem, though, the EnableRelativeLayout is preferrable.

<igtab:UltraWebTab ID="UltraWebTab1" runat="server">
  <Tabs>
   <igtab:Tab Text="New Tab">
     <ContentPane EnableRelativeLayout="True"></ContentPane>
     <ContentTemplate>
       <table></table>
     </ContentTemplate>
   </igtab:Tab>
   <igtab:Tab Text="New Tab">
      <ContentTemplate>
        <div style="width:100%;height:100%;position:relative;overflow:auto;">
           <table></table>
       </div>
     </ContentTemplate>
   </igtab:Tab>
  </Tabs>
</igtab:UltraWebTab>

Hi viktor,

I have tried the coding which u have forwarded, but there was no such property called EnableRelativeLayout, Since I am using the Infragistics 2007 - Vol 3

plz give me the solution ASAP.

Regards,

Ravikumar