Add CSS to better match egw. Fix chosen sizes using new width attribute. Not perfect, but at least never too small.

This commit is contained in:
Nathan Gray 2013-07-25 20:28:32 +00:00
parent 15ad58522f
commit f65680a7ae
3 changed files with 49 additions and 1 deletions

View File

@ -295,7 +295,7 @@ class html
if($enhanced) {
egw_framework::validate_file('/phpgwapi/js/jquery/chosen/chosen.jquery.js');
egw_framework::includeCSS('/phpgwapi/js/jquery/chosen/chosen.css',null,false);
$out .= "<script>var lab = egw_LAB || \$LAB; lab.wait(function() {\$j(function() {if(\$j().chosen) \$j('select[name=\"$name\"]').chosen();});})</script>\n";
$out .= "<script>var lab = egw_LAB || \$LAB; lab.wait(function() {\$j(function() {if(\$j().chosen) \$j('select[name=\"$name\"]').chosen({width: '100%'});});})</script>\n";
}
return $out;
}

View File

@ -418,3 +418,46 @@
}
}
/* @end */
/**
* Egw customizations for Chosen widget
*/
.chzn-container {
display: inline-block;
font-size: inherit;
}
.chzn-container .chzn-single {
height: 19px;
line-height: 20px;
}
.chzn-container .chzn-results {
padding: 0 0 0 0px;
}
.chzn-container .chzn-results li {
line-height: 13px;
padding: 3px 6px;
}
.chzn-container-multi .chzn-choices .search-field input {
height: 12px;
}
.chzn-container-multi .chzn-choices .search-choice {
line-height: 12px;
margin: 2px 0 2px 1px;
}
.chzn-container .chzn-drop {
border-top-width: 0px;
}
.chzn-container-active.chzn-with-drop.chzn-above .chzn-single {
border-radius : 0px 0px 4px 4px;
border-top-width: 0px;
}
.chzn-container.chzn-above .chzn-drop {
top:auto;
bottom:23px;
border-width:1px 1px 0px 1px;
border-radius: 4px 4px 0px 0px;
-webkit-box-shadow: 0 -4px 5px rgba(0,0,0,.15);
-moz-box-shadow : 0 -4px 5px rgba(0,0,0,.15);
box-shadow : 0 -4px 5px rgba(0,0,0,.15);
}

View File

@ -777,6 +777,11 @@
this.form_field_jq.trigger("liszt:showing_dropdown", {
chosen: this
});
var windowHeight = $(window).height(),
dropdownTop = this.container.offset().top + this.container.height() - $(window).scrollTop()
totalHeight = this.dropdown.height() + dropdownTop
this.dropdown.toggleClass('chzn-above', totalHeight > windowHeight);
this.results_showing = true;
this.search_field.focus();
this.search_field.val(this.search_field.val());