0

Column Layout Background Color

asked 2020-01-07 17:00:19 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

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

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2020-01-08 12:01:19 +0800

cor3000 gravatar image cor3000
5225 2 7
ZK Team

updated 2020-01-08 12:04:29 +0800

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.

link publish delete flag offensive edit
0

answered 2020-01-09 01:32:44 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

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>

link publish delete flag offensive edit
0

answered 2020-01-09 11:02:08 +0800

cor3000 gravatar image cor3000
5225 2 7
ZK Team

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.

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: 2020-01-07 17:00:19 +0800

Seen: 23 times

Last updated: Jan 09

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