? ? NPM Resource Changed Pending

User tests: Successful: Unsuccessful:

avatar eopws
eopws
23 May 2021

Pull Request for Issue #33480 and #34081.

Summary of Changes

Added the logic of addin' horizontal scrollbar to grid form when not havin' enough width for elements

Testing Instructions

Create a menu item of "Category Blog" type and go to the "Blog Layout" tab

Actual result BEFORE applying this Pull Request

image

Expected result AFTER applying this Pull Request

img

avatar eopws eopws - open - 23 May 2021
avatar eopws eopws - change - 23 May 2021
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 23 May 2021
Category Administration Templates (admin) NPM Change
avatar eopws eopws - change - 23 May 2021
Title
Add "overflow" property
[4.0] Fix form grid layout
avatar eopws eopws - edited - 23 May 2021
avatar chmst
chmst - comment - 25 May 2021

Sorry, no, Horizontal scrolling is not responsive. The line must break, as it does on smaller devices.

avatar eopws
eopws - comment - 25 May 2021

Sorry, no, Horizontal scrolling is not responsive. The line must break, as it does on smaller devices.

Ok, I'm gonna fix it

avatar eopws
eopws - comment - 25 May 2021

Through few hours of searchin the only one solution that I found is to reduce count of columns, but I'm not sure if it is a good architecture solution (change layout of the whole template in order to make one page look better?)...

I would love to see a comment from a more experienced developer than me...

img

avatar sandramay0905
sandramay0905 - comment - 4 Jun 2021

Should this pull request get a test?

avatar sandramay0905 sandramay0905 - test_item - 8 Jun 2021 - Tested successfully
avatar sandramay0905
sandramay0905 - comment - 8 Jun 2021

I have tested this item successfully on 084a140

Thanks for the hint @drmenzelit at #34450 (comment)


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

avatar eopws
eopws - comment - 8 Jun 2021

Sorry for missing.

According to this issue #34450 it's okay to add horizontal scroll.

But according to this comment #34145 (comment) it's better to break line.

So which is better?

avatar drmenzelit
drmenzelit - comment - 9 Jun 2021

Through few hours of searchin the only one solution that I found is to reduce count of columns, but I'm not sure if it is a good architecture solution (change layout of the whole template in order to make one page look better?)...

I would love to see a comment from a more experienced developer than me...

img

This is the better solution

avatar eopws eopws - change - 9 Jun 2021
Labels Added: NPM Resource Changed ?
avatar eopws
eopws - comment - 9 Jun 2021

Please test new patch.

This is how it looks on my PC
img

avatar sandramay0905
sandramay0905 - comment - 10 Jun 2021

This is how it looks like using latest prebuilt package (custom update server) but i don't know sure if this is now an successfully test:

1500 width:

image

iPad landscape:

image

avatar angieradtke
angieradtke - comment - 14 Jul 2021

grid2

I think the problem is more complex than the fix .
You changed:

` @include media-breakpoint-up(md) {

grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem 2rem;

}
'

from 4 to 2 columns. But what is width the larger one. This view is broken as well

@include media-breakpoint-up(lg) {
    --span-5: span 5;

    grid-template-columns: repeat(6, 1fr);
  }

The leading-Class column is problem because it goes over two grid column.
@ciar4n , can you take a look please.

avatar RickR2H
RickR2H - comment - 14 Oct 2021

I added a PR which I think addresses the same issue as this PR. Please toke a look at my PR an see it id addresses the issue and if it is fixed? #35823. If so, then we can close this PR.


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

avatar eopws eopws - change - 19 Oct 2021
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2021-10-19 09:52:33
Closed_By eopws
Labels Added: ? ?
Removed: ?
avatar eopws eopws - close - 19 Oct 2021

Add a Comment

Login with GitHub to post a comment