JSFiddle - React, Tailwind, and code Playground
Chosen - Drop Up
by Jennifer Perrin
July 16, 2015
HTML
<p>Made a copy of the code...</p>
<p>my coworker worked fiercly...</p>
<p>I added the 3 styles i needed...</p>
<p>and here is the result:</p>
<br/><br/><br/><br/><br/><br/>
<select class="page-select chzn-drop-up">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
CSS
/* @group Base */
.chzn-container {
font-size: 13px;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
min-width:50px
}
.chzn-container .chzn-drop {
background: #fff;
border: 1px solid #aaa;
border-top: 0;
position: absolute;
top: 29px;
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;
}
.chzn-container.chzn-container-drop-up .chzn-drop {
border-top: 1px solid #aaa;
min-width:50px
}
/* @end */
/* @group Single Chosen */
.chzn-container-single .chzn-single {
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
-webkit-border-radius: 4px;
-moz-border-radius : 4px;
border-radius : 4px;
-moz-background-clip : padding;
-webkit-background-clip: padding-box;
background-clip : padding-box;
border: 1px solid #aaa;
display: block;
overflow: hidden;
white-space: nowrap;
position: relative;
height: 26px;
line-height: 26px;
padding: 0 0 0 8px;
color: #444;
text-decoration: none;
}
.chzn-container-single .chzn-single span {
margin-right: 26px;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.chzn-container-single .chzn-single div {
...
JavaScript
// Chosen, a Select Box Enhancer for jQuery and Protoype
// by Patrick Filler for Harvest, http://getharvest.com
//
// Version 0.9.1
// Full source at https://github.com/harvesthq/chosen
// Copyright (c) 2011 Harvest http://getharvest.com
// MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
// This file is generated by `cake build`, do not edit it by hand.
(function () {
/*
Chosen source: generate output using 'cake build'
Copyright (c) 2011 by Harvest
*/
var $, Chosen, get_side_border_padding, root;
var __bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
root = this;
$ = jQuery;
$.fn.extend({
chosen: function (data, options) {
if ($.browser === "msie" && ($.browser.version === "6.0" || $.browser.version === "7.0")) {
return this;
}
return $(this).each(function (input_field) {
if (!($(this)).hasClass("chzn-done")) {
return new Chosen(this, data, options);
}
});
}
});
Chosen = (function () {
function Chosen(elmn) {
this.set_default_values();
this.form_field = elmn;
this.form_field_jq = $(this.form_field);
this.is_multiple = this.form_field.multiple;
this.is_rtl = this.form_field_jq.hasClass("chzn-rtl");
this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option";
this.is_drop_up = this.form_field_jq.hasClass("chzn-drop-up");
this.set_up_html();
this.register_observers();
this.form_field_jq.addClass("chzn-done");
}
Chosen.prototype.set_default_values = function () {
this.click_test_action = __bind(function (evt) {
return this.test_active_click(evt);
}, this);
this.active_field = false;
...