No Code Attached Yet
avatar infograf768
infograf768
12 Feb 2020

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.

Steps to reproduce the issue

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

Screen Shot 2020-02-12 at 11 49 51

The element values are:

Screen Shot 2020-02-12 at 11 50 08

fa-IR
The placeholder string is
JGLOBAL_TYPE_OR_SELECT_SOME_TAGS="برخی از برچسب ها را تایپ یا انتخاب کنید"

Which gives for the input field

Screen Shot 2020-02-12 at 11 48 45

The element values are:

Screen Shot 2020-02-12 at 11 49 37

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

Screen Shot 2020-02-12 at 12 51 13

the default for German is already 35ch (and still not perfect alignment for German)

Screen Shot 2020-02-12 at 12 46 11

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%.

Screen Shot 2020-02-12 at 12 55 32

@ciar4n

avatar infograf768 infograf768 - open - 12 Feb 2020
avatar joomla-cms-bot joomla-cms-bot - change - 12 Feb 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 12 Feb 2020
avatar ciar4n
ciar4n - comment - 12 Feb 2020

I think any JS setting a width and a min-width can be removed. It doesn't make any sense and I can only presume is there to support a legacy browser.

avatar Fedik
Fedik - comment - 12 Feb 2020

hm, maybe better open issue at source https://github.com/jshjohnson/Choices

avatar ciar4n
ciar4n - comment - 12 Feb 2020

True. These inline widths are not set on the choices demo (https://joshuajohnson.co.uk/Choices/ ). I thought it was something we added.

avatar infograf768
infograf768 - comment - 12 Feb 2020

Posted in Choices github
jshjohnson/Choices#823

avatar infograf768
infograf768 - comment - 13 Feb 2020

@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?

avatar Fedik
Fedik - comment - 13 Feb 2020

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

avatar infograf768
infograf768 - comment - 13 Feb 2020

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.

avatar Fedik
Fedik - comment - 13 Feb 2020

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

avatar jwaisner jwaisner - change - 15 Apr 2020
Status New Confirmed
Build staging 4.0-dev
avatar ChristineWk
ChristineWk - comment - 31 Oct 2020

Are there any new findings about? Tks.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27907.

avatar wojsmol
wojsmol - comment - 31 Oct 2020

Please see this note in the jshjohnson/Choices REAME.md.

avatar infograf768 infograf768 - change - 28 Jun 2022
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: ?
avatar infograf768 infograf768 - close - 28 Jun 2022

Add a Comment

Login with GitHub to post a comment