I’m trying to get the contents panel of Tabbar to autosize according to its contents, but failing. What I’m seeking is a tabbar that stays as a fixed width (eg 100% of a container div) but whose height varies according to contents - different tabs will have different amounts of content. But once loaded the height of each tab panel won’t change further - ie the content height doesn’t need to be dynamic
Right now it looks like unless I declare a height in the initial div, ie:
then all I ever see is the set of tabs with a zero-height content panel. I’ve tried various combinations of enableAutoSize and enableAutoReSize but nothing seems to give the desired effect. Maybe I need to repaint the tabbar somehow once the content is loaded?
Anyone able to suggest what might be wrong please. You can see the embryonic tabbar at:
weatherstations.co.uk/tabbed_weather.htm
NB This page and tabbar is at an early stage of development - I’m trying to get the tabbar right first before adding in too much tab content.
OK, I’ve now managed to find another post here about a similar issue and it seems that you can’t autosize when the content is being loaded as ‘iframes-on-demand’ (and presumably, I’m guessing, from any flavour of iframe).
But basically maybe I’m stuck because what I want to load in the tabbar content panels is HTML coded in other web pages, ie I suppose (?) what counts as an external URL, even though the pages will be in a subfolder of the folder containing the host page for the tabbar. And if I’ve understood the tabbar documentation correctly, this loading of external URLs is what’s incompatible with autosizing?
Also, I’m not 100% clear what loading via ‘ajax-html’ does differently/operationally from using an iframe (except that there’s presumably no iframe created to hold the newly loaded content).
But it looks like I can’t, for example, set a different stylesheet for the tab content from that used for the host page.
html-ajax mode loads content into the tabs using Ajax. In this case the content you loads is place as innerHTML of a tab. So, the css and js that you inluded on the content pages won’t be applied.
All libraries must be included in the main page with tabbar.
OK thanks for the clarification. I need to use this tabbar on a fairly large website that already has an extensive and quite complex stylesheet and so I’d rather not add any further new styles into that specifically for styling the tabbar contents.
So it sounds like I do need to use an iframe mechanism for loading the content in order to give me independent control over the tabbar content styles. And so the conclusion is that I can’t use autosizing in this situation but need to set a fixed size for the tabbar overall.
Thanks for the advice.