Set column height fixed

asked 2023-01-02 18:58:29 +0800

AnkitIan gravatar image AnkitIan
101 1

updated 2023-01-02 18:59:00 +0800

Hi below is my code :

        <window id="workload" height="100%" width="100%" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.multimasteruniters.brains.workload.web.controllers.zk.WorkloadManagement')">
             .myGrid {
               height: 30px !important; 
                <hbox align="start">
                    <radiogroup id="comboType" onCheck="@command('showOptions',filterValue=self.selectedItem.value,listModelQueue=workloadQueueCombo.model,listModelUserGroup=workloadUserGroupCombo.model,listModelUser=workloadUserCombo.model)">
                        <radio label="Queue" radiogroup="comboType" value="0" selected="true"/>
                        <radio label="User Group" value="1" radiogroup="comboType"/>
                        <radio label="User" value="2" radiogroup="comboType"/>
                <hbox align="center">
                    <combobox id="workloadQueueCombo" model="@load(vm.workloadQueues)" selectedItem="@bind(vm.selectedQueue)" onSelect="@command('showQueueItems')" placeholder="${ b:l('str.workload.queue') }" width="500px" autodrop="true" visible="@load(vm.filterValue eq 0)">
                       <template name="model" var="queue">
                           <comboitem label="@load(queue.name)" />
                    <combobox id="workloadUserGroupCombo" model="@load(vm.workloadUserGroups)" selectedItem="@bind(vm.selectedWorkloadUserGroup)" onSelect="@command('showQueueItems')" placeholder="${ b:l('str.workload.user_group') }" width="500px" autodrop="true" visible="@load(vm.filterValue eq 1)">
                       <template name="model" var="userGroup">
                           <comboitem label="@load(userGroup.description)" />
                    <combobox id="workloadUserCombo" model="@load(vm.workloadUsers)" selectedItem="@bind(vm.selectedWorkloadUser)" onSelect="@command('showQueueItems')" placeholder="${ b:l('str.workload.user') }" width="500px" autodrop="true" visible="@load(vm.filterValue eq 2)">
                       <template name="model" var="user">
                           <comboitem label="@load(user.name)" />
                <hbox align="end">
                    <div children="@load(vm.userQueuesStatus)">
                        <template name="children">
                            <checkbox width="75px" label="@load(each)" checked="true" onCheck="@command('setStatus',checked=self.checked,status=each)"/>
            <separator spacing="10px" />
                <grid model="@load(vm.workloadQueueItems)" mold="paging" pageSize="15">
                    <columns sclass="myGrid">
                        <column  label="Queue" align="center" visible="@load(vm.filterValue eq 1 || vm.filterValue eq 2)"/>
                        <column  label="${ b:l('str.workload.user_groupname') }" visible="@load(vm.filterValue eq 0 || vm.filterValue eq 2)"/>
                        <column  label="${ b:l('str.workload.username') }" align="center" visible="@load(vm.filterValue eq 0 || vm.filterValue eq 1)"/>
                        <column  label="${ b:l('str.workload.description') }" align="center"/>
                        <column  label="${ b:l('str.workload.status') }" align="center"/>
                        <column  label="${ b:l('str.workload.starttime') }" align="center"/>
                        <column  label="${ b:l('str.workload.totalduration') }" align="center"/>
                    <template name="model" var="queueItem" >
                            <label value="@load(queueItem.queueName)" visible="@load(vm.filterValue eq 1 || vm.filterValue eq 2)"/>
                            <label value="@load(queueItem.userGroupDescription)" visible="@load(vm.filterValue eq 0 || vm.filterValue eq 2)"/>
                            <label value="@load(queueItem.username)" visible="@load(vm.filterValue eq 0 || vm.filterValue eq 1)"/>
                            <label value="@load(queueItem.description)"/>
                            <label value="@load(queueItem.userQueueStatus)"/>
                            <label value="@load(queueItem.startTime)"/>
                            <label value="@load(queueItem.totalDuration)"/>

I have 3 radio buttons; on clicking each one of them we get a grid with column headers of different size I want a fixed column height tried using css and other properties but didn't worked out for me. Can anyone help me out please Thanks in advance.

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2023-01-05 18:22:33 +0800

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

I want a fixed column height I can understand a row's height. But what's the column height you refer to? I have granted you permission to upload a picture, please upload a screenshot to show what you want.

Since you specify mold="paging" pageSize="15", so the grid should always show 15 items (keep 15 items' height) if vm.workloadQueueItems contains more than 15 items. If the model contains fewer than 15 items, then the grid is less high.

If you want to keep the Grid in a fixed height no matter how many items it displays, you can use CSS like:

<grid style="height: 400px">

If you want a higher column header, you can

        .z-grid-header table{
            height: 80px;
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




Asked: 2023-01-02 18:58:29 +0800

Seen: 6 times

Last updated: Jan 05 '23

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