Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I've got a tabbox with a fixed set of tabs, and I'd like to use the remaining space for a toolbar, with some of the controls appearing immediately after the tabs, rather than right-aligned.
In other words, I'd like to do something like this:
<tabbox hflex="1">
<tabs>
<tab label="tab1"/>
<tab label="tab2"/>
</tabs>
<toolbar hflex="1" align="start">
<hlayout hflex="1">
controls...
</hlayout>
more controls....
</toolbar>
</tabbox>
I've tried a number of variants, but no matter what I do, the toolbar gets only its minimal width, and the tabs get the rest of the space, even though there are only a few of them. The result is that the toolbar buttons are all lumped together on the right side.
Any suggestions?
Hi! i think that the fastest way to do that is not trying to change the default implementation of the Tabbox but is to workaround it:
<window title="Tabbox" border="normal" width="400px">
<style>
.mytab {
background-color: lightyellow;
border: 1px solid grey;
padding: 3px;
}
</style>
<hlayout>
<div sclass="mytab" onClick="mytabs.setSelectedIndex(0)">one</div>
<div sclass="mytab" onClick="mytabs.setSelectedIndex(1)">two</div>
<toolbar hflex="1">
<toolbarbutton label="a" />
<toolbarbutton label="b" />
<toolbarbutton label="c" />
<toolbarbutton label="d" />
<toolbarbutton label="e" />
</toolbar>
</hlayout>
<tabbox id="mytabs">
<tabs visible="false">
<tab>one</tab>
<tab>two</tab>
</tabs>
<tabpanels>
<tabpanel>
<label value="one" />
</tabpanel>
<tabpanel>
<label value="two" />
</tabpanel>
</tabpanels>
</tabbox>
</window>
Giovanni
Asked: 2013-06-11 21:05:24 +0800
Seen: 16 times
Last updated: Jun 12 '13