Permalink
Browse files

BUGFIX: 7117 Fixes

Includes:
* Changes to chosen to include a custom function that will let the
drop-down rise-up if there is room and it would otherwise drop beneath
the size of the window (changes in coffeescript, jquery output, and
chosen css)
* Changes in SCSS to stop the automatic addition of scrollbars, and
to limit the extra space at the bottom of the filter div

Issues remaining:
* jLayout is calculating the height of the filter div incorrectly.
It is assuming the div is around 70px longer than it is. This height
assumption is linked somehow to chosen, as initiating the select box
results in a correct height calculation.
  • Loading branch information...
1 parent 3cd4b33 commit dc5e36ec5c3d94b6448a1e1d5ac0989e27d1ddd0 @adrexia adrexia committed May 1, 2012
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -611,6 +611,10 @@ body.cms {
@include box-shadow($color-shadow-dark 0 0 ($grid-x / 2));
float: left;
position: relative;
+
+ &.filter{
+ padding:0 !important;
+ }
.cms-panel-header {
clear: both;
@@ -624,6 +628,7 @@ body.cms {
width: ($grid-x * 22);
padding: 0 $grid-x;
overflow: auto;
+ overflow-x:hidden;
height:100%;
.dropdown select {
width:$grid-x * 20;
@@ -1454,8 +1459,10 @@ body.cms-dialog {
* Search forms (used in AssetAdmin, ModelAdmin, etc)
* -------------------------------------------- */
.cms-search-form {
- overflow: auto;
margin-bottom: $grid-y*2;
+ .filter &{
+ margin-bottom:0;
+ }
}
/** --------------------------------------------
@@ -6,7 +6,7 @@
zoom: 1;
*display: inline;
}
-.chzn-container .chzn-drop {
+.chzn-container .chzn-drop{
background: #fff;
border: 1px solid #aaa;
border-top: 0;
@@ -19,6 +19,29 @@
box-shadow : 0 4px 5px rgba(0,0,0,.15);
z-index: 999;
}
+.chzn-container.chzn-with-rise .chzn-drop, .chzn-container.chzn-with-rise .chzn-drop{
+ border: 1px solid #aaa;
+ border-bottom: 0;
+ position: absolute;
+ top: 0px;
+ left: 0;
+ -webkit-box-shadow: 0 -4px -5px rgba(0,0,0,.15);
+ -moz-box-shadow : 0 -4px -5px rgba(0,0,0,.15);
+ -o-box-shadow : 0 -4px -5px rgba(0,0,0,.15);
+ box-shadow : 0 -4px -5px rgba(0,0,0,.15);
+ z-index: 999;
+ -webkit-border-radius: 5px;
+ -moz-border-radius : 5px;
+ border-radius : 5px;
+ -webkit-border-bottom-left-radius : 0;
+ -webkit-border-bottom-right-radius: 0;
+ -moz-border-radius-bottomleft : 0;
+ -moz-border-radius-bottomright: 0;
+ border-bottom-left-radius : 0;
+ border-bottom-right-radius: 0;
+}
+
+
/* @end */
/* @group Single Chosen */
@@ -52,7 +75,7 @@
text-decoration: none;
}
.chzn-container-single .chzn-default {
- color: #999;
+ color: #999;
}
.chzn-container-single .chzn-single span {
margin-right: 26px;
@@ -330,6 +353,8 @@
border-bottom-left-radius : 0;
border-bottom-right-radius: 0;
}
+
+
.chzn-container-active .chzn-single-with-drop div {
background: transparent;
border-left: none;
@@ -389,4 +414,20 @@
padding: 4px 5px 4px 20px;
direction: rtl;
}
+
+.chzn-with-rise .chzn-single-with-drop, .chzn-with-rise .chzn-single-with-drop{
+ -webkit-border-radius: 5px;
+ -moz-border-radius : 5px;
+ border-radius : 5px;
+
+ -webkit-border-top-left-radius : 0;
+ -webkit-border-top-right-radius: 0;
+ -moz-border-radius-topleft : 0;
+ -moz-border-radius-topright: 0;
+ border-top-left-radius : 0;
+ border-top-right-radius: 0;
+}
+
+
+
/* @end */
@@ -321,7 +321,7 @@ Copyright (c) 2011 by Harvest
};
Chosen.prototype.set_up_html = function() {
- var container_div, dd_top, dd_width, sf_width;
+ var container_div, dd_top, dd_width, rise, sf_width;
this.container_id = this.form_field.id.length ? this.form_field.id.replace(/(:|\.)/g, '_') : this.generate_field_id();
this.container_id += "_chzn";
this.f_width = this.form_field_jq.outerWidth();
@@ -340,7 +340,13 @@ Copyright (c) 2011 by Harvest
this.container = $('#' + this.container_id);
this.container.addClass("chzn-container-" + (this.is_multiple ? "multi" : "single"));
this.dropdown = this.container.find('div.chzn-drop').first();
- dd_top = this.container.height();
+ /*
+ CALL CUSTOM FUNCTION: rise_up
+ # if rise-up true, reverse drop-up direction
+ */
+
+ rise = this.rise_up(this.container, this.dropdown);
+ dd_top = rise ? -this.container.find('.chzn-drop').height() : this.container.height();
dd_width = this.container.width - get_side_border_padding(this.dropdown);
this.dropdown.css({
"width": dd_width + "px",
@@ -582,14 +588,20 @@ Copyright (c) 2011 by Harvest
};
Chosen.prototype.results_show = function() {
- var dd_top, dd_width;
+ var dd_top, dd_width, rise;
if (!this.is_multiple) {
this.selected_item.addClass("chzn-single-with-drop");
if (this.result_single_selected) {
this.result_do_highlight(this.result_single_selected);
}
}
- dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
+ /*
+ CALL CUSTOM FUNCTION: rise_up
+ # if rise-up true, reverse drop-up direction
+ */
+
+ rise = this.rise_up(this.container, this.dropdown);
+ dd_top = rise ? -this.container.find('.chzn-drop').height() : this.is_multiple ? this.container.height() : this.container.height() - 1;
dd_width = this.container.width() - get_side_border_padding(this.dropdown);
this.dropdown.css({
"top": dd_top + "px",
@@ -961,7 +973,7 @@ Copyright (c) 2011 by Harvest
};
Chosen.prototype.search_field_scale = function() {
- var dd_top, div, h, style, style_block, styles, w, _i, _len;
+ var dd_top, div, h, rise, style, style_block, styles, w, _i, _len;
if (this.is_multiple) {
h = 0;
w = 0;
@@ -984,7 +996,13 @@ Copyright (c) 2011 by Harvest
this.search_field.css({
'width': w + 'px'
});
- dd_top = this.container.height();
+ /*
+ CALL CUSTOM FUNCTION: rise_up
+ # if rise-up true, reverse drop-up direction
+ */
+
+ rise = this.rise_up(this.container, this.dropdown);
+ dd_top = rise ? -this.container.find('.chzn-drop').height() : this.container.height();
return this.dropdown.css({
"top": dd_top + "px"
});
@@ -1000,6 +1018,31 @@ Copyright (c) 2011 by Harvest
return string;
};
+ /*
+ SILVERSTRIPE CUSTOM FUNCTION
+ Rise_up function handles the case where a dropdown exceeds the height of the window
+ # Adds class if true, returns true
+ # Removes class if false, returns false
+ This facilitates the behaviour where the drop-down will drop up if there is no room
+ to drop down
+ */
+
+
+ Chosen.prototype.rise_up = function(container, dropdown) {
+ var elHeight, elPos, endOfWindow, trigger;
+ trigger = container.find('a.chzn-single');
+ endOfWindow = ($(window).height() + $(document).scrollTop()) - container.find('a').innerHeight();
+ elPos = trigger.offset().top;
+ elHeight = dropdown.innerHeight();
+ if (elPos + elHeight > endOfWindow && elPos - elHeight > 0) {
+ container.addClass('chzn-with-rise');
+ return true;
+ } else {
+ container.removeClass('chzn-with-rise');
+ return false;
+ }
+ };
+
return Chosen;
})(AbstractChosen);

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -6,6 +6,7 @@ root = this
$ = jQuery
$.fn.extend({
+
chosen: (options) ->
# Do no harm and return as soon as possible for unsupported browsers, namely IE6 and IE7
return this if $.browser.msie and ($.browser.version is "6.0" or $.browser.version is "7.0")
@@ -50,8 +51,14 @@ class Chosen extends AbstractChosen
@container = ($ '#' + @container_id)
@container.addClass( "chzn-container-" + (if @is_multiple then "multi" else "single") )
@dropdown = @container.find('div.chzn-drop').first()
-
- dd_top = @container.height()
+
+ ###
+ CALL CUSTOM FUNCTION: rise_up
+ # if rise-up true, reverse drop-up direction
+ ###
+ rise = @rise_up(@container, @dropdown)
+ dd_top = if rise then -this.container.find('.chzn-drop').height() else @container.height()
+
#patch applied: https://github.com/harvesthq/chosen/issues/300
dd_width = (@container.width - get_side_border_padding(@dropdown))
@@ -71,7 +78,7 @@ class Chosen extends AbstractChosen
@selected_item = @container.find('.chzn-single').first()
sf_width = dd_width - get_side_border_padding(@search_container) - get_side_border_padding(@search_field)
@search_field.css( {"width" : sf_width + "px"} )
-
+
this.results_build()
this.set_tab_index()
@form_field_jq.trigger("liszt:ready", {chosen: this})
@@ -173,6 +180,7 @@ class Chosen extends AbstractChosen
@parsing = true
@results_data = root.SelectParser.select_to_array @form_field
+
if @is_multiple and @choices > 0
@search_choices.find("li.search-choice").remove()
@choices = 0
@@ -202,7 +210,6 @@ class Chosen extends AbstractChosen
@search_results.html content
@parsing = false
-
result_add_group: (group) ->
if not group.disabled
group.dom_id = @container_id + "_g_" + group.array_index
@@ -237,9 +244,14 @@ class Chosen extends AbstractChosen
if not @is_multiple
@selected_item.addClass "chzn-single-with-drop"
if @result_single_selected
- this.result_do_highlight( @result_single_selected )
+ this.result_do_highlight( @result_single_selected )
- dd_top = if @is_multiple then @container.height() else (@container.height() - 1)
+ ###
+ CALL CUSTOM FUNCTION: rise_up
+ # if rise-up true, reverse drop-up direction
+ ###
+ rise = @rise_up(@container, @dropdown)
+ dd_top = if rise then -this.container.find('.chzn-drop').height() else if @is_multiple then @container.height() else (@container.height() - 1)
#patch applied: https://github.com/harvesthq/chosen/issues/300, add variable assignment dd_width
dd_width = this.container.width() - get_side_border_padding(@dropdown);
@@ -552,14 +564,44 @@ class Chosen extends AbstractChosen
@search_field.css({'width': w + 'px'})
- dd_top = @container.height()
+ ###
+ CALL CUSTOM FUNCTION: rise_up
+ # if rise-up true, reverse drop-up direction
+ ###
+ rise = @rise_up(@container, @dropdown)
+ dd_top = if rise then -this.container.find('.chzn-drop').height() else @container.height()
+
@dropdown.css({"top": dd_top + "px"})
generate_random_id: ->
string = "sel" + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
while $("#" + string).length > 0
string += this.generate_random_char()
string
+
+
+
+ ###
+ SILVERSTRIPE CUSTOM FUNCTION
+ Rise_up function handles the case where a dropdown exceeds the height of the window
+ # Adds class if true, returns true
+ # Removes class if false, returns false
+ This facilitates the behaviour where the drop-down will drop up if there is no room
+ to drop down
+ ###
+ rise_up: (container, dropdown) ->
+ trigger = container.find('a.chzn-single');
+ endOfWindow = ($(window).height() + $(document).scrollTop()) - container.find('a').innerHeight();
+ elPos = trigger.offset().top
+ elHeight = dropdown.innerHeight()
+
+ if elPos + elHeight > endOfWindow and elPos - elHeight > 0
+ container.addClass('chzn-with-rise')
+ true
+ else
+ container.removeClass('chzn-with-rise')
+ false
+
get_side_border_padding = (elmt) ->
side_border_padding = elmt.outerWidth() - elmt.width()

0 comments on commit dc5e36e

Please sign in to comment.