Skip to content

Commit

Permalink
Fixed #4870 - Menu components: width changed as min-width
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Nov 23, 2023
1 parent 0fca13d commit 8c76a94
Show file tree
Hide file tree
Showing 60 changed files with 356 additions and 344 deletions.
4 changes: 4 additions & 0 deletions components/lib/megamenu/style/MegaMenuStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ const css = `
.p-megamenu-vertical {
flex-direction: column;
}
.p-megamenu-vertical:not(.p-megamenu-mobile) {
display: inline-flex;
}
.p-megamenu-vertical .p-megamenu-root-list {
flex-direction: column;
Expand Down
6 changes: 5 additions & 1 deletion components/lib/menu/Menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,11 @@ export default {
},
alignOverlay() {
DomHandler.absolutePosition(this.container, this.target);
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px';
const targetWidth = DomHandler.getOuterWidth(this.target);
if (targetWidth > DomHandler.getOuterWidth(this.container)) {
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px';
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
Expand Down
6 changes: 5 additions & 1 deletion components/lib/tieredmenu/TieredMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,8 +419,12 @@ export default {
}
},
alignOverlay() {
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px';
DomHandler.absolutePosition(this.container, this.target);
const targetWidth = DomHandler.getOuterWidth(this.target);
if (targetWidth > DomHandler.getOuterWidth(this.container)) {
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px';
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
Expand Down
12 changes: 6 additions & 6 deletions public/themes/arya-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4186,7 +4186,7 @@
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-contextmenu .p-contextmenu-root-list {
outline: 0 none;
Expand Down Expand Up @@ -4410,14 +4410,14 @@
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
width: 12.5rem;
min-width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
margin: 0.25rem 0;
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
min-width: 12.5rem;
padding: 0.25rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
Expand Down Expand Up @@ -4507,7 +4507,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -4679,7 +4679,7 @@
background: #1e1e1e;
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
width: 12.5rem;
min-width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
Expand Down Expand Up @@ -4987,7 +4987,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
Expand Down
12 changes: 6 additions & 6 deletions public/themes/arya-green/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4186,7 +4186,7 @@
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-contextmenu .p-contextmenu-root-list {
outline: 0 none;
Expand Down Expand Up @@ -4410,14 +4410,14 @@
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
width: 12.5rem;
min-width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
margin: 0.25rem 0;
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
min-width: 12.5rem;
padding: 0.25rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
Expand Down Expand Up @@ -4507,7 +4507,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -4679,7 +4679,7 @@
background: #1e1e1e;
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
width: 12.5rem;
min-width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
Expand Down Expand Up @@ -4987,7 +4987,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
Expand Down
12 changes: 6 additions & 6 deletions public/themes/arya-orange/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4186,7 +4186,7 @@
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-contextmenu .p-contextmenu-root-list {
outline: 0 none;
Expand Down Expand Up @@ -4410,14 +4410,14 @@
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
width: 12.5rem;
min-width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
margin: 0.25rem 0;
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
min-width: 12.5rem;
padding: 0.25rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
Expand Down Expand Up @@ -4507,7 +4507,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -4679,7 +4679,7 @@
background: #1e1e1e;
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
width: 12.5rem;
min-width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
Expand Down Expand Up @@ -4987,7 +4987,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
Expand Down
12 changes: 6 additions & 6 deletions public/themes/arya-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4186,7 +4186,7 @@
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-contextmenu .p-contextmenu-root-list {
outline: 0 none;
Expand Down Expand Up @@ -4410,14 +4410,14 @@
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
width: 12.5rem;
min-width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
margin: 0.25rem 0;
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
min-width: 12.5rem;
padding: 0.25rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
Expand Down Expand Up @@ -4507,7 +4507,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -4679,7 +4679,7 @@
background: #1e1e1e;
border: 1px solid #383838;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
width: 12.5rem;
min-width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #383838;
Expand Down Expand Up @@ -4987,7 +4987,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
Expand Down
12 changes: 6 additions & 6 deletions public/themes/bootstrap4-dark-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4198,7 +4198,7 @@
border: 1px solid #3f4b5b;
box-shadow: none;
border-radius: 4px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-contextmenu .p-contextmenu-root-list {
outline: 0 none;
Expand Down Expand Up @@ -4422,14 +4422,14 @@
}
.p-megamenu .p-submenu-list {
padding: 0.5rem 0;
width: 12.5rem;
min-width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #3f4b5b;
margin: 0.5rem 0;
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
min-width: 12.5rem;
padding: 0.5rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
Expand Down Expand Up @@ -4519,7 +4519,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -4691,7 +4691,7 @@
background: #2a323d;
border: 1px solid #3f4b5b;
box-shadow: none;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #3f4b5b;
Expand Down Expand Up @@ -4999,7 +4999,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #2a323d;
Expand Down
12 changes: 6 additions & 6 deletions public/themes/bootstrap4-dark-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4198,7 +4198,7 @@
border: 1px solid #3f4b5b;
box-shadow: none;
border-radius: 4px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-contextmenu .p-contextmenu-root-list {
outline: 0 none;
Expand Down Expand Up @@ -4422,14 +4422,14 @@
}
.p-megamenu .p-submenu-list {
padding: 0.5rem 0;
width: 12.5rem;
min-width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #3f4b5b;
margin: 0.5rem 0;
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
min-width: 12.5rem;
padding: 0.5rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
Expand Down Expand Up @@ -4519,7 +4519,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -4691,7 +4691,7 @@
background: #2a323d;
border: 1px solid #3f4b5b;
box-shadow: none;
width: 12.5rem;
min-width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
border-top: 1px solid #3f4b5b;
Expand Down Expand Up @@ -4999,7 +4999,7 @@
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
width: 12.5rem;
min-width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #2a323d;
Expand Down
Loading

0 comments on commit 8c76a94

Please sign in to comment.