web/satellite: fix pop up position on safari

This change fixes wrong positioning of pop ups (the bucket guide, and bucket item drop down) on Safari.

Change-Id: Ia0abcc1a1450cb21e38a435218fb6c788ce546e2
This commit is contained in:
Wilfred Asomani 2022-11-21 13:43:35 +00:00
parent 567557abc3
commit 6c7f412124
2 changed files with 11 additions and 2 deletions

View File

@ -10,7 +10,10 @@
<th v-if="selectable" class="icon select"> <th v-if="selectable" class="icon select">
<v-table-checkbox :disabled="selectDisabled" :value="selected" @checkChange="onChange" /> <v-table-checkbox :disabled="selectDisabled" :value="selected" @checkChange="onChange" />
</th> </th>
<th v-for="(val, key, index) in item" :key="index" class="align-left data"> <th
v-for="(val, key, index) in item" :key="index" class="align-left data"
:class="{'guide-container': showBucketGuide(index)}"
>
<BucketGuide v-if="showBucketGuide(index)" :hide-guide="hideGuide" /> <BucketGuide v-if="showBucketGuide(index)" :hide-guide="hideGuide" />
<div v-if="Array.isArray(val)" class="few-items"> <div v-if="Array.isArray(val)" class="few-items">
<p v-for="str in val" :key="str" class="array-val">{{ str }}</p> <p v-for="str in val" :key="str" class="array-val">{{ str }}</p>
@ -166,4 +169,9 @@ export default class TableItem extends Vue {
.item-icon { .item-icon {
margin-right: 12px; margin-right: 12px;
} }
.guide-container {
position: relative;
overflow: visible;
}
</style> </style>

View File

@ -133,6 +133,7 @@ export default class BucketItem extends Resizable {
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
position: relative;
&__dropdown { &__dropdown {
position: absolute; position: absolute;