1
0
forked from test/crm

fix: added vertical and horizontal scroll in listview

This commit is contained in:
Shariq Ansari 2023-07-25 11:33:20 +05:30
parent 0669f3d7a1
commit bb471ee4ef
3 changed files with 51 additions and 51 deletions

View File

@ -1,5 +1,4 @@
<template> <template>
<div class="inline-flex h-full flex-col border-r w-[220px]">
<div class="flex p-2"> <div class="flex p-2">
<UserDropdown /> <UserDropdown />
</div> </div>
@ -22,7 +21,6 @@
</NavLinks> </NavLinks>
</nav> </nav>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="flex h-full"> <div class="flex h-screen w-screen">
<div> <div class="h-full border-r w-[220px]">
<AppSidebar /> <AppSidebar />
</div> </div>
<div class="w-full"> <div class="flex-1 flex flex-col h-full overflow-auto">
<slot /> <slot />
</div> </div>
</div> </div>

View File

@ -37,12 +37,13 @@
<Button icon="more-horizontal" /> <Button icon="more-horizontal" />
</div> </div>
</div> </div>
<div id="content" class=""> <div id="content" class="flex flex-col w-full overflow-x-auto flex-1">
<div class="flex flex-col overflow-y-hidden w-max min-w-full">
<div <div
id="list-header" id="list-header"
class="flex space-x-2 items-center px-5 py-2 border-b" class="flex space-x-4 items-center px-5 py-2 border-b"
> >
<Checkbox class="mr-2" /> <Checkbox class="" />
<div <div
v-for="column in columns" v-for="column in columns"
:key="column" :key="column"
@ -52,13 +53,13 @@
{{ column.label }} {{ column.label }}
</div> </div>
</div> </div>
<div id="list-rows"> <div id="list-rows" class="h-full overflow-y-auto">
<div <div
v-for="row in rows" v-for="row in rows"
:key="row" :key="row"
class="flex space-x-2 items-center mx-2 px-3 py-2 border-b" class="flex space-x-4 items-center mx-2 px-3 py-2 border-b"
> >
<Checkbox class="mr-2" /> <Checkbox class="" />
<div <div
v-for="column in columns" v-for="column in columns"
:key="column.key" :key="column.key"
@ -70,6 +71,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { FeatherIcon, Dropdown, Checkbox } from 'frappe-ui' import { FeatherIcon, Dropdown, Checkbox } from 'frappe-ui'
@ -84,11 +86,11 @@ const props = defineProps({
}, },
columns: { columns: {
type: Array, type: Array,
default: [] default: [],
}, },
rows: { rows: {
type: Array, type: Array,
default: [] default: [],
}, },
}) })