Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Increase/Decrease <div> height to fit in a page

    Frens ,
    i dint have time to go through all posts. i wish someone can help me with this.
    1.) i have a page default.aspx with three <div> tags each containing one ASP.Net Controls. namely FavoriteTree,NavigationTree and NavigationTabs.the page width is set to 100%.
    2.)I am calling this page in a left navigation frame. who has scrolling=no;
    3.)Now the problem is;everything is getting populated from database, when navtabs are more, then content is overflowing and becomes invisible. what i want to achieve is Favorites div tag should have some fixed size, navtree div tag and navtabs div tag should be resizable based on navtabs size.
    If NavTabs height is more, then navtree should become less in height and if navtabs height is less then navtree should accumulate the height. but all content should fit in that frame, nothin should b overflow.
    you can see Ms Outlook for this. when u scroll tabs then navtree size become bigger/shorter..i want the same behaviour.
    How should i manipulate height of <div> to achieve this.

    I hope i was clear.
    pls help me with this. its urgent.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    We need to see some code or better yet, a link to the page.
    .
    .

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Frend, this is code for default.aspx page.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function resize_nav()
    {
    //var tabs,navtree,navtab,fav;
    //tabs = document.getElementById('div1').offsetHeight;
    //tabs2 = document.getElementById('div2').offsetHeight;
    //var hght;
    //hght = document.getElementById('div1').style.height + //document.getElementById('div3').style.height;document.getElementById('div2').style.height //= window.screen.height - hght ;
    //alert(totalhght );
    }
    </script>
    </head>
    <body dir="rtl" style="margin: 0px; height:100%;width:100%;padding:0px;" scroll="no" onload='resize_nav()'>
    <form id="form1" runat="server" style="margin: 0px;height:100%;width:100%">
    <div id=div1 style="margin: 0px;height:100%;width:100%">
    <div style="height: 100px; width: 100%;">
    <radP:RadPanelbar ID="uxFavoritesPanelBar" runat="server" Width="100%" SkinID="panelHeader">
    <ItemTemplate>
    <radT:RadTreeView ID="uxFavoritesTreeView" runat="server" Skin="rtl" Height="100px"
    Width="100%">
    </radT:RadTreeView>
    </ItemTemplate>
    </radP:RadPanelbar>
    </div>
    <div id=div2 style="min-height: 200px; width: 100%;">
    <radP:RadPanelbar ID="uxNavPanelBar" runat="server" Height="200px" Width="100%" SkinID="panelHeader">
    <ItemTemplate>
    <radT:RadTreeView ID="uxNavTreeView" runat="server" Skin="rtl" Width="100%" Height="200px"
    OnNodeClick="uxNavTreeView_NodeClick">
    </radT:RadTreeView>
    </ItemTemplate>
    </radP:RadPanelbar>
    </div>
    <div id=div3 style="width: 100%;">
    <radP:RadPanelbar ID="uxMainPanelBar" runat="server" Width="100%"
    OnItemClick="uxMainPanelBar_ItemClick" ExpandMode="SingleExpandedItem" />
    </div>
    </div>
    </form>
    </body>
    </html>

    i hope this helps.
    I am using IE6
    and problem still not solved. i am trying to write some javascript ,but not working.
    awaiting reply
    thanks

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    We need to see the generated HTML. That means without the ASP stuff.

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i cant show exactly the generated output bcoz it contains lots of viewstate value.so it will become difficult to analyse.
    i have three div tags which has some controls ..who are dynamically populated from DB. so depending upon div3 control's height,set div3's height. and modify div2's height.
    pls help

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function resize_nav()
    {
    //var tabs,navtree,navtab,fav;
    //tabs = document.getElementById('div1').offsetHeight;
    //tabs2 = document.getElementById('div2').offsetHeight;
    //var hght;
    //hght = document.getElementById('div1').style.height + //document.getElementById('div3').style.height;document.getElementById('div2').style.height //= window.screen.height - hght ;
    //alert(totalhght );
    }
    </script>
    </head>
    <body dir="rtl" style="margin: 0px; height:100%;width:100%;padding:0px;" scroll="no" onload='resize_nav()'>
    <form id="form1" runat="server" style="margin: 0px;height:100%;width:100%">
    <div id=div1 style="margin: 0px;height:100%;width:100%">
    <div style="height: 100px; width: 100%;">
    </div>
    <div id=div2 style="min-height: 200px; width: 100%;">
    </div>
    <div id=div3 style="width: 100%;">
    </div>
    </div>
    </form>
    </body>
    </html>

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Please provide some fully functional example code that illustrates the problem. With that last piece of code you gave us all I see is a blank screen?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •