I have a two tab Dhtmlx Tabbar. Each tab’s content is located in its own DIV, and the content is attached to the appropriate tab using the setContent method.
Each tab has various html controls on it. The first tab has a text area control with a bunch of buttons and other controls below that.
Everything works fine for IE and Firefox, but in Chrome (Win) or Safari (Mac OS) the text area can be resized by the user and this causes a problem. Resizing the text area causes the content of the div to resize, but the tabbar and containing html page itself does not resize to adjust for this. This means you can push a lot of content, including the “size” handle of the text area itself past the bottom border of the tabbar, but since the tabbar won’t resize, you can’t get it back.
This situation doesn’t work since we can’t have users adjust their screen so that it isn’t usable, but we also can’t restrict them from using Safari since they are primarily on Mac computers.
How can we get the tabbar to resize (make itself, and/or the html page longer) so that all the content is still visible after the user expands a text area? I tried a number of methods for the tabbar but nothing worked.
Thanks,
Michael
Here is some sample code:
<div id="tabcontainer" style="width:700px;height:100%;">
<div id="a_tabbar" style="height:100%;"/>
<div id="html_1" style="height:100%;" >
<div id="atomic" style="height:100%;" >
some text here
<p><br/><label>Text:
<textarea name="segment_text" id="segment_text" cols="40" rows="10">now is the time</textarea>
</label></p>
<a class="button" href="javascript:submitForm('');" onclick="this.blur();"><span>Save</span></a>
<a class="button" href="index.php?category=segment&mode=view" onclick="this.blur();"><span>Cancel</span></a>
<a class="button" href="javascript:submitForm('CreateAgain');" onclick="this.blur();"><span>Save & Create Another</span></a>
<p> </p>
</div>
</div>
<div id="html_2" style="height:100%;" ><div id="composite" style="height:100%;" >
more text and other html controls....</div></div>
<script>
tabbar = new dhtmlXTabBar({
parent: "a_tabbar",
image_path: "dhtmlxtabbar/codebase/imgs/",
skin: "dhx_skyblue",
tabs: [{
id: "atomic",
label: "Atomic Segment",
width: "150px"
}, {
id: "composite",
label: "Composite Segment",
width: "150px",
active: true
}]
});
tabbar.enableAutoSize(true,true);
tabbar.setContent("atomic", "html_1");
tabbar.setContent("composite", "html_2");
</script>