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?
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:
I have create you a sample to accomplish this task. If you have any further questions regarding this do not hesitate to contact me!
Hi Zdravko,First of all, thanks so much for your response.
Secondly, I tested the your demo and I found that its also working fine on my end too.But then I went further and tested more and replaced the static content inside the ContentTabItem and replaced it with a simple aspx page by setting the ContentUrlAspx:-
<ig:webtab id="WebTab1" runat="server" width="300px" height=""> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1"> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </Tabs> </ig:webtab>
Aspx.cs:-
WebTab1.Tabs[0].ContentUrl = "WebForm.aspx";
But this time Web tab height remained the same and it was way to small on page load only. The webtab height should have the height of the content url WebForm.aspx inside the first tab, right? Could you please test it once at your end too?Looking forward to your response!
Hello, I am still following your case. Have you been able to resolve the issue? If you have any concerns or questions, please feel free to contact me, I will be glad to help you.
Hi Zdravko,Thanks so much once again for your response.I tried your sample code and it worked for me too but the issue I am facing right now is that my js code is in external js file. So, I am not able to access the webtab ig control using the below code:-
ig_controls.WebTab1
Could you please have a look into the issue and let me know about it.
Looking forward to your response!
Hello koneal,
I'm just checking if you have resolved your issue. If there is anything that I could help you with, please let me know.
I investigated your sample, and determined that you want to get the controls from the ContentURL Page. In order to do that you need to use window.parent.ig_controls.WebTab1 this is because it is generated iframe and you need to go to the parent of that iframe.
Now this selector will work too window.parent.$find("WebTab1").
This is code snipped from your sample:
If you have any further questions, do not hesitate to contact me!
Hi,Please find the Sample attached.Hope this would help!
Could you please send me isolated sample in order to further investigate your issue, because I don't know when you try to get the WebDataGrid, before or after the control initialization.
This will be highly appreciated!
Hi,
I tried this as you have said
var webtab = $find("<%=WebTab1.ClientID%>");alert(webtab);
Above lines are in the external .js file but the alert always shows null.
Also, I tried
var webtab = $find("WebTabID");;alert(webtab);
Again, the alert shows null.