-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
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.
Thanks a lot for your reply @cor3000. Your example works well...I will try to do something similar with toolbarbuttons.
Asked: 2018-10-18 17:59:37 +0800
Seen: 8 times
Last updated: Oct 23 '18