CSS change - Make label on left the default label position (shoelace widgets)

Use 'et2-label-fixed' for fixed size labels, set --label-width to change the width
This commit is contained in:
nathan 2022-07-20 09:58:04 -06:00
parent af9aaa25de
commit 74ed8380ca
2 changed files with 12 additions and 10 deletions

View File

@ -37,6 +37,8 @@
--highlight-background-color: rgba(153, 204, 255, .4);
--label-color: #000000;
/* For fixed width labels - use class 'et2-label-fixed'*/
--label-width: 8em;
--input-border-color: #E6E6E6;
--input-text-color: #26537C;
@ -75,27 +77,26 @@
.hide {
display: none;
}
/* Put widget label to the left of the widget, with fixed width */
.label-on-left::part(form-control) {
::part(form-control) {
display: flex;
align-items: center;
gap: 1em;
}
.label-on-left::part(form-control-label) {
::part(form-control-label) {
flex: 0 0 auto;
width: var(--label-width, 8em);
white-space: normal;
}
.label-on-left::part(form-control-input) {
::part(form-control-input) {
flex: 1 1 auto;
}
/* Use .label-inline with .label-on-left to remove fixed label space */
.label-inline::part(form-control-label) {
/* Use .et2-label-fixed class to give fixed label size */
.et2-label-fixed::part(form-control-label) {
width: initial;
width: var(--label-width, 8em);
}
/**

View File

@ -84,12 +84,13 @@
</row>
<row valign="top">
<vbox>
<taglist-email id="info_cc" class="label-on-left" label="CC"/>
<taglist-email id="info_cc" class="et2-label-fixed" label="CC"/>
<taglist-account label="responsible"
<taglist-account label="Responsible"
statustext="select a responsible user: a person you want to delegate this task"
id="info_responsible" rows="6" multiple="true" no_lang="1"
class="label-on-left" account_type="both" empty_label="Select users or groups"
class="et2-label-fixed" account_type="both"
empty_label="Select users or groups"
onchange="app.infolog.onchangeResponsible"/>
</vbox>
<description/>