0

Window caption style problem

asked 2021-04-07 23:26:54 +0800

ivtu gravatar image ivtu
11 2

updated 2021-04-08 14:40:38 +0800

Hi,

I have problem with caption style. I want to add 'text-overflow' and it works if window's title is used. But when I use inner caption (I have to use to add icon before title), 'text-overflow' is ignored, probably because inner div+span (caption related) are created. Is there ZK generic solution how to use caption inside window to have title overflow and actions (close, maximize, etc.) in the same row?

Here is example: https://zkfiddle.org/sample/8hd1mb/1-Window-Caption-Overflow (zkfiddle)

delete flag offensive retag edit

9 Answers

Sort by ยป oldest newest most voted
0

answered 2021-04-07 23:29:48 +0800

ivtu gravatar image ivtu
11 2

updated 2021-04-08 16:19:34 +0800

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

Here is updated example what I want to satisfy with icon in title: zkfiddle

link publish delete flag offensive edit
0

answered 2021-04-08 16:27:01 +0800

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

updated 2021-04-08 16:27:34 +0800

please check https://zkfiddle.org/sample/8hd1mb/3-Window-Caption-Overflow to see if it fulfills your requirement.

link publish delete flag offensive edit
0

answered 2021-04-08 16:28:42 +0800

ivtu gravatar image ivtu
11 2

Thanks, but it does not work on iceblue theme :( My theme is based on iceblue

link publish delete flag offensive edit
0

answered 2021-04-08 16:30:29 +0800

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

for iceblue: https://zkfiddle.org/sample/8hd1mb/4-Window-Caption-Overflow iceblue has larger padding, so caption content needs to be narrower.

link publish delete flag offensive edit

Comments

I tried this, before I created ticket, but this also has big side effect when window is big enough.

ivtu ( 2021-04-08 16:35:59 +0800 )edit

Please check: https://zkfiddle.org/sample/8hd1mb/5-Window-Caption-Overflow

ivtu ( 2021-04-08 16:36:15 +0800 )edit
0

answered 2021-04-08 16:47:50 +0800

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

use css flexbox https://zkfiddle.org/sample/8hd1mb/6-Window-Caption-Overflow

link publish delete flag offensive edit
0

answered 2021-04-08 16:55:16 +0800

ivtu gravatar image ivtu
11 2

Thanks a lot

link publish delete flag offensive edit
0

answered 2021-04-08 17:51:35 +0800

ivtu gravatar image ivtu
11 2

Sorry, but it seems last solution has again side effect. Close action is first one, not as usual last one. Can we somehow decide order of window actions? Here is example: https://zkfiddle.org/sample/8hd1mb/7-Window-Caption-Overflow

link publish delete flag offensive edit
0

answered 2021-04-08 18:22:02 +0800

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

updated 2021-04-08 18:22:47 +0800

I run your https://zkfiddle.org/sample/8hd1mb/7-Window-Caption-Overflow

what I see is close button is the right-most one. It's default design. image description

My environment is chrome 89, Mac OS. Can you check the buttons with the developer tool?

link publish delete flag offensive edit

Comments

yes, because version of ZK is 9.5.1. In 9.1 it is broken

ivtu ( 2021-04-08 18:24:57 +0800 )edit

I need to use 9.1 and cannot migrate to 9.5 soon

ivtu ( 2021-04-08 18:26:21 +0800 )edit
0

answered 2021-04-09 10:02:37 +0800

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

found a solution that works in 9.1 https://zkfiddle.org/sample/8hd1mb/9-Window-Caption-Overflow

link publish delete flag offensive edit

Comments

Thanks once more

ivtu ( 2021-04-09 18:09:08 +0800 )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

RSS

Stats

Asked: 2021-04-07 23:26:54 +0800

Seen: 24 times

Last updated: Apr 09 '21

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