1

How to customize grid columns width using only css

asked 2016-08-07 10:45:26 +0800

alex3ee gravatar image alex3ee
13 3

updated 2016-08-07 20:14:37 +0800

How to customize grid columns width using only .css

  • Column width has applied to grid header. But column width not applied to grid body:
<?page id="layout" docType="html" contentType="text/html;charset=UTF-8" title="how to customize grid column widths with css" ?>
<zk>
<style>
  .column1 { width: 10em; }
  .column2 { width: 15em; }
  .column3 { width: 20em; }
</style>

<grid sclass="whole_table">
<auxhead>
  <auxheader sclass="column1"/>
  <auxheader sclass="column2"><textbox value="" width="90%"/></auxheader>
  <auxheader sclass="column3"><textbox value="" width="90%"/></auxheader>
</auxhead>
<columns sizable="true" menupopup="auto">
  <column sclass="column1" label="column1" />
  <column sclass="column2" label="column2" />
  <column sclass="column3" label="column3" />
</columns>
<rows>
  <row forEach="1,2,3">
    <label value="111111111111111" sclass="column1"/>
    <label value="222222222222222" sclass="column2"/>
    <label value="333333333333333" sclass="column3"/>
  </row>
</rows>
</grid>
</zk>


Screenshot:
http:// s8.postimg.org/52q6vlu1x/customizecolumnwidthwithcss.png

Want:
- Customize grid column widths using only css (without need to set up width in program code with tag: width="10em")

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2016-08-08 05:39:48 +0800

chillworld gravatar image chillworld flag of Belgium
5322 4 9
https://github.com/chillw...

Your problem is that you don't think of anything what's done for you by ZK.
Put around each label a cell tag and apply the sclass to the cell in place of the label.

Tested that in zk fiddle and it works.

Greetz chill.

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: 2016-08-07 10:45:26 +0800

Seen: 40 times

Last updated: Aug 08 '16

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