Skip to content

Commit

Permalink
Fixed #1295 - Sidebar content overflows
Browse files Browse the repository at this point in the history
  • Loading branch information
tugcekucukoglu committed May 24, 2021
1 parent 327443f commit 0c8ff2b
Showing 1 changed file with 14 additions and 7 deletions.
21 changes: 14 additions & 7 deletions src/components/sidebar/Sidebar.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<template>
<transition name="p-sidebar" @enter="onEnter" @leave="onLeave" appear>
<div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal">
<div class="p-sidebar-content">
<button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
<div class="p-sidebar-header">
<button class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
<span class="p-sidebar-close-icon pi pi-times" />
</button>
</div>
<div class="p-sidebar-content">
<slot></slot>
</div>
</div>
Expand Down Expand Up @@ -150,20 +152,25 @@ export default {
.p-sidebar {
position: fixed;
transition: transform .3s;
display: flex;
flex-direction: column;
}
.p-sidebar-content {
position: relative;
overflow-y: auto;
}
.p-sidebar-close {
position: absolute;
top: 0;
right: 0;
.p-sidebar-header {
display: flex;
align-items: center;
justify-content: flex-end;
}
.p-sidebar-icon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.p-sidebar-mask {
Expand Down

0 comments on commit 0c8ff2b

Please sign in to comment.