Link to home
Get AccessLog in
Avatar of DJ_AM_Juicebox
DJ_AM_Juicebox

asked on

using a <div>

Hi,

I'm using some ASP.NET controls to make a simple web interface. I'm trying to stick a grid control inside a <div> but it seems to keep spilling outside of the <div> borders. Why is it doing this? Below is the exact code:

    <div id = "DivListSettings" style="left:20px; top:300px; height:200px; width:200px; border:1px solid black; position:absolute">    
        <radg:radgrid id="RadGrid1" runat="server" autogeneratecolumns="False" enableajax="True"
            gridlines="None" onneeddatasource="RadGrid1_NeedDataSource" BorderStyle="Solid" BorderWidth="2px" Height="60px" Width="263px">
            <ClientSettings>
                <Selecting AllowRowSelect="True"></Selecting>
                <Scrolling UseStaticHeaders="True" AllowScroll="True"></Scrolling>
            </ClientSettings>
            <MasterTableView>
                <Columns>
                    <radG:GridBoundColumn AllowSorting="False" UniqueName="column" HeaderText="Settings"></radG:GridBoundColumn>
                </Columns>
                <ExpandCollapseColumn Visible="False">
                    <HeaderStyle Width="19px"></HeaderStyle>
                </ExpandCollapseColumn>
                <RowIndicatorColumn Visible="False">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
            </MasterTableView>
        </radg:radgrid>
    </div>

I thought the radg:radgrid  control would be inside the top <div> It seems to follow the origin set by the div, but doesn't respect its boundaries.

Thanks
ASKER CERTIFIED SOLUTION
Avatar of G0ggy
G0ggy
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
Avatar of DJ_AM_Juicebox
DJ_AM_Juicebox

ASKER

so what do I do, get rid of the width attribute in the radg::radgrid?

Expand the div so it can encompass your grid.
sorry can you tell me how to do that, I am quite the novice at web dev.
i mean rather - i'd always like the grid to occupy the exact area the <div> allows - so I can always control its appearance through the <div> width and height attributes.
Change

<div id = "DivListSettings" style="left:20px; top:300px; height:200px; width:200px; border:1px solid black; position:absolute">  

To

<div id = "DivListSettings" style="left:20px; top:300px; height:200px; width:270px; border:1px solid black; position:absolute">  

Be aware that this may affect the alignment of other objects in your web page.
Hi G0ggy,

Well the width works fine - it will clip the child radgrid control properly. Still the height has a mind of its own. It continues to spill outside of the <div>. I set the height of the rad grid to 100px, the div 200px, and still it just makes itself about 380px.

Avatar of under_dog
perhaps what you are after is an overflow:

<div id = "DivListSettings" style="left:20px; top:300px; height:200px; width:270px; border:1px solid black; position:absolute; overflow: auto;">
ah it turns out this 3rd party control had some other attribute called scroll height which somehow overrode everything else.
LOL - damn them 3rd party controls!