fix bootstrap3 theme improvements (dropdown menu scrolling when form has yet no- or few- elements)

This commit is contained in:
Artur Barseghyan 2014-10-11 22:57:40 +02:00
parent 09a935eed8
commit 3449cfb33f
5 changed files with 35 additions and 9 deletions

View file

@ -1,5 +1,12 @@
Release history
=====================================
0.1.1
-------------------------------------
2014-10-11
- Bootstrap 3 theme fixes: When tab pane has no or little content so
that the height of the dropdown menu exceeds the height of the tab pane
content the dropdown menu now becomes scrollable (vertically).
0.1
-------------------------------------

View file

@ -56,7 +56,7 @@ for static_dir in static_dirs:
for locale_dir in locale_dirs:
locale_files += [os.path.join(locale_dir, f) for f in os.listdir(locale_dir)]
version = '0.1'
version = '0.1.1'
install_requires = [
'Pillow>=2.0.0',

View file

@ -1,6 +1,6 @@
__title__ = 'django-fobi'
__version__ = '0.1'
__build__ = 0x000001
__version__ = '0.1.1'
__build__ = 0x000002
__author__ = 'Artur Barseghyan <artur.barseghyan@gmail.com>'
__copyright__ = 'Copyright (c) 2014 Artur Barseghyan'
__license__ = 'GPL 2.0/LGPL 2.1'

View file

@ -1,7 +1,5 @@
.theme.theme-bootstrap3 .tab-content {
display: table;
height:100%;
.theme.theme-bootstrap3 .scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.theme.theme-bootstrap3 .tab-content .tab-pane {
display: table-cell;
}

View file

@ -27,6 +27,27 @@ $(document).ready(function() {
// Choosing which tab is active on click
fobiCore.handleTabs('.nav-tabs li');
// Some sort of a solution for the nasty bootstrap3 problem
// with drop-downs cut if parent container isn't long enough.
// Thus, it's checked whether the drop-down menu height
// exceeds the height of the content container, the
// {'height': 'auto', 'overflow-x', 'hidden'} css is applied to the
// "dropdown-menu" element. Default "max-height" value of the
// "dropdown-menu" is then 200 (px). If content container can fit more,
// the css property "max-height" is changed accordingly.
$('.dropdown-toggle').click(function() {
var dropDownToggle = $(this);
var dropDownParent = dropDownToggle.parents('.tab-pane');
var dropDownMenu = dropDownParent.find('.dropdown-menu');
if (dropDownMenu.height() > dropDownParent.height()) {
//dropDownMenu.addClass('scrollable-menu');
dropDownMenu.css('height', 'auto');
dropDownMenu.css('overflow-x', 'hidden');
var dropDownMenuMinHeiht = (dropDownParent.height() > 200) ? dropDownParent.height() : 200;
dropDownMenu.css('max-height', dropDownMenuMinHeiht + 'px');
}
});
});
/**