deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-18 13:45:12 +02:00
Code Issues Projects Releases Wiki Activity

Function to handle input width sizing + minor tweaks

Browse source
This commit is contained in:
Josh Johnson 2016-10-22 21:04:13 +01:00
parent 378c6dbafa
commit ca0541b91a
4 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
assets/scripts/src/choices.js
View file

@ -810,7 +810,7 @@ class Choices {
clearInput() {
if (this.input.value) this.input.value = '';
if (this.passedElement.type !== 'select-one') {
this.input.style.width = getWidthOfInput(this.input);
this._setInputWidth();
}
if (this.passedElement.type !== 'text' && this.config.search) {
this.isSearching = false;
@ -1009,7 +1009,7 @@ class Choices {
// we can edit the item value. Otherwise if we can remove items, remove all selected items
if (this.config.editItems && !hasHighlightedItems && lastItem) {
this.input.value = lastItem.value;
this.input.style.width = getWidthOfInput(this.input);
this._setInputWidth();
this._removeItem(lastItem);
this._triggerChange(lastItem.value);
} else {
@ -1238,6 +1238,26 @@ class Choices {
this.input.removeEventListener('blur', this._onBlur);
}
/**
* Set the correct input width based on placeholder
* value or input value
* @return
*/
_setInputWidth() {
if (this.config.placeholder && (this.config.placeholderValue || this.passedElement.getAttribute('placeholder'))) {
// If there is a placeholder, we only want to set the width of the input when it is a greater
// length than 75% of the placeholder. This stops the input jumping around.
const placeholder = this.config.placeholder ? this.config.placeholderValue ||
this.passedElement.getAttribute('placeholder') : false;
if (this.input.value && this.input.value.length >= (placeholder.length / 1.25)) {
this.input.style.width = getWidthOfInput(this.input);
}
} else {
// If there is no placeholder, resize input to contents
this.input.style.width = getWidthOfInput(this.input);
}
}
/**
* Key down event
* @param {Object} e Event
@ -1444,18 +1464,7 @@ class Choices {
*/
_onInput() {
if (this.passedElement.type !== 'select-one') {
if (this.config.placeholder && (this.config.placeholderValue || this.passedElement.getAttribute('placeholder'))) {
// If there is a placeholder, we only want to set the width of the input when it is a greater
// length than 75% of the placeholder. This stops the input jumping around.
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
false;
if (this.input.value && this.input.value.length >= (placeholder.length / 1.25)) {
this.input.style.width = getWidthOfInput(this.input);
}
} else {
// If there is no placeholder, resize input to contents
this.input.style.width = getWidthOfInput(this.input);
}
this._setInputWidth();
}
}

1
assets/styles/css/choices.css
View file

@ -220,6 +220,7 @@
border-bottom-left-radius: 2.5px;
border-bottom-right-radius: 2.5px;
overflow: hidden;
word-break: break-all;
}
.choices__list--dropdown.is-active {

2
assets/styles/css/choices.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
assets/styles/scss/choices.scss
View file

@ -192,6 +192,7 @@ $choices-button-offset: 8px !default;
border-bottom-left-radius: $choices-border-radius;
border-bottom-right-radius: $choices-border-radius;
overflow: hidden;
word-break: break-all;
&.is-active { display: block; }
.is-open & { border-color: darken($choices-keyline-color, 15%); }
.is-flipped & {