J4 Issue ?
avatar Scrabble96
Scrabble96
4 Jan 2019

Steps to reproduce the issue

Open existing or create new module.
Resize (desktop) screen to about half width but so that position list is still to the right of the editor, not below.
Click the Position drop-down menu to view list of module positions

Expected result

Readable module positions

Actual result

Difficult-to-read module positions due to 100px right padding after module position name with a min-width set at 640px, which is too narrow and possibly not necessary.

image

System information (as much as possible)

Viewing on J4.0 Alpha 7-dev
The browser inspector says it's in a file called /media/vendor/choicesjs/css/choices.min.css.
I have found choices.css in the site folders and the code in question is on line 260:

@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable {
    padding-right: 100px;
  }

Changing the padding to 10px makes the module names readable again but the "Press to select" text (data-select-text) now overlaps the module name:

image

Additional comments

I'm afraid that suggesting a code change to make the data-select-text wrap below the module name is beyond me, but is this text really necessary? What else would you do to select a position? You don't say "Press to select" on other menus (as far as I've noticed).

avatar Scrabble96 Scrabble96 - open - 4 Jan 2019
avatar Scrabble96 Scrabble96 - change - 4 Jan 2019
Title
J4.0 - "Press to select" text is causing module position names to wrap on narrow screens
J4.0 - 100px padding is causing module position names list to wrap on medium-width screens
avatar Scrabble96 Scrabble96 - edited - 4 Jan 2019
avatar Scrabble96 Scrabble96 - change - 4 Jan 2019
The description was changed
avatar Scrabble96 Scrabble96 - edited - 4 Jan 2019
avatar hardik-codes
hardik-codes - comment - 27 Jan 2019

I think the same in this regard that we don't say "Press to select" on menus. @Scrabble96 I think I should go about solving the above thing and also excluding the "Press on select".

avatar franz-wohlkoenig franz-wohlkoenig - change - 4 Mar 2019
Title
J4.0 - 100px padding is causing module position names list to wrap on medium-width screens
[4.0] 100px padding is causing module position names list to wrap on medium-width screens
Status New Discussion
avatar joomla-cms-bot joomla-cms-bot - edited - 4 Mar 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 28 Mar 2019
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2019-03-28 08:27:37
Closed_By franz-wohlkoenig
avatar joomla-cms-bot joomla-cms-bot - change - 28 Mar 2019
Closed_By franz-wohlkoenig joomla-cms-bot
avatar joomla-cms-bot joomla-cms-bot - close - 28 Mar 2019
avatar joomla-cms-bot
joomla-cms-bot - comment - 28 Mar 2019
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 28 Mar 2019

closed as having Pull Request #23706

avatar Quy Quy - change - 5 Jul 2019
Status Closed Confirmed
Closed_Date 2019-03-28 08:27:37
Closed_By joomla-cms-bot
avatar Quy Quy - reopen - 5 Jul 2019
avatar Quy Quy - change - 5 Jul 2019
Labels Added: J4 Issue
avatar Quy Quy - labeled - 5 Jul 2019
avatar Scrabble96
Scrabble96 - comment - 8 Oct 2019

There is a similar function in articles when choosing categories, but this displays correctly. I would suggest that the CSS code used for displaying the category options is copied over to the module position display.

However, my success rate with raising PRs is practically nil, so I would appreciate someone with experience doing this, please. Thank you.

avatar brianteeman
brianteeman - comment - 29 Dec 2019

This is just waiting on an update from the choices js script. The fix has been merged and hopefully it will be merged soon

avatar ciar4n
ciar4n - comment - 11 Apr 2020

PR created.. #28658

avatar Quy Quy - change - 11 Apr 2020
Status Confirmed Closed
Closed_Date 0000-00-00 00:00:00 2020-04-11 20:03:22
Closed_By Quy
avatar Quy Quy - close - 11 Apr 2020

Add a Comment

Login with GitHub to post a comment