Remove scrolling from tables when not required and stop selects from updating their own state locally
This commit is contained in:
parent
75af4cbfbf
commit
5d74763c42
2 changed files with 9 additions and 10 deletions
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import Field from "./Field.svelte"
|
||||
import Select from "./Core/Select.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let value = null
|
||||
export let label = undefined
|
||||
|
@ -21,12 +20,6 @@
|
|||
export let sort = false
|
||||
export let tooltip = ""
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const onChange = e => {
|
||||
value = e.detail
|
||||
dispatch("change", e.detail)
|
||||
}
|
||||
|
||||
const extractProperty = (value, property) => {
|
||||
if (value && typeof value === "object") {
|
||||
return value[property]
|
||||
|
@ -51,7 +44,7 @@
|
|||
{getOptionIcon}
|
||||
{getOptionColour}
|
||||
{isOptionEnabled}
|
||||
on:change={onChange}
|
||||
on:change
|
||||
on:click
|
||||
/>
|
||||
</Field>
|
||||
|
|
|
@ -300,7 +300,11 @@
|
|||
</slot>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
|
||||
<div
|
||||
class="spectrum-Table"
|
||||
class:no-scroll={!rowCount}
|
||||
style={`${heightStyle}${gridStyle}`}
|
||||
>
|
||||
{#if fields.length}
|
||||
<div class="spectrum-Table-head">
|
||||
{#if showEditColumn}
|
||||
|
@ -443,7 +447,6 @@
|
|||
/* Wrapper */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
--table-bg: var(--spectrum-global-color-gray-50);
|
||||
--table-border: 1px solid var(--spectrum-alias-border-color-mid);
|
||||
--cell-padding: var(--spectrum-global-dimension-size-250);
|
||||
|
@ -470,6 +473,9 @@
|
|||
display: grid;
|
||||
overflow: auto;
|
||||
}
|
||||
.spectrum-Table.no-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.spectrum-Table-head {
|
||||
|
|
Loading…
Reference in a new issue