0

button text-overflow problem with ie

asked 2018-10-18 17:59:37 +0800

filippoluchini gravatar image filippoluchini
1

updated 2018-10-18 18:03:50 +0800

Hello, I'm using zk 7.0.8.1 with internet explorer (10 and 11) and I've a problem with text-overflow in buttons. If a button has an horizontal orient everything works fine, but if it has a vertical orient text-overflow doesn't work.

For example:

<vlayout>
    <button label="Left left left left left left left"
        image="/images/user_gray-32x32.png" width="125px"
        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" />
    <button label="Left left left left left left left"
        image="/images/user_gray-32x32.png" width="125px" orient="vertical"
        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" />
</vlayout>

Everything works fine with other browsers.

Any suggestions?

Thanks in advance.

Filippo

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2018-10-19 15:07:25 +0800

cor3000 gravatar image cor3000
4263 1 7
ZK Team

I didn't find any way to do this exactly in IE, it seems it doesn't support multiline ellipsis. So instead of using orient="vertical" (which produces multiline text content inside the button), you can use a normal button and just style it differently.

<vlayout>
  <style>
    .ellipsis {
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    .z-button.vertical {
      position: relative;
      padding-top: 40px;
    }
    .z-button.vertical > img {
      position: absolute;
      top: 8px;
      left: 50%;
      margin-left: -16px;
    }
  </style>
    <button label="Left left left left left left left" sclass="ellipsis"
        image="/images/user_gray-32x32.png" width="125px"/>
    <button label="Left left left left left left left"
        image="/images/user_gray-32x32.png" width="125px" sclass="ellipsis vertical"/>
</vlayout>

http://zkfiddle.org/sample/fua5p9/1-button-ellipsis

It's not perfect but very simple without having to change the button markup.

However it is also possible to change the markup by specifying a custom button mold that allows the styling necessary for your requirements.

link publish delete flag offensive edit
0

answered 2018-10-23 21:25:38 +0800

filippoluchini gravatar image filippoluchini
1

Thanks a lot for your reply @cor3000. Your example works well...I will try to do something similar with toolbarbuttons.

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: 2018-10-18 17:59:37 +0800

Seen: 8 times

Last updated: Oct 23

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