grid columns multiline

answered 2010-03-28 21:08:05 +0800

PeterKuo
481 ● 2

Some direction you can think about:
<zk:column label="this is a very very long text"/> can modify to <zk:column>this is a very very long text</zk:column>

Modify the css.

answered 2010-12-10 10:14:04 +0800

niting
111

updated 2010-12-10 10:15:58 +0800

Hi Kal, Peter..Could you please provide an example for both of your approaches?

I am facing a similar issue with the grid column. Would like the column label to wrap depending on the width of the column.

answered 2010-12-10 13:01:21 +0800

zknewbie1
370 ● 4

I added the xmlns:h namespace and it works fine...

<zk xmlns:h='http://www.w3.org/1999/xhtml'>
<grid id="grid" mold="paging" pageSize="10">
  <columns>
    <column width="100px" label="Sender" sort="auto"/>
    <column width="230px" align="center">Priority, Status<h:br/> (testing word wrap with long text)</column>
    <column width="70px" label=" " align="center"/>
  </columns>
  <rows>
    <row>
      <label value="sender1"/>
      I think, simple text<h:br/>also works here
      <button label="..." href="details.jsp"/>
    </row>
  </rows>
</grid>
</zk>

answered 2010-12-10 13:48:59 +0800

twiegand
1807 ● 3

zknewbie1,

You might also consider wrapping your text in <cell> tags like this:

<cell>I think, simple text<h:br/>also works here</cell>

Otherwise, your row might spill over into too many columns..

Todd

answered 2010-12-10 13:51:39 +0800

zknewbie1
370 ● 4

Thanks very much Todd..

answered 2011-02-22 12:13:22 +0800

niting
111

Hello.. Thanks for all your suggestions.
The column label has be set(as the header is picked from the database) using a java class thus..
Column col = new Column
col.setLabel("Test Word <br/> Wrap")
col.setSclass("colHeader")
using this the label did not break.
Then I tried
Label columnLabel = new Label();
columnLabel.setMultiline(true);
columnLabel.setValue("Test Word \n Wrap");
columnLabel.setSclass("colHeader");
col.appendChild(columnLabel);
The above displays "Test Word" and Wrap comes in the next line and am unable to extend the width.

in Css the SClass is
.colHeader {
position: relative;
font-family : arial;
font-weight: bold;
font-size: 10px;
COLOR: black;
text-align: top;
BACKGROUND: #A7CCF0;
overflow: none;
top: 5
}

css also contains

div.z-column-cnt {
position: relative;
font-family : arial;
font-weight: bold;
font-size: 10px;
COLOR: black;
text-align: center;
overflow: none;
height: 5px
}

Any suggestion on what I might be missing and what changes need to made.

Thank you.

answered 2011-02-22 13:22:57 +0800

niting
111

Update: I removed the div.z-column-cnt class from the css and by using the label multiline approach I was able to display the values.

answered 2011-03-10 17:01:38 +0800

niting
111

Hello.. I thought I had found a solution for this but wasn't the case.

In the jsp version of our application a table is created and each td is set a width in % so using this property when label is set to the <td> the word wraps accordingly to the size set.
I am unable to replicate the same wrapping effect on ZK version of the application for a Grid column or Listbox listhead.

Please let me know if you all have any suggestions.

Thanks
Nitin