diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js index 4b69d823..3efa64dd 100755 --- a/src/jquery.tokeninput.js +++ b/src/jquery.tokeninput.js @@ -70,7 +70,9 @@ idPrefix: "token-input-", // Keep track if the input is currently in disabled mode - disabled: false + disabled: false, + + rightAligned: false }; // Default classes to use when theming @@ -87,7 +89,10 @@ selectedDropdownItem : "token-input-selected-dropdown-item", inputToken : "token-input-input-token", focused : "token-input-focused", - disabled : "token-input-disabled" + disabled : "token-input-disabled", + rightAlignedDropdown : "keep-right", + rightAlignedInput : "token-input-right", + addTokenOnRight : "token-on-right" }; // Input box position "enum" @@ -408,7 +413,10 @@ // The list to store the token items in var token_list = $("
" + escapeHTML($(input).data("settings").searchingText) + "
"); + var alignment_class = ($(input).data("settings").rightAligned)? $(input).data("settings").classes.rightAlignedDropdown : "" + dropdown.html("" + escapeHTML($(input).data("settings").searchingText) + "
"); show_dropdown(); } } function show_dropdown_hint () { if($(input).data("settings").hintText) { - dropdown.html("" + escapeHTML($(input).data("settings").hintText) + "
"); + var alignment_class = ($(input).data("settings").rightAligned)? $(input).data("settings").classes.rightAlignedDropdown : "" + dropdown.html("" + escapeHTML($(input).data("settings").hintText) + "
"); show_dropdown(); } } @@ -904,6 +918,8 @@ } else { this_li.addClass($(input).data("settings").classes.dropdownItem2); } + if($(input).data("settings").rightAligned) + this_li.addClass($(input).data("settings").classes.rightAlignedDropdown); if(index === 0 && $(input).data("settings").autoSelectFirstResult) { select_dropdown_item(this_li); @@ -921,7 +937,8 @@ } } else { if($(input).data("settings").noResultsText) { - dropdown.html("" + escapeHTML($(input).data("settings").noResultsText) + "
"); + var alignment_class = ($(input).data("settings").rightAligned)? $(input).data("settings").classes.rightAlignedDropdown : "" + dropdown.html("" + escapeHTML($(input).data("settings").noResultsText) + "
"); show_dropdown(); } } diff --git a/styles/token-input.css b/styles/token-input.css index 003f5848..6ea0cdfc 100644 --- a/styles/token-input.css +++ b/styles/token-input.css @@ -1,7 +1,7 @@ /* Example tokeninput style #1: Token vertical list*/ ul.token-input-list { - overflow: hidden; - height: auto !important; + overflow: hidden; + height: auto !important; height: 1%; width: 400px; border: 1px solid #999; @@ -44,8 +44,8 @@ ul.token-input-disabled li.token-input-token span { } li.token-input-token { - overflow: hidden; - height: auto !important; + overflow: hidden; + height: auto !important; height: 1%; margin: 3px; padding: 3px 5px; @@ -125,3 +125,15 @@ div.token-input-dropdown ul li em { div.token-input-dropdown ul li.token-input-selected-dropdown-item { background-color: #d0efa0; } + +.keep-right{ + text-align: right; +} + +.token-input-right { + direction : rtl; +} + +.token-on-right { + float : right !important; +} \ No newline at end of file