Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Kevin O'Neal
508
Change WebTab height dynamically using javascript/jQuery
posted

We have one WebTab and inside one tab we have a child page, which has a asp dropdownlist and a table. Now on change of the dropdown values we are hiding/showing one of the table rows on client side in a external js file. Now the issue is that when the tab loads with the table row opened and then we hide the row on change of the drop down, after that we are getting a huge white space inside the tab. This is happening since the webtab height remains the same as it was onload, but the content height inside the tab has decreased, due to hiding the table row.

Could someone please help us and let us know, how we can set the webtab height based on the content height inside the WebTab using javascript/jQuery?

Parents
No Data
Reply
  • 20255
    Offline posted

    Hello,

     Thank you for using our forum!

     After a little investigation, I find a way to accomplish your requirement with a simple css only, without JavaScript. You need to set Height="" to your WebTab control and also use css to force auto-sizing when you hide rows (height: auto !important;). In your ig_res folder find ig_webtab.css and change the .igtab_THContentHolder like I show you below.

    Code snippet:

    <ig:WebTab ID="WebTab1" runat="server" Width="300px" Height="">
                    <Tabs>
                        <ig:ContentTabItem runat="server" Text="Tab 1">
                            <Template>
                                <input id="actionBtn" type="button" value="Hide" />
                                <table id="table" style="width: 100%;">
                                    <tr>
                                        <td style="width: 25%">1td>
    ..................

    .igtab_THContentHolder
    {
        border:1px solid #4679A6;
        border-top-width:0px;
        height:auto !important;
        overflow:hidden;
        position:relative;
        background:#FFFFFF;
    }

     I have create you a sample to accomplish this task. If you have any further questions regarding this do not hesitate to contact me!

    AutoAjustHeight.zip
Children