in /media/vendor/choicesjs/js/choices.js
we have this code
_proto.setWidth = function setWidth() {
// Resize input to contents or placeholder
var _this$element = this.element,
style = _this$element.style,
value = _this$element.value,
placeholder = _this$element.placeholder;
style.minWidth = placeholder.length + 1 + "ch";
style.width = value.length + 1 + "ch";
}
For example it defines the min-width and width of the input in the tag
field.
When the placeholder text is long, the min-width may be too important, forcing the field to go over the edge of the page.
Install Persian language although the issue is NOT related to RTL.
Edit an article and look at the Tags field.
Switch between en-GB and fa-IR (Persian)
en-GB
The placeholder string is
JGLOBAL_TYPE_OR_SELECT_SOME_TAGS="Type or select some tags"
Which gives for the input field
The element values are:
fa-IR
The placeholder string is
JGLOBAL_TYPE_OR_SELECT_SOME_TAGS="برخی از برچسب ها را تایپ یا انتخاب کنید"
Which gives for the input field
The element values are:
The only way I found to partly correct this issue without touching at the js is to override the min-width
.
For example in choices.scss:
.choices[data-type*="select-multiple"] .choices__input, .choices[data-type*="text"] .choices__input {
padding: 0.2rem 0 0.356rem;
color: #495057;
min-width: 35ch !important; // added
}
It still limits the number of characters as placeholder
For Persian the alignment is not too bad
the default for German is already 35ch (and still not perfect alignment for German)
Anyway in all cases, when reducing the window width, it is always bad... (until we get to x mobile view where all fields are 100%.
Labels |
Added:
?
|
hm, maybe better open issue at source https://github.com/jshjohnson/Choices
True. These inline widths are not set on the choices demo (https://joshuajohnson.co.uk/Choices/ ). I thought it was something we added.
Posted in Choices github
jshjohnson/Choices#823
@Fedik
If no reply, we could do
.choices[data-type*="select-multiple"] .choices__input,
.choices[data-type*="text"] {
[...]
.choices__input {
padding: 0.2rem 0 0.356rem;
color: $custom-select-color;
min-width: 100% !important;
width: 100% !important;
}
etc
this would override choices.js and solve our problem
What do you think?
yeap, but something like in your first comment:
min-width: 10ch !important;
max-width: 100%;
so it always will be at least 10ch width, and limited by 100% by box size
in theory
My tests show here that min-width: 10ch !important;
or min-width: 100% !important;
would not change the result.
In both cases width: 100% !important;
is what counts.
Looks like max-width: 100%;
is also not really necessary.
I meant without width: 100% !important;
the width
can stay as calculated by JS, we only have an issue with min-width, by removing it (with min-width: 10ch !important;
) we will not force it to be bigger than container
Status | New | ⇒ | Confirmed |
Build | staging | ⇒ | 4.0-dev |
Are there any new findings about? Tks.
Status | Confirmed | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-06-28 07:49:14 |
Closed_By | ⇒ | infograf768 | |
Labels |
Added:
No Code Attached Yet
Removed: ? |
I think any JS setting a
width
and amin-width
can be removed. It doesn't make any sense and I can only presume is there to support a legacy browser.