0

Tab label not fully shown

asked 2019-08-19 11:35:37 +0800

lvhuong221 gravatar image lvhuong221
1

updated 2019-08-19 11:41:17 +0800

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/>
delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2019-08-20 11:58:31 +0800

hawk gravatar image hawk
2455 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2019-08-22 09:24:19 +0800

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 image description

Or you can modify my zkfiddle file above to reproduce your case for us, then we can locate the root cause more efficiently.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2019-08-19 11:35:37 +0800

Seen: 7 times

Last updated: Aug 22

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More