CODEWITHSUNDEEP
zk
rdurand
rdurand

Reputation: 7410

Set part of the window title to bold

I use ZK (just started learning), and I'd like to set some of the text from my modal window's title to bold.

Here is the code I use :

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul">

<window apply="hidden-file-name" title="${msg:l('title')}"  width="390px" closable="true">

    <tablelayout columns="2">
        <!-- Some code -->
    </tablelayout>

</window>

</zk>

I have already divided title in my .properties file into title and info. I'd like the "info" part to appear in bold.

Just in case, here's an example :

Title : "This is my title"

Info : " and this is the info"

-> I want my modal window to have this title : "This is my title and this is the info".

I found a dirty solution, which is to set the "info" part as a caption, use float: left; to bring it to the left, and alter the css of the "title" part by setting a fixed width to remove the space appearing between the two parts, but as you can see, this is bad.. I'd like something clean.

Upvotes: 0

Views: 2599

Answers (2)

benbai123
benbai123

Reputation: 1463

You can try override the bind_ function to update the content of title after dom elements rendered by Client Side Programming,

e.g.,

<window border="normal" title="the bold title">
    <attribute w:name="bind_"><![CDATA[
        function (a, b, c) {
            this.$bind_(a, b, c);
            var cap = this.$n('cap');
            cap.innerHTML = cap.innerHTML.replace('bold', '<span style="font-weight: bold;">bold</span>');
        }
    ]]></attribute>
</window>

Ref:

ZK Client Side Programming

Upvotes: 0

Nabil A.
Nabil A.

Reputation: 3400

Add Caption to Window and the position should be by default
[Title here][Caption Here]
so just put the info in the Captions label and set it to bold.

To set different styles to the same label is as far as i know not
possible in zk directly.
Of course you can change it via java script, but this would imho
be overkill in your case.

Edit

See this example. You see that title and caption are both left.
So this is normal.

After I play around a bit, I found a solution. Look here.

Upvotes: 1

Related Questions