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 AMlinkAnother new ZK fiddle
2guest172.71.98.173vdfjm1Sep 26, 2022 5:45:00 AMlinkresources
index.zulzul<zk xmlns:sh="shadow" xmlns:ca="client/attribute">
<window border="normal" title="hello" apply="pkg$.TestComposer">
<div form="@id('indexForm')
@load(vm.antrag)
@save(vm.antrag, before={vm.wizardModel.nextCommand, vm.wizardModel.getStoreCommandName() })
@validator('org.lwl.ozg.base.validator.FormBeanValidator2', prefix='p_', groups=wizardModel.currentStep.validationGroups)"
sclass="lwl-ozg-antragsDiv" align="left">
<sh:apply templateURI="step.zul"
antrag="@init(indexForm)" savedAntrag="@init(vm.antrag)"/>
</div>
</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");
}
}
step.zulzul<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk xmlns:n="native" xmlns:sh="shadow" xmlns:ca="client/attribute"
xmlns:h="xhtml">
<div id="laabantragView"
validationMessages="@id('vmsgs') @init(vmsgs)"
viewModel="@id('vm') @init('pkg$.StepViewmodel', antrag=antrag)"
width="100%">
<!-- Listing all errors -->
<sh:if test="@load(! empty vmsgs)">
<div id="errors_div" sclass="lwl-ozg-errorList">
<n:h2 id="errors_h2" ca:role="alert" ca:aria-live="assertive"
sclass="z-label lwl-ozg-formErrorListHeader">
Error list:
</n:h2>
<h:ul id="errors_ul">
<forEach
items="@load(vmsgs)">
<n:li id="${c:cat3(errors, '_li_', each)}" sclass="z-label lwl-ozg-formErrorLabel">
${each}
</n:li>
</forEach>
</h:ul>
</div>
</sh:if>
<n:fieldset class="lwl-ozg-fieldset">
<n:legend role="heading" aria-level="2"
class="lwl-ozg-legend">
${c:l('laab.antrag.beschaeftigungssituation.header')}
</n:legend>
<div ca:aria-live="polite" >
<forEach items="@load(indexForm.teilaufgaben)">
<if
test="@load(!(indexForm.teilaufgaben.indexOf(each) eq 0))">
<separator />
</if>
<div id="${ 'teilaufgabe_div'.concat(indexForm.teilaufgaben.indexOf(each)) }" sclass="lwl-ozg-dyn-section"
style="margin-bottom: 1rem; border-bottom: 1px solid #e5e5e5">
<n:h3>
${c:l('laab.antrag.beschaeftigungssituation.teilaufgabe.listtitle')}
(${indexForm.teilaufgaben.indexOf(each)+1})
</n:h3>
<formRow type="textbox"
fieldId="${ 'teilaufgabe'.concat(indexForm.teilaufgaben.indexOf(each)) }"
label="${c:l('laab.antrag.beschaeftigungssituation.teilaufgabe')}"
maxlength="100"
value="@ref(each.teilaufgabe)"
key="${c:cat3('p_teilaufgaben[',indexForm.teilaufgaben.indexOf(each),'].teilaufgabe')}"
groups="@ref(vm.liveValidationGroup)"
error="@ref(vmsgs[ 'p_teilaufgaben['.concat(indexForm.teilaufgaben.indexOf(each)).concat('].teilaufgabe')])" />
<formRow fieldId="${ 'teilaufgabeGewichtung'.concat(indexForm.teilaufgaben.indexOf(each)) }"
type="number"
label="${c:l('laab.antrag.beschaeftigungssituation.gewichtung')}"
value="@ref(each.gewichtung)"
changeEvent="calculateTeilaufgabenGesamt"
maxlength="3" groups="@ref(vm.liveValidationGroup)"
key="${c:cat3('p_teilaufgaben[',indexForm.teilaufgaben.indexOf(each),'].gewichtung')}"
error="@ref(vmsgs[ 'p_teilaufgaben['.concat(indexForm.teilaufgaben.indexOf(each)).concat('].gewichtung')])" />
<formRow type="textbox"
fieldId="${ 'teilaufgabeProbleme'.concat(indexForm.teilaufgaben.indexOf(each)) }"
label="${c:l('laab.antrag.beschaeftigungssituation.probleme')}"
maxlength="200" value="@ref(each.probleme)"
key="${c:cat3('p_teilaufgaben[',indexForm.teilaufgaben.indexOf(each),'].probleme')}"
groups="@ref(vm.liveValidationGroup)"
error="@ref(vmsgs[ 'p_teilaufgaben['.concat(indexForm.teilaufgaben.indexOf(each)).concat('].probleme')])" />
<!-- Teilaufgabe entfernen -->
<if
test="@load(!(indexForm.teilaufgaben.indexOf(each) eq 0))">
<n:br />
<button
ca:aria-label="${'Teilaufgabe Nr.'.concat(indexForm.teilaufgaben.indexOf(each)+1).concat(' entfernen')}"
sclass="z-align-left lwl-ozg-mainButton z-button"
label="${c:l('laab.antrag.beschaeftigungssituation.teilaufgabe.entfernen')}"
onClick="@command('removeTeilaufgabe', index=indexForm.teilaufgaben.indexOf(each), vmsgs=vmsgs)" />
<n:br />
</if>
</div>
</forEach>
</div>
<!-- Teilaufgabe hinzufügen -->
<button sclass="z-align-left lwl-ozg-mainButton z-button"
label="${c:l('laab.antrag.beschaeftigungssituation.teilaufgabe.hinzufuegen')}"
onClick="@command('addEmptyTeilaufgabe')" />
<formRow fieldId="teilaufgabenGewichtungGesamt" type="number"
label="${c:l('laab.antrag.beschaeftigungssituation.gewichtung.summe')}"
value="@ref(vm.teilaufgabenGewichtungGesamt)" readonly="true" />
<div>
<if test="@load(vm.displayTeilaufgabenHigh)">
<div class="lwl-ozg-zust">
<label sclass="lwl-ozg-zust-hinweis"
value="${c:l('laab.antrag.beschaeftigungssituation.prozentInformation.max')}" />
</div>
</if>
<if test="@load(vm.displayTeilaufgabenLow)">
<div class="lwl-ozg-zust">
<label sclass="lwl-ozg-zust-hinweis"
value="${c:l('laab.antrag.beschaeftigungssituation.prozentInformation.min')}" />
</div>
</if>
</div>
</n:fieldset>
<stepError size="@bind(vmsgs.size())"
errorMessage="${c:l('ozg.errorMessage')}" />
</div>
</zk>StepViewmodel.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 StepViewmodel {
private pkg$.LaabAntragDTO antrag;
@Init
public void init(@BindingParam("antrag") LaabAntragDTO antrag) {
this.antrag = antrag;
}
@Command
@NotifyChange("antrag")
public void addEmptyTeilaufgabe() {
if (antrag.getTeilaufgaben().size() < 10) { // maximal 10 Teilaufgaben
antrag.getTeilaufgaben().add(new LaabTeilaufgabeDTO());
// Fix-2097 - Binder verliert Liste nach dem Hochladen, muss daher manuell
// notified werden
BindUtils.postNotifyChange(null, null, antrag, "teilaufgaben");
}
}
@Command
@NotifyChange({ "antrag" })
public void removeTeilaufgabe(@BindingParam("index") int index,
@BindingParam("vmsgs") ValidationMessagesImpl vmsgs) {
List<LaabTeilaufgabeDTO> teilaufgaben = antrag.getTeilaufgaben();
if (antrag.getTeilaufgaben().size() > 0 && teilaufgaben.size() >= index + 1) {
teilaufgaben.remove(index);
// Fix-2097 - Binder verliert Liste nach dem Hochladen, muss daher manuell notified werden
BindUtils.postNotifyChange(null, null, antrag, "teilaufgaben");
String prefix = "p_teilaufgaben[%d].".formatted(index);
vmsgs.clearKeyMessages(prefix + "teilaufgabe");
vmsgs.clearKeyMessages(prefix + "probleme");
BindUtils.postNotifyChange(vmsgs, "*");
}
}
}
}
LaabAntragDTO.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.*;
import javax.validation.Valid;
public class LaabAntragDTO {
private List<LaabTeilaufgabeDTO> teilaufgaben;
public LaabAntragDTO() {
this.setAntragstellenderBetrieb(new LaabBetriebDTO(true));
this.setAbweichendeBetriebsstaette(new LaabBetriebDTO());
this.setBeschaeftigter(new BeschaeftigterDTO(true));
this.setTeilaufgaben(new ArrayList<>());
this.getTeilaufgaben().add(new LaabTeilaufgabeDTO());
}
@Valid
public getTeilaufgaben() {
return this.teilaufgaben;
}
}
LaabTeilaufgabeDTO.javajavaimport javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import org.lwl.ozg.base.validator.ValidationObject;
import org.lwl.ozg.base.validator.groups.AntragLiveValidation;
import org.lwl.ozg.base.validator.groups.AntragValidation;
import org.lwl.ozg.lbh.validator.groups.SituationValidation;
import org.springframework.util.StringUtils;
import org.zkoss.bind.annotation.DependsOn;
import org.zkoss.bind.annotation.Transient;
public class LaabTeilaufgabeDTO implements ValidationObject {
private String teilaufgabe;
private String probleme;
public LaabTeilaufgabeDTO() {}
public LaabTeilaufgabeDTO(String teilaufgabe, String probleme) {
this.teilaufgabe = teilaufgabe;
this.probleme = probleme;
}
@NotBlank
@Size(max=100)
public String getTeilaufgabe(){
return this.teilaufgabe;
}
@NotBlank
@Size(max = 200)
public String getProbleme(){
return this.probleme;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
return false;
}
@Override
public int hashCode() {
final int prime = 29;
int result = 1;
result = prime * result + ((null == teilaufgabe) ? 0 : teilaufgabe.hashCode());
result = prime * result + ((null == probleme) ? 0 : probleme.hashCode());
return result;
}
@Transient
@DependsOn({ "teilaufgabe", "probleme" })
public boolean isValid() {
boolean valid = (StringUtils.hasText(this.getTeilaufgabe())
&& this.getTeilaufgabe().length() <= 100
&& (StringUtils.hasText(this.getProbleme())
&& this.getProbleme().length() <= 200);
return valid;
}
}
style.csscss/* Konstanten */
:root {
--a-FooterLink-clr-hv: #464646;
--z-a-FooterLink: #797979;
--lwl-ozg-main-darkblue: #00325f;
--lwl-ozg-main-darkblue-hover: #002445;
--lwl-ozg-main-darkgrey: #878185;
--lwl-ozg-main-darkgrey-hover: #615c5f;
--lwl-ozg-main-darkred: #9b182a;
}
/* allgemeine ZK-Komponenten */
body * :not ([class*="z-icon-"], [checkbox]) {
font-family: open_sansregular, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
line-height: initial;
color: #00325f;
line-height: normal;
}
.z-a, .z-label, .z-button, .z-window-header, .z-panel-header,
.z-menu-text, .z-menuitem-text, .z-column-content, .z-row-content,
.z-group-content, .z-groupfoot-content, .z-footer-content {
font-family: open_sansregular, Arial, sans-serif;
}
/* Layout ohne Abstaende */
body {
padding: 0px;
}
.z-north, .z-center, .z-south, .z-window, .z-window-content, z-body {
padding: 0;
}
.z-north-body, .z-south-body, .z-west-body, .z-center-body, .z-east-body
{
padding: 0px;
}
.z-row-content {
padding: 5px 0px 0px 0px;
}
/* ZK Anpassungen */
.z-row:hover>.z-row-inner, .z-row:hover>.z-cell {
background: none;
}
.z-window, .z-grid, .z-south, .z-row .z-row-inner, .z-row .z-cell {
border: none;
}
.z-window-header {
font-size: 2.375rem;
line-height: 1.21053;
color: #00325f;
}
.z-vlayout-inner {
padding: 10px 16px 5px 0px;
}
.z-groupbox-notitle .z-groupbox-content {
border-top: none;
padding: 0px;
}
.z-groupbox-content .z-vlayout-inner {
padding: 10px 0px 16px 0px;
}
.z-textarea, .z-textarea:hover {
border-radius: 4px;
width: 100%;
font-size: 1.0625rem;
min-height: 2.625rem;
border: 1px solid #00325f;
color: #00325f;
margin-bottom: 0.5rem;
resize: vertical;
padding: 8px;
}
.z-textbox, .z-textbox:hover, .z-intbox, .z-intbox:hover,
.z-combobox-input, .z-combobox-input:hover, .z-doublebox, .z-doublebox:hover
{
width: 100%;
font-size: 1.0625rem;
min-height: 2.625rem;
border: 1px solid #00325f;
color: #00325f;
margin-bottom: 0.5rem;
}
.z-textbox:focus, .z-textbox[readonly]:focus, .z-intbox:focus,
.z-doublebox:focus, .z-datebox-input:focus, .z-textarea:focus,
.z-dropdown-input:focus, .z-textarea[readonly]:focus, .z-combobox-input:focus,
.z-combobox-input[readonly]:focus {
border-color: #00325f;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
rgba(0, 50, 95, .6);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.z-textbox[disabled], .z-decimalbox[disabled], .z-intbox[disabled],
.z-doublebox[disabled], .z-longbox[disabled], .z-doublebox[disabled],
.z-dropdown[disabled], .z-datebox-disabled>input, .z-combobox-input[disabled]:focus
{
color: #00325f !important;
}
.z-textbox[disabled]:hover, .z-textbox[readonly]:hover, .z-decimalbox[disabled]:hover,
.z-intbox[disabled]:hover, .z-doublebox[disabled]:hover, .z-longbox[disabled]:hover,
.z-doublebox[disabled]:hover, .z-datebox-disabled .z-datebox-button:hover,
.z-combobox-input[disabled]:hover, .z-combobox-input[readonly]:hover {
border-color: #00325f !important;
}
.z-datebox, .z-datebox-input, .z-datebox-button, .z-datebox-readonly>input,
.z-dropdown {
font-size: 1.0625rem;
min-height: 2.625rem;
color: #00325f;
margin-bottom: 0.5rem;
}
.z-datebox, .z-datebox:hover, .z-dropdown, .z-dropdown:hover {
max-width: 430px;
min-width: 200px;
width: 100%;
}
.z-datebox-icon, .z-dropdown-icon {
font-size: 1.5rem;
color: #00325f;
}
.z-datebox-input, .z-datebox-button, .z-datebox-input:hover,
.z-datebox-button:hover, .z-datebox-input:focus, .z-datebox-button:focus,
.z-datebox-popup, .z-dropdown {
border: 1px solid #00325f;
}
.z-button[disabled]:focus, .z-button[disabled]:hover {
background-color: #D9D9D9;
}
/* Radio- und Checkboxen */
.z-radio {
line-height: 35px;
display: block;
}
.z-radio::after {
content: "";
clear: both;
display: table;
}
.z-radio-content, .z-checkbox-content {
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
}
.z-radio-content {
display: block;
width: calc(100% - 35px);
float: right;
}
.z-combobox {
width: 100%;
height: auto;
}
.z-combobox-readonly.lwl-ozg-bgwhite>input {
background-color: #ffffff;
}
.z-combobox-input, .z-combobox-input:hover {
margin-bottom: 0;
}
.z-combobox-button {
height: 100%;
border: 1px solid #00325f;
line-height: normal;
}
.z-combobox-button:hover, .z-combobox-popup, .z-combobox-open .z-combobox-button,
.z-combobox-input.z-combobox-hover+.z-combobox-button,
.z-combobox-input:focus+.z-combobox-button {
border-color: #00325f;
background-color: #ffffff;
}
.lwl-ozg-comboboxInvalid .z-combobox-input, .lwl-ozg-comboboxInvalid .z-combobox-input:hover,
.lwl-ozg-comboboxInvalid .z-combobox-button, .lwl-ozg-comboboxInvalid .z-combobox-button:hover,
.lwl-ozg-comboboxInvalid .z-combobox-popup, .lwl-ozg-comboboxInvalid .z-combobox-open .z-combobox-button,
.lwl-ozg-comboboxInvalid .z-combobox-input.z-combobox-hover+.z-combobox-button,
.lwl-ozg-comboboxInvalid .z-combobox-input:focus+.z-combobox-button {
border: 1px solid #9b182a;
}
.lwl-ozg-comboboxInvalid .z-combobox-input:focus,
.lwl-ozg-comboboxInvalid .z-combobox-input[readonly]:focus {
border-color: #9b182a;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #9b182a;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.z-comboitem-selected {
color: #b4b2b2;
}
.z-dropdown {
height: 34px;
padding: 8px 48px 8px 8px;
border-radius: 4px;
}
input[type="radio"] {
width: 20px;
height: 20px;
border: 1px solid #00325f;
}
input[type="radio"]::before {
height: 12px;
width: 12px;
}
input[type="radio"]:checked {
border-color: #00325f;
}
input[type="radio"]:hover, input[type="radio"]:focus {
border: 1px solid #00325f;
}
input[type="radio"]:hover::before, input[type="radio"]:focus::before {
background-color: #878185;
}
input[type="radio"]:checked::before {
background-color: #00325f;
}
input[type="checkbox"][disabled] {
cursor: default;
color: rgba(0, 0, 0, 0.34);
background-color: #F2F2F2 !important;
}
.z-caption input {
font-size: inherit;
}
.z-checkbox {
line-height: 1.61111;
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
}
input[type="checkbox"] {
border-color: #00325f;
}
input[type="checkbox"]:checked {
background-color: #00325f;
}
input[type="checkbox"]:hover, input[type="checkbox"]:focus {
border-color: #00325f;
}
/* eigene Designs */
* {
font-family: open_sansregular, Arial, sans-serif;
}
input:invalid {
box-shadow: none; /* Firefox fix */
}
input[type=number] {
-moz-appearance: textfield;
}
.lwl-ozg-dyn-section {
padding-bottom: 1rem;
border-bottom: 1px solid #e5e5e5;
}
.lwl-ozg-summary .z-vlayout-inner:nth-of-type(2) {
padding-top: 0.3vH;
}
.lwl-ozg-summary .z-vlayout-inner:nth-of-type(1) label {
text-decoration: underline;
}
.lwl-ozg-summary ul {
color: #00325f;
font-size: 1.0625rem;
margin-top: 0;
}
.lwl-ozg-summary-key {
text-decoration: underline;
width: 100%;
line-height: 1.61111;
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
display: inline-block;
cursor: default;
}
.lwl-ozg-summary-value {
padding-top: 0.3vH;
width: 100%;
line-height: 1.61111;
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
display: inline-block;
cursor: default;
}
.lwl-ozg-fieldset {
border: none;
margin: 0px;
}
.lwl-ozg-legend {
padding-top: 2rem;
display: block;
width: 100%;
font-size: 1.6875rem;
line-height: 1.42857;
color: #333;
border-bottom: 1px solid #e5e5e5;
}
.lwl-ozg-mainButton, .lwl-ozg-secondButton, .lwl-ozg-deleteButton,
.lwl-ozg-downloadButton {
padding: .5rem .875rem;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.42857;
border-radius: .25rem;
border: none;
transition: background .15s ease-out;
}
.lwl-ozg-rightButton {
float: right;
}
.lwl-ozg-mainButton:hover, .lwl-ozg-mainButton:focus,
.lwl-ozg-downloadButton:hover, .lwl-ozg-downloadButton:focus {
background-color: #002445;
}
.lwl-ozg-mainButton {
background-color: #00325f;
margin-bottom: 1rem;
margin-top: 0.5rem;
}
.lwl-ozg-secondButton {
background-color: #878185;
margin-bottom: 1rem;
margin-top: 0.5rem;
}
.lwl-ozg-downloadButton {
background-color: #00325f;
margin-bottom: 0.1rem;
margin-top: 0.1rem;
}
.lwl-ozg-deleteButton {
background-color: #878185;
}
.lwl-ozg-secondButton:hover, .lwl-ozg-secondButton:focus,
.lwl-ozg-deleteButton:hover, .lwl-ozg-deleteButton:focus {
background-color: #615c5f;
}
.lwl-ozg-titleLabel {
font-size: 2.375rem;
line-height: 1.21053;
font-weight: 400;
color: #00325f;
display: inline-block;
}
.lwl-ozg-textboxLabel {
line-height: 1.61111;
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
display: inline-block;
}
.lwl-ozg-formLabel, legend.lwl-ozg-textboxLabel {
width: 100%;
line-height: 1.61111;
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
cursor: default;
display: block;
margin-top: 1rem;
margin-bottom: 0.75rem;
}
.lwl-ozg-errorList, .lwl-ozg-zust {
padding: 20px;
border: 2px solid #9b182a;
background-color: #f5e7e9;
}
.lwl-ozg-zust span {
font-weight: 600;
color: #9b182a;
font-size: 1rem;
}
.lwl-ozg-zust-positive {
padding: 20px;
border: 2px solid #00325f;
background-color: #d9dcfa;
}
.lwl-ozg-zust-positive span {
font-weight: 600;
color: #00325f;
font-size: 1rem;
}
.lwl-ozg-errorList ul {
padding-left: 0px;
margin-top: 0px;
list-style-position: inside;
}
.lwl-ozg-errorList ul li {
font-size: 1rem;
display: list-item;
}
.lwl-ozg-stepError {
background-color: #f5e7e9;
border: 1px solid #9b182a;
padding: 10px;
display: block;
line-height: 1.61111;
font-weight: 600;
color: #9b182a;
font-size: 1.0625rem;
margin: 1rem 0 1rem 0;
}
.lwl-ozg-formErrorLabel {
line-height: 1.61111;
font-weight: 600;
color: #9b182a;
cursor: default;
display: inline-block;
font-size: 1.0625rem;
margin-top: 0.5rem;
width: 100%;
}
.lwl-ozg-formErrorListHeader {
line-height: 1.61111;
font-weight: 600;
color: #9b182a;
cursor: default;
font-size: 1.1625rem;
display: inline-block;
margin: 0;
}
.lwl-ozg-headerLabel {
font-size: 1.6875rem;
color: #333;
border-bottom: 1px solid #e5e5e5;
margin-top: 2rem;
display: inline-block;
}
.lwl-ozg-checkBoxLabel {
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
}
.lwl-ozg-gridLabel {
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
}
.lwl-ozg-listLabel, p, ul {
margin-bottom: 0.25rem;
color: #000;
font-size: 1.125rem;
line-height: 1.61111;
display: block;
}
.lwl-ozg-textboxInvalid, .lwl-ozg-textboxInvalid:hover,
.lwl-ozg-textareaInvalid, .lwl-ozg-textareaInvalid:hover {
border: 1px solid #9b182a;
}
.lwl-ozg-textboxInvalid:focus, .lwl-ozg-textareaInvalid:focus {
border-color: #9b182a;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #9b182a;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.lwl-ozg-antragsDiv {
min-width: 380px;
max-width: 1024px;
padding: 0 20px 0 20px;
}
.lwl-ozg-buttonDiv {
padding: 1.5rem 20px 0 20px;
}
.lwl-ozg-innerVlayout .z-vlayout-inner {
padding: 15px 0px 5px 0px;
}
.lwl-ozg-groupBox .z-groupbox-content {
border: none;
}
.lwl-ozg-groupBox.groupBox-expandable {
clear: left;
}
.groupBox-expandable .z-groupbox-content {
border-width: 3px;
border-color: #b4b2b2;
border-style: solid;
padding: 0 1em;
}
.lwl-ozg-groupbox-attachements {
margin-bottom: 1.75em;
}
.lwl-ozg-upload-wrapper-box {
display: flex;
margin: 5px 0px 5px 0px;
}
.lwl-ozg-upload-filename-box {
flex: 0 0 30%;
}
.lwl-ozg-upload-filename-box .lwl-ozg-gridLabel {
line-height: 1.42857;
padding: .5rem 0;
display: inline-block;
}
.lwl-ozg-upload-removeFile-box {
flex: 1;
}
.lwl-ozg-important {
background-color: #eaeaea;
padding: 5px;
margin-bottom: 1rem;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
rgba(135, 129, 133, 1);
}
.lwl-ozg-p-no-top-margin {
margin-top: 0px;
}
.lwl-ozg-vorfragen-spacer {
height: 1rem;
border: 0;
margin: 0;
}
/* Footer */
/* horizontal mittig ausgerichteter Text im South-BorderLayout */
.footer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
text-align: right;
display: flex;
}
.lwl-ozg-southArea {
border-top: 1px solid #e5e5e5;
}
/* Header */
.lwl-ozg-northHeader {
border-bottom: 1px solid #e5e5e5;
}
/* Wizard Step Bar */
.lwl-ozg-wizardStep-wrapper {
margin-top: 1rem;
}
.lwl-ozg-wizardStep-header:after {
content: "";
display: table;
clear: both;
}
.lwl-ozg-wizardStep-wrapper h2 {
margin: 0;
cursor: pointer;
display: inline-block;
}
.lwl-ozg-wizardStep-wrapper .v1 button, .lwl-ozg-wizardStep-wrapper .v1 button:hover,
.lwl-ozg-wizardStep-wrapper .v1 button:active,
.lwl-ozg-wizardStep-wrapper .v1 button:focus {
background: transparent;
color: #00325f;
border: 0px none;
padding: 0 5px;
vertical-align: super;
font-size: 0.75rem;
box-shadow: none;
}
.lwl-ozg-wizardStep-wrapper .v2 button, .lwl-ozg-wizardStep-wrapper .v2 button:hover,
.lwl-ozg-wizardStep-wrapper .v2 button:active,
.lwl-ozg-wizardStep-wrapper .v2 button:focus {
float: right;
background-color: #002445;
font-size: 0.75rem;
}
.lwl-ozg-wizardStep-wrapper .showbutton {
display: none;
}
.lwl-ozg-wizardStep-wrapper .hidebutton {
display: inline-block;
}
.lwl-ozg-wizardStep-wrapper #navList {
display: flex;
flex-wrap: wrap;
}
.lwl-ozg-wizardStep-wrapper ol {
list-style: none;
margin: 0;
padding: 0;
}
.lwl-ozg-wizardStep-wrapper li {
display: inline-block;
margin-left: 4px;
}
.lwl-ozg-wizardStep-enabled, .lwl-ozg-wizardStep-disabled {
display: inline-block;
padding: 0.5rem;
font-size: 1.125rem;
color: white;
text-align: center;
position: relative;
margin: 2px 0px 2px 0px;
user-select: none;
}
.lwl-ozg-wizardStep-enabled>label, .lwl-ozg-wizardStep-disabled>label {
padding-left: 5px;
}
.lwl-ozg-wizardStep-disabled>label {
cursor: default;
}
.lwl-ozg-wizardStep-enabled:after, .lwl-ozg-wizardStep-disabled:after,
.lwl-ozg-wizardStep-enabled:before, .lwl-ozg-wizardStep-disabled:before
{
content: '';
position: absolute;
top: 0%;
width: 0;
height: 0;
border-top: solid 16px transparent;
border-bottom: solid 16px transparent;
}
.lwl-ozg-wizardStep-enabled:after {
border-left: solid 8px #00325f;
margin-left: 8px;
z-index: 1;
}
.lwl-ozg-wizardStep-enabled:hover:after {
border-left: solid 8px #002445;
}
.lwl-ozg-wizardStep-disabled:after {
border-left: solid 8px #b4b2b2;
margin-left: 8px;
z-index: 1;
}
.lwl-ozg-wizardStep-enabled:before, .lwl-ozg-wizardStep-disabled:before
{
margin-left: -8px;
border-left: solid 8px white;
}
.lwl-ozg-wizardStep-wrapper li:first-child .z-div:before,
.lwl-ozg-wizardStep-wrapper li:first-child .z-div:after,
.lwl-ozg-wizardStep-wrapper li:nth-child(2) .z-div:before,
.lwl-ozg-wizardStep-wrapper li:last-child .z-div:after {
display: none;
}
.lwl-ozg-wizardStep-enabled {
background-color: #00325f;
cursor: pointer;
}
.lwl-ozg-wizardStep-enabled:hover {
background-color: #002445;
}
.lwl-ozg-wizardStep-disabled {
background-color: #b4b2b2;
cursor: default;
}
/* Link im Footer */
a.FooterLink {
text-decoration: none;
font-weight: normal;
}
a.FooterLink:hover {
text-decoration: underline;
}
.z-a.FooterLink {
color: #464646;
}
.footer-copyright, .footer-legal {
display: inline-block;
width: 50%;
margin-top: 5px;
}
.footer-copyright {
text-align: left;
}
.footer-legal {
text-align: right;
}
.footer-legal a {
margin-right: 10px;
}
.footer-version-label {
color: #a1a1a1;
font-size: 10px;
text-decoration: none;
font-weight: normal;
}
.hint {
margin-left: 1rem;
line-height: 1.61111;
font-weight: 400;
color: #00325f;
font-size: 1.0625rem;
}
.hint.checkboxInputLabel {
margin-left: 0;
margin-bottom: 1rem;
font-size: 0.9375rem;
}
.textarea-hint {
margin-left: 1rem;
color: #00325f;
}
/* DATE INPUT SPECIFIC */
.dateInputPartDiv {
display: inline-block;
margin-right: 20px;
margin-bottom: 0;
}
.dateInputLabel {
display: block;
margin-bottom: 0.4em
}
/* END DATE INPUT SPECIFIC */
/* ERROR PAGE */
.errorHeadline span {
font-size: 6rem;
font-weight: 600;
color: #00325f;
}
.errorHeadline2 span {
font-size: 2.375rem;
line-height: 1.21053;
font-weight: 400;
color: #00325f;
margin: 1.25rem 0;
display: block;
}
.errorPretext span {
font-size: 1.3125rem;
line-height: 1.42857;
color: #00325f;
margin-bottom: 1rem;
display: block;
}
.errorPageText span {
font-size: 1.125rem;
line-height: 1.61111;
}
a.errorPageTextLink:active, a.errorPageTextLink {
color: #000;
border-bottom: 1px solid #000;
}
a.errorPageTextLink:hover, a.errorPageTextLink:focus {
color: #000;
border-bottom: 1px dotted #000;
text-decoration: none;
}
.errorPageSeparator {
height: 30px;
}
a.errorPageButton, a.errorPageButton:visited {
border: 1px solid #00325f;
padding: .5rem .875rem;
font-size: 1.0625rem;
line-height: 1.42857;
border-radius: .25rem;
text-decoration: none;
color: #00325f;
font-weight: 600;
}
a.errorPageButton:hover, a.errorPageButton:focus {
background-color: #00325f;
border-color: #00325f;
color: #fff;
}
/* END ERROR PAGE */
/* CONFIRMATION PAGE */
.lwl-ozg-confirmation-window {
width: 500px;
padding: 10px;
background-color: white;
}
.lwl-ozg-confirmation-title {
color: #00325f;
padding-top: .625rem;
display: block;
width: 100%;
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.6875rem;
line-height: 1.42857;
border-bottom: 1px solid #e5e5e5;
}
.lwl-ozg-confirmation-information {
margin-bottom: 0.25rem;
color: #00325f;
font-size: 1.125rem;
line-height: 1.61111;
display: block;
padding-bottom: 20px;
}
.lwl-ozg-confirmation-window button {
min-width: 120px;
}
/* END CONFIRMATION PAGE */
.has-control-menu .banner-cookie {
display: none;
}
.banner-cookie {
position: fixed;
z-index: 9999;
bottom: 0;
color: #fff;
width: 100% !important;
padding: 15px 0 0;
background: rgba(0, 50, 95, .8);
}
.banner-cookie header {
display: none;
}
.banner-cookie .container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.banner-cookie .cookie-wrapper {
margin-bottom: 1rem;
overflow: hidden;
display: -ms-flexbox;
display: flex;
}
.banner-cookie .cookie-wrapper span {
-ms-flex-order: 1;
order: 1;
-ms-flex: 1;
flex: 1;
flex-grow: 1;
-ms-flex-positive: 3;
flex-grow: 3;
-ms-flex-item-align: center;
align-self: center;
}
.banner-cookie .cookie-wrapper .cookie-controls {
-ms-flex-order: 2;
order: 2;
text-align: left;
float: left;
-ms-flex: 1;
flex: 1;
}
.banner-cookie .cookie-wrapper .cookie-controls a:first-of-type {
-ms-flex-order: 2;
order: 2;
}
.banner-cookie .btn {
margin-left: 1rem;
color: #ffffff !important;
text-decoration: none !important;
}
.egh-header {
padding-bottom: 12px;
}
.egh-header::after {
content: "";
display: block;
clear: both;
}
.egh-header span {
display: block;
max-width: 100%;
width: 395px;
float: left;
}
.lik-header {
padding: 20px 12px 12px 12px;
}
.lik-header::after {
content: "";
display: block;
clear: both;
}
.lik-header span {
display: block;
max-width: 100%;
width: 600px;
float: left;
}
.ozg-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -5px;
margin-right: -5px;
}
.ozg-col-sm-2 {
width: 16.666667%;
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.ozg-col-sm-4 {
width: 33.333333%;
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.ozg-col-sm-8 {
width: 66.666667%;
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.ozg-col-sm-10 {
width: 83.3333%;
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.ozg-col-sm-2, .ozg-col-sm-4, .ozg-col-sm-8, .ozg-col-sm-10 {
padding: 0 5px;
box-sizing: border-box;
}
@media ( min-width :768px) {
.banner-cookie .container {
max-width: 100%;
width: 768px;
}
}
@media ( min-width :968px) {
.banner-cookie .container {
max-width: 100%;
width: 968px;
}
}
@media ( min-width :1440px) {
.banner-cookie .container {
max-width: 100%;
width: 1440px;
}
}
@media only screen and (max-width: 767px) {
img {
max-width: 100% !important;
}
.z-button {
white-space: normal;
}
.lwl-ozg-northHeader, .z-center, .z-center-body, .z-south {
position: relative !important;
overflow: visible !important;
}
.z-center {
top: 0 !important;
height: auto !important;
}
.z-center-body {
height: auto !important;
}
.z-borderlayout {
overflow: visible;
}
#topHeadline {
font-size: 1.5rem;
margin-bottom: 0;
}
.lwl-ozg-northHeader img {
float: none !important;
padding: 10px 0;
}
.lwl-ozg-northHeader, .z-north-body {
height: auto !important;
}
.lwl-ozg-antragsDiv {
min-width: auto !important;
}
.lwl-ozg-antragsDiv>div>div:first-child, .lwl-ozg-antragsDiv>div>div:last-child
{
margin-top: 1.5rem !important;
}
.lwl-ozg-antragsDiv::after {
content: "";
display: block;
clear: both;
padding-bottom: 20px;
}
.z-south {
height: auto !important;
top: 30px !important;
padding: 10px;
}
.z-south-body {
height: auto !important;
}
.footer-copyright, .footer-legal, .footer {
width: 100%;
}
.footer {
top: 0;
transform: initial;
-webkit-transform: initial;
text-align: left;
display: block;
}
.footer-copyright span {
padding-left: 0 !important;
}
.footer-version-label {
padding: 10px;
display: block;
}
.z-notification {
right: 0 !important;
left: auto !important;
}
.z-window-modal {
top: 0 !important;
height: 100% !important;
width: 100% !important;
}
.lwl-ozg-upload-wrapper-box, .lwl-ozg-upload-filename-box,
.lwl-ozg-upload-removeFile-box {
display: block;
}
.lwl-ozg-wizardStep-wrapper .showbutton {
display: inline-block;
}
.lwl-ozg-wizardStep-wrapper #navList, .lwl-ozg-wizardStep-wrapper .hidebutton
{
display: none;
}
.ozg-col-sm-2, .ozg-col-sm-4, .ozg-col-sm-8, .ozg-col-sm-10 {
width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media only screen and (max-width: 440px) {
.lwl-ozg-upload-filename-box span {
overflow: auto;
max-width: 85%;
width: 300px
}
}