Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I have a column layout in a zul with 3 column children. I want different background color for each column. I tried a lot using sclass, but could not able to set different color for each column.
Please help
The answer to your question is most likely a "right-click->Inspect Element" away.
Just right-click-inspect the area which you think doesn't have the color you expect, and the browsers developer tools (e.g. in chrome/ff) will tell you exactly which element is displayed at this location, and which styles are applied. Based on that information you can then decide what to change. No on in this forum can guess what's happening on your page, and which (if any) custom styles affect the DOM elements rendered on your page. You literally have all the information needed right in front of you.
The only style I can see in your code is a div with a background color
<div style="background-color: #f2f2f2;">
It doesn't specify any height so that it won't cover more height than needed for the contained elements.
Yes. I saw the fiddle, it works. I think problem in my case. I am trying to show the background color for full height. But it is not showing up. Any Help. Sorry for not giving runnable code.
Here is the Video Demo which shows the issue
Here is the production code
<zk>
<window style="overflow:auto;"
viewModel="@id('vm') @init('com.product.webapp.employee.EmployeeMainVM')">
<div class="crudpage">
<div class="crud-heading">
<label sclass="crudpagetitle"
value="Employee Information" />
<div class="pull-right">
<hbox spacing="10px">
<a class="listpagebutton fa fa-undo"
onClick="@command('onGoBack')" tooltiptext="Go Back ">
</a>
</hbox>
</div>
</div>
</div>
<columnlayout>
<columnchildren width="20%">
<div>
<div style="background-color: #f2f2f2;">
<div>
<image sclass="image--cover"
src="@load(vm.selectedEmployee.profileImageDataString)" />
</div>
<div align="center" width="100%">
<toolbarbutton
label="Update Profile Picture" upload="true"
onUpload="@command('onImageAdd', upEvent=event,type='image1')">
</toolbarbutton>
</div>
<separator></separator>
<div>
<label value="Contact"
sclass="crudheader">
</label>
<a sclass="editdot" tooltiptext="Edit"
onClick="@command('onEditAddressContact',record=vm.selectedEmployee)">
</a>
<div sclass="clearboth"></div>
</div>
<separator></separator>
<grid sclass="vgrid2">
<columns>
<column hflex="1"></column>
<column hflex="5"></column>
</columns>
<rows>
<row>
<vlayout>
<label class="fa fa-home"
style="font-size: 19px; " />
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.homePhone) @converter('com.product.commonutility.MaskConverter')"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label class="fa fa-phone"
style="font-size: 19px;" />
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.workPhone) @converter('com.product.commonutility.MaskConverter')"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label class="fa fa-mobile"
style="font-size: 20px;" />
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.mobile) @converter('com.product.commonutility.MaskConverter')"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label class="fa fa-envelope"
style="font-size: 13px;" />
</vlayout>
<vlayout>
<label
style="overflow-wrap: break-word;"
value="@load(vm.selectedEmployee.email)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label class="fa fa-map-marker"
style="font-size: 17px;" />
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.address1)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row
visible="@load(vm.selectedEmployee.address2 ne null)">
<vlayout></vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.address2)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout></vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.cityStateZip)"
sclass="crudvalues">
</label>
</vlayout>
</row>
</rows>
</grid>
<separator></separator>
<separator></separator>
<separator></separator>
<separator></separator>
</div>
</div>
</columnchildren>
<columnchildren width="2%">
<panel>
<panelchildren></panelchildren>
</panel>
</columnchildren>
<columnchildren width="75%">
<div>
<label class="fa fa-user" style="font-size: 22px;" />
<space></space>
<label value="Basic Information"
sclass="crudheader">
</label>
</div>
<separator></separator>
<separator></separator>
<div sclass="sectionpadding4320">
<vgrid>
<columns>
<column hflex="1"></column>
<column hflex="4"></column>
</columns>
<rows>
<row>
<vlayout>
<label value="First Name "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.firstName)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Last Name "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.lastName)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Middle Initial "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.middleName)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Preferred Name "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.preferredName)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Gender "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.gender)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="DOB "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.formatedDOB)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Employment Type"
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.employementType)"
sclass="crudvalues">
</label>
</vlayout>
</row>
</rows>
</vgrid>
</div>
<separator></separator>
<separator></separator>
<div>
<label class="fa fa-info-circle"
style="font-size: 22px;" />
<space></space>
<label value="Race and Ethnicity"
sclass="crudheader">
</label>
</div>
<separator></separator>
<separator></separator>
<div sclass="sectionpadding4320">
<vgrid>
<columns>
<column hflex="1"></column>
<column hflex="4"></column>
</columns>
<rows>
<row>
<vlayout>
<label value="Race "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.race)" sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Ethnicity "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.ethnicity)"
sclass="crudvalues">
</label>
</vlayout>
</row>
</rows>
</vgrid>
</div>
<separator></separator>
<separator></separator>
<div>
<label class="fa fa-phone" style="font-size: 22px;" />
<label value="Emergency Contact"
sclass="crudheader">
</label>
<a sclass="editdot" tooltiptext="Edit"
onClick="@command('onEditEmergencyContact',record=vm.selectedEmployee)">
</a>
<div sclass="clearboth"></div>
</div>
<separator></separator>
<separator></separator>
<div sclass="sectionpadding4320">
<vgrid>
<columns>
<column hflex="1"></column>
<column hflex="4"></column>
</columns>
<rows>
<row>
<vlayout>
<label value="Relation "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.emerelation)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="First Name "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.emefirstName)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Last Name "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.emelastName)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Home Phone "
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.emehomePhone)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Mobile"
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.ememobile) @converter('com.product.commonutility.MobileMaskFormatConverter')"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Email Address"
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.emeemail)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Emergency Address"
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<hbox>
<label
value="@load(vm.selectedEmployee.emeaddress)"
sclass="crudvalues">
</label>
<label
value="@load(vm.selectedEmployee.emerCityStateZip)"
sclass="crudvalues">
</label>
</hbox>
</vlayout>
</row>
</rows>
</vgrid>
</div>
<separator></separator>
<separator></separator>
<div>
<label class="fa fa-asterisk"
style="font-size: 22px;" />
<space></space>
<label value="Other Information"
sclass="crudheader">
</label>
</div>
<separator></separator>
<separator></separator>
<div sclass="sectionpadding4320">
<vgrid>
<columns>
<column hflex="1"></column>
<column hflex="4"></column>
</columns>
<rows>
<row>
<vlayout>
<label value="Hire Source"
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.hireSource)"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Hire Date"
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.hiredDate) @converter('com.product.commonutility.MyDateFormatConverter')"
sclass="crudvalues">
</label>
</vlayout>
</row>
<row>
<vlayout>
<label value="Start Date"
sclass="crudfield">
</label>
</vlayout>
<vlayout>
<label
value="@load(vm.selectedEmployee.startDate) @converter('com.product.commonutility.MyDateFormatConverter')"
sclass="crudvalues">
</label>
</vlayout>
</row>
</rows>
</vgrid>
</div>
</columnchildren>
</columnlayout>
<separator></separator>
<separator></separator>
</window>
</zk>
I just tried the most trivial case I tried just works.
Just give each <columnchildren> element an sclass. Then each of these sclasses gets a background color.
<zk>
<style>
.col1 { background-color: red; }
.col2 { background-color: green; }
.col3 { background-color: blue; }
</style>
<columnlayout>
<columnchildren sclass="col1">content 1</columnchildren>
<columnchildren sclass="col2">content 2</columnchildren>
<columnchildren sclass="col3">content 3</columnchildren>
</columnlayout>
</zk>
Here a zkfiddle: http://zkfiddle.org/sample/1tr22n7/1-columnlayout-background-color
In your many attempts I am sure you at least tried that. So I guess you have additional styles that override those background colors, or nested elements inside the columns that define their own background color.
I suggest using the developer tools of your favorite browser to inspect the elements and styles in order to see where/how they get applied and eventually overridden.
Providing a concrete example that doesn't give the results you expect, will most likely help to give you a response helpful in your specific scenario.
Asked: 2020-01-07 17:00:19 +0800
Seen: 25 times
Last updated: Jan 09 '20