Steps to reproduce
Create view with using table and place block.

behavior expecting
comes in screen not out of screen

But it's going to out of screen on mobile.

CommentFileSizeAuthor
#5 firefox.gif1.24 MBbogdan.rizescu
#5 chrome.gif488.89 KBbogdan.rizescu
#4 3192084-after_patch_4.png24.76 KBabhijith s
#4 3192084-after_patch_3.png28.42 KBabhijith s
#4 3192084-after_patch_2.png27.58 KBabhijith s
#4 3192084-after_patch_1.png23.62 KBabhijith s
#2 3192084-2.patch885 bytesdjsagar
#2 After-patch.png60.61 KBdjsagar
Screen Shot 2021-01-11 at 5.45.02 PM.png88.6 KBdjsagar

Comments

djsagar created an issue. See original summary.

djsagar’s picture

djsagar commented
Status: Active » Needs work
StatusFileSize
new After-patch.png60.61 KB
new 3192084-2.patch885 bytes

I created patch for overflow issue for mobile please review.

Thanks!

djsagar’s picture

djsagar commented
Status: Needs work » Needs review
abhijith s’s picture

abhijith s commented
StatusFileSize
new 3192084-after_patch_1.png23.62 KB
new 3192084-after_patch_2.png27.58 KB
new 3192084-after_patch_3.png28.42 KB
new 3192084-after_patch_4.png24.76 KB

Applied patch #2 and it works fine.The table overview issue is solved by this patch.Now scrollbar will appear in tables on mobile devices. Adding screenshots below.

After patch:
after1

after2

after3

after4

RTBC +1

bogdan.rizescu’s picture

bogdan.rizescu commented
StatusFileSize
new chrome.gif488.89 KB
new firefox.gif1.24 MB

I have also tested patch #2 on Chrome and Firefox (you can see the attachments). It works well both on mobile and tablets. Good job!

imalabya’s picture

imalabya
Primary language English
Location Bangalore
commented
Status: Needs review » Closed (duplicate)

IMO it's a good improvement. However, there is an approved design Implement tables on Olivero proof of concept
 which needs to be implemented as per the mock https://github.com/Lullabot/olivero-poc/pull/18/files

Also, there is already a discussion on tables in mobile display. Tables can create horizontal scrolling at narrow viewports in Olivero Marking it as duplicate. You can apply the patch in the mentioned issue.

Thanks

andrewmacpherson’s picture

andrewmacpherson commented

Using display: block; directly on a HTML table element removes the table semantics from the accessibility tree.

This approach should NOT be committed without assistive tech testing.