-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I have 4 tab inside a tabbox, when I need to change 1 of the tab label to a longer string it only show a part of it. eg. "This is a long label" will become "this is a long..."
here is the part that I think is relevant to the question. the label is dynamically set in the VM file
<div apply="org.zkoss.bind.BindComposer"
sclass="content-panel-layout-center"
viewModel="@id('vm') @init('office.vm.brief.BriefInfoVM')"
style="popup-content-panel-layout">
<style>
.nav_toolbar .z-toolbarbutton-content i { font-size: 20px;}
.nav_tabs .z-tabpanel { padding: 0; border-bottom: 0 none;}
.nav_tabs .z-tabpanels .z-toolbarbutton-content { padding:
4px;} .nav_category { cursor:pointer; } .nav_text { color:
#696569; font-size : 24px; font-weight: bold;}
</style>
<tabbox id="tabbox" width="100%" sclass="nav_tabs">
<tabs>
<tab id="tabTitle"
width=""
label="@init(vm.tabTitle)"
onClick="@command('alternate', tab = tabTitle, tabbox = tabbox)"
onSelect="updateCategory(self.label)"
visible=true" />
</tabs>
<div/>
I try to simplify your zul and reproduce your case with 6.5.8.1 and 6.5.3, but it doesn't show a trimmed tab title. Please check this http://zkfiddle.org/sample/2h6lf78/1-tabbox-long-title
According to your description, you could apply the following css on the tab label but I can't tell from the attached code:
text-overflow: ellipsis;
You can check css rules applied on the tab title (.z-tab-text
) by developer tool / element tab
Or you can modify my zkfiddle file above to reproduce your case for us, then we can locate the root cause more efficiently.
Asked: 2019-08-19 11:35:37 +0800
Seen: 9 times
Last updated: Aug 22 '19