fix: scroll tab

This commit is contained in:
puriphatt 2024-07-25 10:48:04 +00:00
parent 9656ede0cb
commit c8a8e913d2
3 changed files with 10 additions and 9 deletions

View file

@ -153,8 +153,9 @@ function reset() {
resetValidation resetValidation
/> />
</div> </div>
<div <div
class="col-10 form-body" class="col-10 form-body full-width"
style="position: relative" style="position: relative"
:class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`" :class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`"
> >

View file

@ -175,7 +175,6 @@ const currentTab = defineModel<string>('currentTab');
class="content-tab text-capitalize" class="content-tab text-capitalize"
:name="tab.name" :name="tab.name"
:label="$t(tab.label)" :label="$t(tab.label)"
style="z-index: 999"
/> />
</q-tabs> </q-tabs>
</div> </div>
@ -352,8 +351,4 @@ const currentTab = defineModel<string>('currentTab');
border-top-right-radius: var(--radius-2); border-top-right-radius: var(--radius-2);
position: relative; position: relative;
} }
:deep(.q-tabs__content) {
overflow: visible;
}
</style> </style>

View file

@ -68,7 +68,7 @@ function close(index: number) {
} }
</script> </script>
<template> <template>
<div class="row no-wrap"> <div class="row no-wrap full-width">
<q-btn <q-btn
:id="`${prefixId}-btn-add`" :id="`${prefixId}-btn-add`"
class="q-px-lg bordered-b bordered-r app-text-muted" class="q-px-lg bordered-b bordered-r app-text-muted"
@ -84,10 +84,13 @@ function close(index: number) {
:active-color="$q.dark.isActive ? 'white' : 'primary'" :active-color="$q.dark.isActive ? 'white' : 'primary'"
indicator-color="transparent" indicator-color="transparent"
active-class="bordered-r" active-class="bordered-r"
dense
v-model="tab" v-model="tab"
align="left" align="left"
inline-label inline-label
class="text-grey" mobile-arrows
class="text-grey col"
:breakpoint="0"
style="background-color: var(--_body-bg); max-width: 55vw" style="background-color: var(--_body-bg); max-width: 55vw"
> >
<q-tab <q-tab
@ -102,15 +105,17 @@ function close(index: number) {
:class="tab === index ? '' : 'bordered-b bordered-r'" :class="tab === index ? '' : 'bordered-b bordered-r'"
> >
<q-btn <q-btn
v-if="!readonly && customerBranch?.length !== 1"
round round
flat flat
:id="`${prefixId}-close-tab-${index}`" :id="`${prefixId}-close-tab-${index}`"
icon="mdi-close" icon="mdi-close"
size="sm"
padding="xs" padding="xs"
color="red" color="red"
class="q-ml-sm"
:class="{ dark: $q.dark.isActive }" :class="{ dark: $q.dark.isActive }"
@click.stop="close(index)" @click.stop="close(index)"
v-if="!readonly"
/> />
</q-tab> </q-tab>
</q-tabs> </q-tabs>