AS1024/Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Avoid dropdown menu to be truncated inside a column with scrolling

Browse Source
This commit is contained in:
Frederic Guillot
2015-09-09 22:00:54 -04:00
parent f3a5474e34
commit 726efc93ee
5 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ChangeLog
View File

@@ -16,6 +16,7 @@ Bug fixes:
* Fix typo in template that prevent the Gitlab oauth link to be displayed * Fix typo in template that prevent the Gitlab oauth link to be displayed
* Fix Markdown preview links focus * Fix Markdown preview links focus
* Avoid dropdown menu to be truncated inside a column with scrolling
Version 1.0.18 Version 1.0.18
-------------- --------------

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

17
assets/css/src/dropdown.css
View File

@@ -10,9 +10,8 @@
ul.dropdown-submenu-open { ul.dropdown-submenu-open {
display: block; display: block;
position: absolute; position: absolute;
left: 0;
z-index: 1000; z-index: 1000;
min-width: 280px; min-width: 285px;
list-style: none; list-style: none;
margin: 3px 0 0 1px; margin: 3px 0 0 1px;
padding: 6px 0; padding: 6px 0;
@@ -22,21 +21,19 @@ ul.dropdown-submenu-open {
box-shadow: 0px 1px 3px rgba(0,0,0,0.15); box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
} }
ul.dropdown-submenu-top {
bottom: 0;
}
.dropdown-submenu-open li { .dropdown-submenu-open li {
display: block; display: block;
margin: 0;
padding: 0; padding: 0;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
margin: 0; line-height: 33px;
line-height: 30px; font-size: 0.85em;
border-bottom: 1px solid #f8f8f8;
} }
.dropdown-submenu-open a { .dropdown-submenu-open li:last-child {
font-weight: normal; border: none;
} }
.page-header .dropdown { .page-header .dropdown {

2
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

25
assets/js/src/Dropdown.js
View File

@@ -11,26 +11,31 @@ Dropdown.prototype.listen = function() {
$(document).on('click', '.dropdown-menu', function(e) { $(document).on('click', '.dropdown-menu', function(e) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
self.close();
var submenu = $(this).next('ul'); var submenu = $(this).next('ul');
var submenuHeight = 240; var submenuHeight = 240;
var offset = $(this).offset();
var height = $(this).height();
if (! submenu.is(':visible')) { // Clone the submenu outside of the column to avoid clipping issue with overflow
self.close(); $("body").append(jQuery("<div>", {"id": "dropdown"}));
submenu.clone().appendTo("#dropdown");
if ($(this).offset().top + submenuHeight - $(window).scrollTop() > $(window).height()) { var clone = $("#dropdown ul");
submenu.addClass('dropdown-submenu-open dropdown-submenu-top'); clone.css('left', offset.left);
}
else { if (offset.top + submenuHeight - $(window).scrollTop() > $(window).height()) {
submenu.addClass('dropdown-submenu-open'); clone.css('top', offset.top - submenuHeight - height);
}
} }
else { else {
self.close(); clone.css('top', offset.top + height);
} }
clone.addClass('dropdown-submenu-open');
}); });
}; };
Dropdown.prototype.close = function() { Dropdown.prototype.close = function() {
$('.dropdown-submenu-open').removeClass('dropdown-submenu-open'); $("#dropdown").remove();
}; };