From f5ac459d7c3f6d326f6eafeb86bcc254d16790ab Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 12:46:01 +0200 Subject: [PATCH 1/4] * dded right to left support * cleaned up css file and removed a bunch of unused and redundant rule sets (even less warning with csslint) * also closes #118 using display inline-block Please enter the commit message for your changes. Lines starting --- chosen/chosen.css | 353 ++++++++++++++++++------------------ chosen/chosen.jquery.js | 3 +- coffee/chosen.jquery.coffee | 3 +- 3 files changed, 181 insertions(+), 178 deletions(-) diff --git a/chosen/chosen.css b/chosen/chosen.css index 2bf78fa..9ad2cfe 100644 --- a/chosen/chosen.css +++ b/chosen/chosen.css @@ -1,241 +1,214 @@ -div.chzn-container { +/* @group Base */ +.chzn-container { font-size: 13px; position: relative; + display: inline-block; + zoom: 1; + *display: inline; } - -div.chzn-container input { +.chzn-container .chzn-drop { background: #fff; - background: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); - background: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: -o-linear-gradient(bottom, white 85%, #eeeeee 99%); - background: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); - background: linear-gradient(top, #ffffff 85%,#eeeeee 99%); border: 1px solid #aaa; - font-family: sans-serif; - font-size: 1em; - margin: 0px; - padding: 4px 20px 4px 5px; - outline: none; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -o-border-radius: 3px; - -ms-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; -} -div.chzn-container textarea:focus { - border-color: #058cf5; - -moz-box-shadow: 0px 0px 3px #aaa; - -webkit-box-shadow: 0px 0px 3px #aaa; - box-shadow: 0px 0px 3px #aaa; -} - - -div.chzn-container div.chzn-drop { - background: #FFF; - border: 1px solid #aaa; - border-width: 0 1px 1px; - left: 0; + border-top: 0; position: absolute; top: 29px; - -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); + 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; } -div.chzn-container-single div.chzn-drop { - -moz-border-radius: 0 0 4px 4px; - -webkit-border-radius: 0 0 4px 4px; - -o-border-radius: 0 0 4px 4px; - -ms-border-radius: 0 0 4px 4px; - -khtml-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} +/* @end */ - -/* SINGLE */ -div.chzn-container a.chzn-single { - background: #ffffff; +/* @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; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -o-border-radius: 4px; - -ms-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - height: 25px; - color: #444; - line-height: 26px; - padding: 0px 0px 0px 8px; - position: relative; - text-decoration: none; white-space: nowrap; + position: relative; + height: 26px; + line-height: 26px; + padding: 0 0 0 8px; + color: #444; + text-decoration: none; } -div.chzn-container a.chzn-single span { - display: block; +.chzn-container-single .chzn-single span { margin-right: 26px; + display: block; overflow: hidden; + white-space: nowrap; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + -moz-binding: url('/xml/ellipsis.xml#ellipsis'); text-overflow: ellipsis; } -div.chzn-container a.chzn-single div { - -moz-border-radius-topright: 4px; - -webkit-border-top-right-radius: 4px; - -o-border-top-right-radius: 4px; - -ms-border-top-right-radius: 4px; - -khtml-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; - -o-border-bottom-right-radius: 4px; - -ms-border-bottom-right-radius: 4px; - -khtml-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; +.chzn-container-single .chzn-single div { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius : 0 4px 4px 0; + border-radius : 0 4px 4px 0; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; background: #ccc; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%); border-left: 1px solid #aaa; - display: block; - height: 100%; position: absolute; right: 0; top: 0; + display: block; + height: 100%; width: 18px; } -div.chzn-container a.chzn-single div b { +.chzn-container-single .chzn-single div b { background: url('chosen-sprite.png') no-repeat 0 1px; display: block; width: 100%; height: 100%; } -div.chzn-container div.chzn-search { +.chzn-container-single .chzn-search { padding: 3px 4px; - margin: 0px; + margin: 0; white-space: nowrap; } -div.chzn-container div.chzn-search input { - background: url('chosen-sprite.png') no-repeat 100% -20px, #ffffff; +.chzn-container-single .chzn-search input { + background: #fff url('chosen-sprite.png') no-repeat 100% -20px; background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); - background: linear-gradient(top, #ffffff 85%,#eeeeee 99%); - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - -o-border-radius: 0px; - -ms-border-radius: 0px; - -khtml-border-radius: 0px; - border-radius: 0px; + background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%); margin: 1px 0; + padding: 4px 20px 4px 5px; outline: 0; + border: 1px solid #aaa; + font-family: sans-serif; + font-size: 1em; } +.chzn-container-single .chzn-drop { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius : 0 0 4px 4px; + border-radius : 0 0 4px 4px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; +} +/* @end */ - -/* Multi */ -div.chzn-container ul.chzn-choices { - background: #fff; +/* @group Multi Chosen */ +.chzn-container-multi .chzn-choices { + background-color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%); background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%); - margin: 0; - cursor: text; border: 1px solid #aaa; + margin: 0; + padding: 0; + cursor: text; overflow: hidden; height: auto !important; height: 1%; - padding: 0; position: relative; } -div.chzn-container ul.chzn-choices:focus { - border-color: #058cf5; - -moz-box-shadow: 0px 0px 5px #999; - -webkit-box-shadow: 0px 0px 5px #999; - box-shadow: 0px 0px 5px #999; -} -div.chzn-container ul.chzn-choices li { +.chzn-container-multi .chzn-choices li { float: left; - list-style-type: none; - margin: 0px; + list-style: none; } -div.chzn-container ul.chzn-choices li.search-field { - margin: 0px; +.chzn-container-multi .chzn-choices .search-field { white-space: nowrap; - padding: 0px; + margin: 0; + padding: 0; } -div.chzn-container ul.chzn-choices li.search-field input { +.chzn-container-multi .chzn-choices .search-field input { color: #666; background: transparent !important; - border: 0px !important; + border: 0 !important; padding: 5px; margin: 1px 0; outline: 0; -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -moz-box-shadow : none; + -o-box-shadow : none; + box-shadow : none; } -div.chzn-container ul.chzn-choices li.search-field input.default { +.chzn-container-multi .chzn-choices .search-field .default { color: #999; } -div.chzn-container ul.chzn-choices li.search-choice { - -moz-border-radius: 3px; +.chzn-container-multi .chzn-choices .search-choice { -webkit-border-radius: 3px; - border-radius: 3px; - background: #e4e4e4; + -moz-border-radius : 3px; + border-radius : 3px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; + background-color: #e4e4e4; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%); background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%); background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%); - background: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); + background-image: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 ); - background: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); + background-image: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); color: #333; border: 1px solid #b4b4b4; line-height: 13px; padding: 3px 19px 3px 6px; + margin: 3px 0 3px 5px; position: relative; - margin: 3px 0px 3px 5px; } -div.chzn-container ul.chzn-choices li.search-choice span { +.chzn-container-multi .chzn-choices .search-choice span { cursor: default; } -div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus { +.chzn-container-multi .chzn-choices .search-choice-focus { background: #d4d4d4; } -div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close { +.chzn-container-multi .chzn-choices .search-choice .search-choice-close { + display: block; position: absolute; right: 5px; top: 6px; - display: block; width: 8px; height: 9px; font-size: 1px; background: url(chosen-sprite.png) right top no-repeat; } -div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover { +.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover { background-position: right -9px; } -div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus a.search-choice-close { +.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close { background-position: right -9px; } +/* @end */ - -/* Results */ -div.chzn-container ul.chzn-results { +/* @group Results */ +.chzn-container .chzn-results { margin: 0 4px 4px 0; max-height: 190px; padding: 0 0 0 4px; @@ -243,92 +216,120 @@ div.chzn-container ul.chzn-results { overflow-x: hidden; overflow-y: auto; } -div.chzn-container-multi ul.chzn-results { +.chzn-container-multi .chzn-results { margin: -1px 0 0; padding: 0; } -div.chzn-container-multi ul.chzn-results li { - border-left: 0px !important; - border-right: 0px !important; -} -div.chzn-container ul.chzn-results li { +.chzn-container .chzn-results li { line-height: 80%; padding: 7px 7px 8px; margin: 0; - list-style-type: none; + list-style: none; } -div.chzn-container ul.chzn-results li.active-result { +.chzn-container .chzn-results .active-result { cursor: pointer; } -div.chzn-container ul.chzn-results li em { - font-style: normal; - background: #FEFFDC; -} -div.chzn-container ul.chzn-results li.highlighted { +.chzn-container .chzn-results .highlighted { background: #3875d7; color: #fff; } -div.chzn-container ul.chzn-results li.highlighted em { +.chzn-container .chzn-results li em { + background: #feffde; + font-style: normal; +} +.chzn-container .chzn-results .highlighted em { background: transparent; } -div.chzn-container ul.chzn-results li.no-results { - background: #F4F4F4; +.chzn-container .chzn-results .no-results { + background: #f4f4f4; } -div.chzn-container ul.chzn-results li.group-result { +.chzn-container .chzn-results .group-result { cursor: default; color: #999; font-weight: bold; } -div.chzn-container ul.chzn-results li.group-option { +.chzn-container .chzn-results .group-option { padding-left: 20px; } - -div.chzn-container-multi div.chzn-drop li.result-selected { +.chzn-container-multi .chzn-drop .result-selected { display: none; } +/* @end */ - - -/* Active */ -div.chzn-container-active a.chzn-single { - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); +/* @group Active */ +.chzn-container-active .chzn-single { + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); + -o-box-shadow : 0 0 5px rgba(0,0,0,.3); + box-shadow : 0 0 5px rgba(0,0,0,.3); border: 1px solid #5897fb; } -div.chzn-container-active a.chzn-single-with-drop { +.chzn-container-active .chzn-single-with-drop { border: 1px solid #aaa; - border-width: 1px 1px 1px; - -moz-box-shadow: 0px 1px 0px #FFF inset; - -webkit-box-shadow: 0px 1px 0px #FFF inset; - box-shadow: 0px 1px 0px #FFF inset; - background: #EEE; + -webkit-box-shadow: 0 1px 0 #fff inset; + -moz-box-shadow : 0 1px 0 #fff inset; + -o-box-shadow : 0 1px 0 #fff inset; + box-shadow : 0 1px 0 #fff inset; + background-color: #eee; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); - -webkit-border-bottom-left-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -moz-border-radius-bottomleft: 0px; - -moz-border-radius-bottomright: 0px; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + -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; } -div.chzn-container-active a.chzn-single-with-drop div { +.chzn-container-active .chzn-single-with-drop div { background: transparent; border-left: none; } -div.chzn-container-active a.chzn-single-with-drop div b { +.chzn-container-active .chzn-single-with-drop div b { background-position: -18px 1px; } -div.chzn-container-active ul.chzn-choices { - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); +.chzn-container-active .chzn-choices { + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); + -o-box-shadow : 0 0 5px rgba(0,0,0,.3); + box-shadow : 0 0 5px rgba(0,0,0,.3); border: 1px solid #5897fb; } -div.chzn-container-active ul.chzn-choices input { +.chzn-container-active .chzn-choices .search-field input { color: #111 !important; } +/* @end */ + +/* @group Right to Left */ +.chzn-rtl { direction:rtl;text-align: right; } +.chzn-rtl .chzn-single { padding-left: 0; padding-right: 8px; } +.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; } +.chzn-rtl .chzn-single div { + left: 0; right: auto; + border-left: none; border-right: 1px solid #aaaaaa; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius : 4px 0 0 4px; + border-radius : 4px 0 0 4px; +} +.chzn-rtl .chzn-choices li { float: right; } +.chzn-rtl .chzn-choices .search-choice { padding: 3px 6px 3px 19px; margin: 3px 5px 3px 0; } +.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 5px; right: auto; background-position: right top;} +.chzn-rtl.chzn-container-single .chzn-results { margin-left: 4px; margin-right: 0; padding-left: 0; padding-right: 4px; } +.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 20px; } +.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; } +.chzn-rtl .chzn-search input { + background: url('chosen-sprite.png') no-repeat -38px -20px, #ffffff; + background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%); + padding: 4px 5px 4px 20px; +} +/* @end */ \ No newline at end of file diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js index 64436bc..e610561 100644 --- a/chosen/chosen.jquery.js +++ b/chosen/chosen.jquery.js @@ -25,6 +25,7 @@ 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.set_up_html(); this.register_observers(); @@ -49,7 +50,7 @@ this.default_text = this.form_field_jq.data('placeholder') ? this.form_field_jq.data('placeholder') : this.default_text_default; container_div = $("
", { id: this.container_id, - "class": 'chzn-container', + "class": "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), style: 'width: ' + this.f_width + 'px;' }); if (this.is_multiple) { diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index e46a063..1bbcecc 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -25,6 +25,7 @@ class Chosen @form_field = elmn @form_field_jq = $ @form_field @is_multiple = @form_field.multiple + @is_rtl = @form_field_jq.hasClass "chzn-rtl" @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option" @@ -52,7 +53,7 @@ class Chosen container_div = ($ "
", { id: @container_id - class: 'chzn-container' + class: "chzn-container #{' chzn-rtl' if @is_rtl}" style: 'width: ' + (@f_width) + 'px;' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter }) From bd5daff469436c7df98e3c48fe978474e01e5be2 Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 13:12:29 +0200 Subject: [PATCH 2/4] rtl support for prototype based chosen --- chosen/chosen.proto.js | 3 ++- coffee/chosen.proto.coffee | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/chosen/chosen.proto.js b/chosen/chosen.proto.js index 627bcf8..b602dc3 100644 --- a/chosen/chosen.proto.js +++ b/chosen/chosen.proto.js @@ -14,6 +14,7 @@ this.set_default_values(); this.form_field = elmn; this.is_multiple = this.form_field.multiple; + this.is_rtl = this.form_field.hasClassName("chzn-rtl"); this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option"; this.set_up_html(); this.register_observers(); @@ -39,7 +40,7 @@ this.f_width = this.form_field.getStyle("width") ? parseInt(this.form_field.getStyle("width"), 10) : this.form_field.getWidth(); container_props = { 'id': this.container_id, - 'class': 'chzn-container', + 'class': "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), 'style': 'width: ' + this.f_width + 'px' }; this.default_text = this.form_field.readAttribute('data-placeholder') ? this.form_field.readAttribute('data-placeholder') : this.default_text_default; diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index b997a4f..e639190 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -16,6 +16,7 @@ class Chosen @form_field = elmn @is_multiple = @form_field.multiple + @is_rtl = @form_field.hasClassName "chzn-rtl" @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option" @@ -47,7 +48,7 @@ class Chosen container_props = 'id': @container_id - 'class': 'chzn-container' + 'class': "chzn-container #{' chzn-rtl' if @is_rtl}" 'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter @default_text = if @form_field.readAttribute 'data-placeholder' then @form_field.readAttribute 'data-placeholder' else @default_text_default From ed1f3548547caf50c88f8662d0005f6bd4eec787 Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 13:30:46 +0200 Subject: [PATCH 3/4] added right to left documentations --- example.html | 32 +++++++++++++++++++++++++++++++- example.jquery.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/example.html b/example.html index 8ed8fac..f36e4fc 100644 --- a/example.html +++ b/example.html @@ -1208,7 +1208,37 @@ <select data-placeholder="Choose a country..." style="width:350px;" multiple class="chzn-select">

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

- + +

Right to Left Support

+
+

Chosen supports right to left select boxes too. just add "chzn-rtl" in addition to "chzn-select" to your select tags and you are good to go.

+

<select class="chzn-select chzn-rtl">

+
+ Single right to left select + +
+
+ Multiple right to left select + +
+
+

Change / Update Events

    diff --git a/example.jquery.html b/example.jquery.html index 9846414..c1e8a24 100644 --- a/example.jquery.html +++ b/example.jquery.html @@ -1209,6 +1209,36 @@

    Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

+

Right to Left Support

+
+

Chosen supports right to left select boxes too. just add "chzn-rtl" in addition to "chzn-select" to your select tags and you are good to go.

+

<select class="chzn-select chzn-rtl">

+
+ Single right to left select + +
+
+ Multiple right to left select + +
+
+

Change / Update Events

    From 6ddac1217e4af602cb5eea7839fe6108c4251d43 Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 13:42:30 +0200 Subject: [PATCH 4/4] hiding the select to avoid sudden changes on the page and making sure we do not cause any vertical jump --- chosen/chosen.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/chosen/chosen.css b/chosen/chosen.css index 9ad2cfe..247d07b 100644 --- a/chosen/chosen.css +++ b/chosen/chosen.css @@ -1,4 +1,9 @@ /* @group Base */ +select.chzn-select { + visibility: hidden; + height: 28px !important; + min-height: 28px !important; +} .chzn-container { font-size: 13px; position: relative;