Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkCombobox unfolding in splitted from original position
11guest162.158.155.1703t3gioeApr 23, 2021 1:48:35 PMlinkresources
index.zulzul<zk>
<style>
html, body, a, form, table, tr, th, tbody, td, ul, ol, li, p, pre, label, span, div, input, select, textarea {
font-family: 'Slate Pro Regular',sans-serif!important;
color: #404040 !important;
font-size: 16px !important;
}
body {
/* font-family: 'Slate Pro Book',sans-serif!important; */
/* font-family: Roboto, "Helvetica Neue", sans-serif !important; */
color: #404040 !important;
background: #fff;
position: relative;
overflow-y: auto;
min-height: 100%;
line-height: 1.5;
}
/* To be removed */
..z-window-content {
/* background-color: #3a55e6; */
}
/*
==========================================================================
PAGE HEADING
========================================================================== */
/* .zk_pb_app>.z-page>.z-div>.z-div>.z-include>.z-window-embedded>.z-window-content>.z-div>.z-window-embedded>.z-window-content>table>tbody>tr>td:first-child + td > .z-div > .z-window >.z-window-content >.z-div >table:nth-child(2) div { */
.zk_pb_app .pb_subpage_title {
background-color: white !important;
/* letter-spacing: .5px; */
border: none !important;
}
.zk_pb_app .pb_subpage_title span {
color: #002c77 !important; /*h2 from Linq*/
font-size: 1.5rem !important;
}
/*
==========================================================================
SECTION HEADING
========================================================================== */
.zk_pb_app .pb_section {
background: white !important;
border: none !important;
}
.zk_pb_app .pb_section span {
font-size: 1.5rem !important;
color: #1f76bd !important;
}
.zk_pb_app .pb_collapse_section {
background: none !important;
border: none !important;
/* border-bottom: solid 1px #d8d8d8 !important; */
display: flex;
padding: 1rem !important;
}
/*
==========================================================================
CUSTOMISE PRODUCT NAVBAR
========================================================================== */
/* Main navigation block */
.zk_pb_app .pb_navbar {
background-color: white !important;
width: 100% !important;
height: auto !important;
display:block;
min-height: 48px !important;
background-color: #f0f0f0 !important;
}
/* Amend width for navigation element */
.zk_pb_app .pb_navbar >.z-div {
width: 100% !important;
}
/* Add flex positioning for nav items */
.zk_pb_app .pb_navbar tbody {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/* Style nav items */
.zk_pb_app .pb_navbar tbody tr>td>span {
text-decoration: none !important;
/* From LINQ */
align-items: center;
min-height: 66px;
color: #293340;
font-family: "Slate Pro Bold";
font-weight: 400;
font-weight: bold !important;
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 0;
line-height: 24px;
/* margin-right: 30px; */
border-bottom: 3px solid transparent;
transition: all;
padding-bottom: 10px;
}
/* Amend style of active nav item - requires active class to be added - currently not in use */
.zk_pb_app .pb_navbar tbody tr>td>span.active {
color: #3a55e6 !important;
border-bottom: 3px solid #3a55e6 !important;
}
/* Amend style of active nav item. This is hacky */
.zk_pb_app .pb_navbar tbody tr>td>span[style*="font-weight: bold;"] {
/* color: #3a55e6 !important; */
/* border-bottom: 3px solid #3a55e6 !important; */
color: #2640e8!important;
border-bottom: 3px solid #2640e8!important;
/* margin-bottom: 1rem !important; */
}
.zk_pb_app .pb_navbar tbody tr>td>span:not(.active):hover{
border-bottom: 3px solid #3a55e6 !important;
}
/* Remove folder images */
.folder, .folderOpen {
display: none;
}
/*
==========================================================================
CUSTOMISE MAIN AREA
========================================================================== */
.zk_pb_app .pb_nav_body {
display:block;
}
/* Hide sub page nav */
.zk_pb_app .pb_nav_body >.z-div>.z-window-embedded>.z-window-content>.z-div>table:first-child {
visibility:hidden
}
/*
==========================================================================
FORM COMPONENTS
========================================================================== */
/*Set box-sizing for all input elements*/
.zk_pb_app input[style],
.zk_pb_app input[type="text"],
.zk_pb_app input.z-grid input[style] {
box-sizing: border-box;
}
/* FOCUS - required? */
.zk_pb_app .z-combobox-input:focus {
border: 1px solid #2640e8!important;
}
/*
==========================================================================
Checkboxes
========================================================================== */
/*Redesign of checkboxes*/ /*Note: need to check impact on application*/
.zk_pb_app .z-checkbox {
/* line-height: 16px; */
}
/*Design of box*/
.zk_pb_app .z-checkbox>label.z-checkbox-content::before {
/* content: "";
background-color: white;
position: absolute;
left:0;
height:16px;
width:16px;
border: solid 1px rgb(0,168,200);
border-radius: 2px;
top: 0; */
}
/*Read-only*/ /*Added 07/11*/
.zk_pb_app .z-checkbox>input[type=checkbox][disabled=disabled]+label.z-checkbox-content::before {
/* background-color: rgba(204,204,204,0.4) !important; */
}
.zk_pb_app .z-checkbox>label.z-checkbox-content::after {
/* color: white;
left:0;
position: absolute;
width:16px;
text-align: center;
top: 0; */
}
.zk_pb_app .z-checkbox>input[type=checkbox]:checked+label.z-checkbox-content:focus {
/* border: dotted 1px black; */
}
/* Hide original checkbox */
.zk_pb_app .z-checkbox>input[type=checkbox] {
height: 18px;width: 18px;
opacity: 0;
}
/* Replace with pseudo element */
.zk_pb_app .z-checkbox>label.z-checkbox-content::after {
content: "";
height: 18px;
width: 18px;
border: solid 1px #a6a6a6;
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
}
/*Design for tick*/
.zk_pb_app .z-checkbox>input[type=checkbox]:checked+label+label.z-checkbox-content::after {
/* content: "✓"; */
border-color: #3a55e6!important;
background-color: #3a55e6!important;
color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Material Icons';
content: "check" !important;
content: "\e5ca" !important;
}
/*
==========================================================================
Radio buttons
========================================================================== */
/* Transform side by side to above/below layout */
.zk_pb_app .z-radiogroup {
display: flex;
flex-direction: column;
}
/* Set margins for buttons */
.zk_pb_app .z-radio>input[type=radio] + label {
margin-left: .2em !important;
margin-right: 1.3em !important;
}
/*Restyle*/
.zk_pb_app input[type="radio"] {
display: none;
}
.zk_pb_app input[type="radio"] + *::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
margin-right: 0.3rem;
border-radius: 50%;
border-style: solid;
border-width: 1px;
border-color: gray;
}
.zk_pb_app input[type="radio"]:checked + *::before {
background: radial-gradient(#3a55e6 0%, #3a55e6 40%, transparent 50%, transparent);
border-color: #3a55e6
}
.zk_pb_app input[type="radio"]:checked + * {
color: #3a55e6
}
/*
==========================================================================
Dropdowns
========================================================================== */
.zk_pb_app .z-combobox {
position: relative;
}
.zk_pb_app input.z-combobox-input {
display: block;
width: 100%;
font-size: 1rem!important;
font-weight: 400!important;
line-height: 1.5!important;
color: #1a1a1a;
background-clip: padding-box;
background-color: #fbfbfb;
box-sizing: border-box;
height: 48px!important;
padding: 10px 0 10px 8px!important;
border: 1px solid #c8ced7!important;
border-radius: 3px!important;
}
/*Drop down arrows*/
.zk_pb_app .z-combobox-button {
display: inline-block;
right: 1px!important;
top: 16px!important;
border: none !important;
background: none !important;
}
.zk_pb_app .z-combobox-button:active {
border: none !important;
box-shadow: none !important;
}
/* Center align the drop down arrow */
.zk_pb_app .z-combobox-button, .zk_pb_app .z-icon-caret-down {
display: flex;
justify-content: center;
align-items: center;
}
.zk_pb_app .z-icon-caret-down:before {
display: inline-flex;
justify-content:center;
align-items: center;
content: " "!important;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border: solid #000;
border-width: 0 2px 2px 0;
width: 0!important;
height: 0!important;
padding: 3px;
line-height: 38px;
}
.z-combobox-popup {
margin: 0;
width: 100%;
padding: 0;
list-style: none;
/* opacity: 0; */
border-width: 0 1px 1px;
border-style: solid;
border-color: #767676;
-o-border-image: initial;
border-image: initial;
max-height: 30vh;
overflow-y: auto;
-webkit-animation-name: HideList;
animation-name: HideList;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-delay: .5s;
animation-delay: .5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: step-start;
animation-timing-function: step-start;
box-shadow: none !important;
}
.z-combobox-content span {
/* font-family: 'Slate Pro Regular',serif!important; */
font-size: .875rem!important;
font-weight: 400!important;
line-height: 1.5!important;
display: block;
padding: 2px 2px 2px 16px;
/* background-color: #fff; */
margin-bottom: 0;
position: inherit!important;
pointer-events: auto!important;
}
.z-comboitem-selected {
background: none !important
}
.z-comboitem:hover {
background: #fbfbfb !important;
}
/*Required?*/
.zk_pb_app .z-combobox,
.zk_pb_app .z-combobox > input {
max-width: 100%;
}
/*
==========================================================================
Text areas
========================================================================== */
.zk_pb_app input {
border: 1px solid #c8ced7 !important;
border-radius: 3px!important;
background-color: #fbfbfb!important;
}
.zk_pb_app input:focus,
.zk_pb_app textarea:focus,
.zk_pb_app input.mzk-datebox-input:focus {
border: solid 1px #3a55e6 !important;
box-shadow: none !important;
}
.zk_pb_app input::disabled {
background-color: #ececec!important;
border: 1px solid #ececec !important;
}
.zk_pb_app input.z-textbox, .zk_pb_app input.z-intbox, .zk_pb_app input.z-decimalbox {
display: block;
/* width: 100%; */
padding: 10px 0 10px 8px!important;
font-family: 'Slate Pro Regular',serif;
font-size: 1rem!important;
font-weight: 400;
line-height: 1.5rem;
color: #1a1a1a;
background-clip: padding-box;
box-sizing: border-box;
height: 48px!important;
padding: 0 !important; /*Added this because fields overflowing in tables - test*/
}
/*
==========================================================================
Date pickers
========================================================================== */
/*Set max width and padding of date input*/
.zk_pb_app .mzk-datebox {
/* max-width: 100%; */
/* width: 80px; */
/* display: flex; */
/* flex-direction: column-reverse; */
border: 1px solid #c8ced7;
border-radius: 3px!important;
background-color: #fbfbfb!important;
/* padding: 0 0 0 8px!important; */ /*JB addition*/
}
.zk_pb_app input.mzk-datebox-input {
font-size: 1rem!important;
font-weight: 400;
line-height: 1.5rem;
color: #1a1a1a;
background-clip: padding-box;
box-sizing: border-box;
height: 48px!important;
border: none !important;
width: 100%;
}
/*Customise colour scheme and size of date picker*/
.zk_pb_app .mzk-datebox-button > .mzk-datebox-icon {
color: #1a1a1a;
/* font-size: 14px; */
}
.zk_pb_app .mzk-calendar-today {
color: #1a1a1a;
}
/*
==========================================================================
BUTTONS
========================================================================== */
/* Targeting info buttons, this is hacky*/
.zk_pb_app td[width="3%"] button {
min-width: 16px !important;
min-height: 16px !important;
position: relative;
border: none !important;
background: none !important;
}
.zk_pb_app td[width="3%"] button::before {
content: "info";
font-family: "Material Icons";
font-size: 2rem !important;
position: absolute;
top: 0; left: 0;
font-size: 16px !important;
color: #3a55e6 !important;
background-color: #fff !important;
}
.zk_pb_app button,
.zk_pb_app input[type="submit"],
.zk_pb_app input[type="reset"],
.zk_pb_app .mzk-fileupload.mzk-fileupload-blue input[type="submit"],
.zk_pb_app .mzk-fileupload.mzk-fileupload-blue input[type="reset"],
.zk_pb_app .z-button,
.zk_pb_app button.mzk-primary,
.zk_pb_app button.mzk-secondary {
/* padding: 0.5em 1em; */
border: none;
background: linear-gradient(to bottom,#eee 0,#eee 100%);
/* width: auto;
font-size: 1rem;
min-width: 144px;
min-height: 48px;
letter-spacing: .5px;
color: #fff;
line-height: 8px;
font-family: 'Slate Pro Regular',serif;
padding: 0 12px;
border-radius: 24px;
margin-top: 20px;
margin-bottom: 20px;
border: 0;
margin-right: 20px;
white-space: nowrap;
text-align: center;
background: #2640e8!important; */
width: auto;
font-size: 1rem;
min-width: 144px;
min-height: 48px;
/* letter-spacing: .5px; */
/* color: #2640e8;
background: #fff!important;
line-height: 8px;
padding: 0 12px;
border-radius: 24px;
margin-top: 20px;
border: 1px solid #2640e8!important;
margin-right: 20px;
white-space: nowrap;
text-align: center; */
/*Button styling. Removed as affecting all buttons in the app. Have left here in case we want to redesign buttons.
background-image: none; //Removed - Affects the app
text-transform: uppercase; //Removed - Cannot implement because of cases like 'i' for info buttons
background-color: rgb(0, 168, 200);
color: white;
border-radius: 5px;
opacity:0.8;
*/
margin-right: 0 !important;
border-radius: 3px!important;
}
/*Change background colour on hover*/
.zk_pb_app button:hover,
.zk_pb_app input[type="submit"]:hover,
.zk_pb_app .mzk-fileupload.mzk-fileupload-blue input[type="submit"]:hover,
.zk_pb_app .mzk-fileupload.mzk-fileupload-blue input[type="reset"]:hover,
.zk_pb_app .z-button:active,
.zk_pb_app .z-button:focus,
.zk_pb_app .z-button:hover,
.zk_pb_app button.mzk-primary[enabled]:hover,
.zk_pb_app button.mzk-secondary:hover {
/* background: rgb(0,168,200); */
/* background: #2640e8!important;
*/
}
/* Remove paperclip image*/
.zk_pb_app .icn_attach {
display: none;
}
/*Attach Document buttons*/
.zk_pb_app button[title="Attach Document"] {
background: #2640e8!important;
min-width: auto;
padding: 0 20px;
}
.zk_pb_app button[title="Attach Document"]::after {
content: "Browse";
color: white;
/* font-family: 'Material Icons'; */
}
/*Remove + image*/
.zk_pb_app .icn_addnew {
/* display: none; */
}
/*Disabled buttons*/
.zk_pb_app button[disabled] {
background-color: rgba(0,0,0,0.2) !important;
}
/*mzk-secondary class used in application (buttons like "Go" and "Search")*/
.zk_pb_app button.mzk-secondary[style] {
height: auto !important;
/* background: none;
background-color: rgb(0, 168, 200); */
}
/*
==========================================================================
TABLES
========================================================================== */
/*Set table backgrounds to grey*/
.zk_pb_app .mzk-grid .z-row,
.zk_pb_app .mzk-grid tr.z-row tr.z-grid-odd,
.zk_pb_app .z-rows tr.z-grid-odd {
background-color: #fbfbfb!important;
background: #fbfbfb!important;
}
/*Amend border and appearance*/
.zk_pb_app .mzk-listbox .z-auxhead .z-auxheader,
.zk_pb_app .mzk-grid .z-auxhead .z-auxheader {
border: none;
border-bottom: solid 1px rgba(255,255,255,0.1);
background: none;
background: #fbfbfb!important;
}
/*For multiple tables in product, remove border from table header columns */
.zk_pb_app .mzk-grid .z-grid-header .z-column {
border: none;
background: #fbfbfb!important;
}
/*For multiple tables in product, amend border to lighter shade*/
.zk_pb_app .mzk-grid {
border: none;
background: #fbfbfb!important;
}
.zk_pb_app .z-auxheader-content {
background: #fbfbfb!important;
}
.zk_pb_app .mzk-grid .z-column-content {
background: #fbfbfb!important;
}
.zk_pb_app tr.z-columns span {
background: #fbfbfb!important;
}
.zk_pb_app .z-grid-footer, .zk_pb_app .z-footer {
background: #fbfbfb!important;
}
/* Option for small tables */ /*Nb .pb_table_section replaced .mzk-grid */
.zk_pb_app .pb_table_section span,
.zk_pb_app .pb_table_section input.z-textbox,
.zk_pb_app .pb_table_section input.z-intbox,
.zk_pb_app .pb_table_section input.z-decimalbox,
.zk_pb_app .pb_table_section input.z-combobox-input,
.zk_pb_app .pb_table_section button {
/* font-size: .8125rem; !important; */
font-size: 10px !important;
}
.zk_pb_app .pb_table_section input,
.zk_pb_app .pb_table_section button {
height: 24px !important;
min-height: 24px !important;
min-width: auto !important;
}
.zk_pb_app .pb_table_section td {
border: 1px solid #f1f1f1 !important;
}
.zk_pb_app .pb_table_section .z-combobox-button {
top: 2px !important;
font-size: 10px !important
}
.zk_pb_app .pb_table_section .z-icon-caret-down:before {
border-width: 0 1px 1px 0 !important;
padding: 2px !important;
}
/* Small tables in pop ups*/
.z-window-overlapped .mzk-grid .z-grid-header span,
.z-window-overlapped .mzk-grid .z-grid-body input.z-textbox,
.z-window-overlapped .mzk-grid .z-grid-body input.z-intbox,
.z-window-overlapped .mzk-grid .z-grid-body input.z-decimalbox,
.z-window-overlapped .mzk-grid .z-grid-body input.z-combobox-input,
.z-window-overlapped .mzk-grid .z-grid-body .mzk-grid button {
/* font-size: .8125rem; !important; */
font-size: 10px !important;
}
.z-window-overlapped .mzk-grid .z-grid-body input.z-textbox,
.z-window-overlapped .mzk-grid .z-grid-body input.z-intbox,
.z-window-overlapped .mzk-grid .z-grid-body input.z-decimalbox,
.z-window-overlapped .mzk-grid .z-grid-body input.z-combobox-input,
.z-window-overlapped .mzk-grid .z-grid-body .mzk-grid button {
height: 24px !important;
min-height: 24px !important;
min-width: auto !important;
}
.zk_pb_app .pb_table_section td {
border: 1px solid #f1f1f1 !important;
}
.z-window-overlapped .pb_table_section .z-grid-body .z-combobox-button {
top: 2px !important;
font-size: 10px !important
}
.z-window-overlapped .pb_table_section .z-grid-body .z-icon-caret-down:before {
border-width: 0 1px 1px 0 !important;
padding: 2px !important;
}
/*
==========================================================================
POP-UPS
========================================================================== */
/* Nb pop ups are rendered outside of the .zk_pb_app element in the DOM.
So we need to check the below selectors are targeting only pop ups*/
.z-window-noborder {
padding: 0 !important;
}
.z-window-overlapped {
background: white !important;
z-index: 1002;
transform: translateX(-50%) translateY(-50%) scale(1);
opacity: 1;
}
.z-window-header {
background-color: #fff;
border-bottom: 0;
font-weight: 500 !important;
border-radius: 6px 6px 0 0;
border: 0!important;
}
.z-caption-content {
font-family: 'slate pro regular';
font-size: 1.25rem !important;
line-height: 30px !important;
color: #333 !important;
padding: 1em !important;
}
.z-window-icon {
background: none !important;
border: none !important;
}
.z-window-overlapped>.z-window-content {
background-color: #fff !important;
color: #333 !important;
border-top: 1px solid #c8c8c8 !important;
padding: .571em 1em !important;
margin: 0 !important;
}
.z-window-overlapped>.z-window-content div {
border: none !important;
box-shadow: none !important;
}
/* Remove 'Close' button */
.z-window-overlapped>.z-window-content button {
/* display: none; */
}
/*
==========================================================================
COLLAPSIBLE SECTIONS
========================================================================== */
.zk_pb_app .expand,
.zk_pb_app .collapse {
display: inline-block;
background-image: none !important;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem !important;
}
.zk_pb_app .expand::before, .zk_pb_app .collapse::before{
display: inline-flex;
justify-content:center;
align-items: center;
content: " "!important;
border: solid #000;
border-width: 0 2px 2px 0;
width: 0!important;
height: 0!important;
padding: 3px;
line-height: 38px;
cursor: pointer;
}
.zk_pb_app .expand::before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.zk_pb_app .collapse::before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
/* font-family: "Material Icons"; */
/* content: "chevron_right" !important; */
}
/*
==========================================================================
FILE MANAGERS
========================================================================== */
.z-rows tr.z-grid-odd, .z-row:hover>td {
background: none !important;
}
.z-row>td {
border: none !important;
}
.z-rows input.z-textbox {
border: 1px solid #c8ced7;
border-radius: 3px!important;
background-color: #fbfbfb!important;
}
.z-rows input.z-textbox {
border: solid 1px #3a55e6 !important;
box-shadow: none !important;
}
.z-rows input::disabled {
background-color: #ececec!important;
border: 1px solid #ececec !important;
}
.z-rows input.z-textbox, .z-rows input.z-intbox, .z-rows input.z-decimalbox {
display: block;
/* width: 100%; */
padding: 10px 0 10px 8px!important;
font-family: 'Slate Pro Regular',serif;
font-size: 1rem!important;
font-weight: 400;
line-height: 1.5rem;
color: #1a1a1a;
background-clip: padding-box;
box-sizing: border-box;
height: 48px!important;
}
.mzk-fileupload.mzk-fileupload-blue input[type="submit"],
.mzk-fileupload.mzk-fileupload-blue input[type="reset"],
.z-rows button {
border: none !important;
background: linear-gradient(to bottom,#eee 0,#eee 100%) !important;
width: auto;
font-size: 1rem;
font-weight:normal !important;
min-width: 144px;
min-height: 48px !important;
margin-right: 0 !important;
border-radius: 3px!important;
padding: 0 20px !important;
}
.mzk-fileupload.mzk-fileupload-blue input[type="file"] {
}
/*Ensure buttons are not cut off at bottom of file upload area*/
.mzk-fileupload.mzk-fileupload-blue {
height: auto !important;
}
/*
==========================================================================
Rich text editors
========================================================================== */
/* Amended 31/10 to add span, fix for no right border showing in IE*/
.zk_pb_app .z-ckeditor,
.zk_pb_app .z-ckeditor > div,
.zk_pb_app .z-ckeditor > span {
/* width: auto !important; */
}
/*
==========================================================================
Read only
========================================================================== */
.zk_pb_app .z-textbox[readonly],
.zk_pb_app select[disabled] {
/* background-color: #EEE; */
}
/*ADDED 22/10*/
.zk_pb_app .z-combobox-disabled *,
.zk_pb_app .z-bandbox-disabled *,
.zk_pb_app .z-datebox-disabled *,
.zk_pb_app .z-timebox-disabled *,
.zk_pb_app .z-spinner-disabled *,
.zk_pb_app .z-doublespinner-disabled * {
color: black !important;
background-color:rgba(204,204,204,0.4) !important;
border-color: rgba(204,204,204,0.4) !important
}
.zk_pb_app z-combobox-input[readonly],
.zk_pb_app .z-bandbox-input[readonly],
.zk_pb_app .z-datebox-input[readonly],
.zk_pb_app .z-timebox-input[readonly],
.zk_pb_app .z-spinner-input[readonly],
.zk_pb_app .z-doublespinner-input[readonly] {
background-color:rgba(204,204,204,0.4)!important;
border-color: rgba(204,204,204,0.4) !important
}
.zk_pb_app .z-textbox[readonly],
.zk_pb_app .z-decimalbox[readonly],
.zk_pb_app .z-intbox[readonly],
.zk_pb_app .z-longbox[readonly],
.zk_pb_app .z-datebox[readonly],
.zk_pb_app .z-doublebox[readonly] {
background-color:rgba(204,204,204,0.4) !important;
border-color: rgba(204,204,204,0.4) !important
}
/*
==========================================================================
REQUIRED?
========================================================================== */
/*This solves the issue of the buttons being aligned at the bottom of a row*/
/*blank image*/
.product_area img[src*="blank.gif"] {
height:0 !important;
}
.product_area img[src*="blank.gif"] {
display:none;
}
.product_area img[src*="required.gif"] {
border: solid 2px red;
background-color: red;
border-radius: 50%;
margin-left: 0.5em;
color: red;
/*! width: 16px; */
}
.product_area img[src*="expand.gif"],
.product_area img[src*="collapse.gif"] {
opacity:0.8;
cursor: pointer;
}
/*Target prefix/postfix*/
.zk_pb_app .z-hlayout>.z-hlayout-inner:not(:only-child)>span.z-label {
margin: 0 0.25em;
}
.required_gif_img {
background-image: none !important;
}
.required_gif_img::before {
content: "*";
display: inline-block;
/* width: 5px; */
/* height: 5px; */
/* vertical-align: top; */
font-size: 1rem !important;
color: red;
position: absolute;
top: 0;
}
</style>
<window sclass="zk_pb_app" border="normal" xmlns:n="http://www.zkoss.org/2005/zk/native" apply="pkg$.TestComposer">
<div>Combobox unfolding in splitted from original position. Please correct the style which is causinging this</div>
<separator bar="true" height="400px"/>
<combobox style="background: #FFFFFF;">
<comboitem label="Male"/>
<comboitem label="Female"/>
<comboitem label="Other"/>
</combobox>
<separator bar="true" height="400px"/>
<button id="btn" label="Click Me To Evalute Event Binding With Composer" />
</window>
</zk>
TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}