fix overflow on the modal sidebars

This commit is contained in:
Lone Iversen
2022-11-18 10:06:46 +01:00
parent d138af461d
commit cf0d35ee02
2 changed files with 20 additions and 14 deletions

View File

@@ -15,7 +15,8 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
css`
:host {
display: relative;
} /*
}
uui-dialog-layout {
display: flex;
flex-direction: column;
@@ -26,6 +27,7 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
padding: var(--uui-size-space-5);
box-sizing: border-box;
}
uui-scroll-container {
line-height: 0;
display: grid;
@@ -33,8 +35,9 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
overflow-y: scroll;
max-height: 100%;
min-height: 0;
}*/
}
div {
margin-top: var(--uui-size-space-5);
display: flex;
flex-direction: row-reverse;
}
@@ -65,17 +68,19 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
if (this._fields) {
return html`
<uui-dialog-layout headline="Show fields">
<uui-scroll-container id="icon-selection">
${Object.values(this._fields).map((field, index) => {
return html`<uui-toggle
name="${field.name}"
label="${field.name}"
.checked="${field.exposed}"
@change="${() => {
this._fields ? (this._fields[index].exposed = !field.exposed) : '';
}}"></uui-toggle>
<br />`;
})}
<uui-scroll-container id="field-settings">
<span>
${Object.values(this._fields).map((field, index) => {
return html`<uui-toggle
name="${field.name}"
label="${field.name}"
.checked="${field.exposed}"
@change="${() => {
this._fields ? (this._fields[index].exposed = !field.exposed) : '';
}}"></uui-toggle>
<br />`;
})}
</span>
</uui-scroll-container>
<div>
<uui-button look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>

View File

@@ -31,6 +31,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
min-height: 0;
}
div {
margin-top: var(--uui-size-space-5);
display: flex;
flex-direction: row-reverse;
}
@@ -45,7 +46,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
if (this.data) {
return html`
<uui-dialog-layout class="uui-text" headline="${this.data.name}">
<uui-scroll-container id="icon-selection">
<uui-scroll-container id="field-viewer">
<uui-table>
<uui-table-head>
<uui-table-head-cell> Field </uui-table-head-cell>