primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.87k stars 1.19k forks source link

Responsive on Tabs not working #6040

Open projct1 opened 2 months ago

projct1 commented 2 months ago

Describe the bug

https://skr.sh/sQdaK1SWBck

But Tabs component on mobile looks bad: https://skrinshoter.ru/vQdQvqSNtiu

Option scrollable are not help

Reproducer

https://

PrimeVue version

4.0.0

Vue version

3.x

Language

ALL

Build / Runtime

Nuxt

Browser(s)

any

Steps to reproduce the behavior

1) Install base primevue 2) Copy basic example Tabs markup https://skr.sh/sQdCSlU1g2H 3) Switch dev tools to mobile

Expected behavior

Looks good on mobile.

Azoorb commented 2 months ago

Meet same issue with this code :

<Tabs v-if="active_tab" :value="active_tab.key" scrollable>
    <TabList>
        <Tab v-for="tab in filtered_tabs" :key="tab.label" :value="tab.key" @click="() => push_to_route(tab.key)">
            <div class="flex flex-row gap-2 items-center">
                <i :class="tab.icon" />
                <span>{{ tab.label }}</span>
            </div>
        </Tab>
    </TabList>
</Tabs>
MukhtarSulaiman commented 1 month ago

Same issue