When we have long element in table they are cut off on tablet/mobile resolution.

CommentFileSizeAuthor
#29 2920546-29.patch369 bytesSAHIL ROHILLA01
#28 2920546-16.patch365 bytesSAHIL ROHILLA01
#27 2920546-16.patch365 bytesSAHIL ROHILLA01
#25 2920546-25.patch546 bytesAnonymous (not verified)
#24 2920546-23.patch513 bytesManibharathi E R
#23 2920546-22.patch513 bytesManibharathi E R
#22 2920546-21.patch520 bytesManibharathi E R
#20 Table Scroll Screenshot.png24.11 KBManibharathi E R
#20 2920546-20.patch491 bytesManibharathi E R
#19 2920546-After-patch.png74.12 KBManibharathi E R
#19 2920546-Before Patch.png36.6 KBManibharathi E R
#18 2920546-table-cut-off-small-device-after-patch.png78.56 KBHarish1688
#18 2920546-table-cut-off-small-device-before-patch.png79.62 KBHarish1688
#16 2920546-16.patch365 bytesAbhijith S
#15 2920546-15.patch356 bytesranjith_kumar_k_u
#14 interdiff_13-14.txt394 bytesranjith_kumar_k_u
#14 2920546-14.patch358 bytesranjith_kumar_k_u
#13 2920546-13.patch395 bytesranjith_kumar_k_u
#10 interdiff_9-10.txt393 bytesGauravvvv
#10 2920546-10.patch370 bytesGauravvvv
#9 2920546-9.patch387 bytesdjsagar
#2 interdiff-table_displaying_on_mobile-2920546-2.txt600 bytesHOG
#2 table_displaying_on_mobile-2920546-2.patch387 bytesHOG
Selection_347.png93.82 KBHOG
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

HOG created an issue. See original summary.

HOG’s picture

HOG CreditAttribution: HOG at Skilld, Drupal Ukraine Community commented
FileSize
table_displaying_on_mobile-2920546-2.patch387 bytes
interdiff-table_displaying_on_mobile-2920546-2.txt600 bytes
HOG’s picture

HOG CreditAttribution: HOG at Skilld, Drupal Ukraine Community commented
Assigned: HOG » Unassigned
Status: Active » Needs review
andypost’s picture

andypost
he/him
Primary language Russian
CreditAttribution: andypost as a volunteer and at Skilld commented
Issue summary: View changes

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

djsagar’s picture

djsagar CreditAttribution: djsagar at OpenSense Labs commented
FileSize
2920546-9.patch387 bytes

Just re-rolled the patch for 8.9.x-dev.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
FileSize
2920546-10.patch370 bytes
interdiff_9-10.txt393 bytes

Re-rolled patch #9. Attached interdiff for #9-10.
Please review.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev
ranjith_kumar_k_u’s picture

ranjith_kumar_k_u CreditAttribution: ranjith_kumar_k_u at Zyxware Technologies commented
FileSize
2920546-13.patch395 bytes

Just rerolled #10

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u CreditAttribution: ranjith_kumar_k_u at Zyxware Technologies commented
FileSize
2920546-14.patch358 bytes
interdiff_13-14.txt394 bytes
ranjith_kumar_k_u’s picture

ranjith_kumar_k_u CreditAttribution: ranjith_kumar_k_u at Zyxware Technologies commented
FileSize
2920546-15.patch356 bytes
Abhijith S’s picture

Abhijith S CreditAttribution: Abhijith S as a volunteer and at Zyxware Technologies commented
FileSize
2920546-16.patch365 bytes

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Harish1688’s picture

Harish1688 CreditAttribution: Harish1688 at Srijan | A Material+ Company commented
FileSize
2920546-table-cut-off-small-device-before-patch.png79.62 KB
2920546-table-cut-off-small-device-after-patch.png78.56 KB

Tested the patch (2920546-16.patch) and all other, all patch used 'table-layout: fixed' property to resolve the issue, but when we have more content in the table, table shrink and looks messy. it's not looks good approach to resolve this.
attached the screenshot before after patch.

Manibharathi E R’s picture

Manibharathi E R CreditAttribution: Manibharathi E R at Srijan | A Material+ Company for Srijan | A Material+ Company commented
Status: Needs review » Needs work
FileSize
2920546-Before Patch.png36.6 KB
2920546-After-patch.png74.12 KB

Tested the #16 patch. Issue is not resolved as approached. UI is breaking after adding the patch. It's not good solution for this issue.
Before Patch
Before-Patch
After Patch
After-Patch

Manibharathi E R’s picture

Manibharathi E R CreditAttribution: Manibharathi E R at Srijan | A Material+ Company for Srijan | A Material+ Company commented
FileSize
2920546-20.patch491 bytes
Table Scroll Screenshot.png24.11 KB

Adding the Patch Against the Drupal 9.4.x. Adding the Scroll to the table in the Mobile view. Please Find the Attached screenshot.
Please Review.

Table-scroll

Manibharathi E R’s picture

Manibharathi E R CreditAttribution: Manibharathi E R at Srijan | A Material+ Company for Srijan | A Material+ Company commented
Status: Needs work » Needs review
Manibharathi E R’s picture

Manibharathi E R CreditAttribution: Manibharathi E R at Srijan | A Material+ Company for Srijan | A Material+ Company commented
FileSize
2920546-21.patch520 bytes

Updaed Patch #20.

Manibharathi E R’s picture

Manibharathi E R CreditAttribution: Manibharathi E R at Srijan | A Material+ Company for Srijan | A Material+ Company commented
FileSize
2920546-22.patch513 bytes

Updated Patch.

Manibharathi E R’s picture

Manibharathi E R CreditAttribution: Manibharathi E R at Srijan | A Material+ Company for Srijan | A Material+ Company commented
FileSize
2920546-23.patch513 bytes
Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous at OpenSense Labs commented
FileSize
2920546-25.patch546 bytes
smustgrave’s picture

smustgrave CreditAttribution: smustgrave at Mobomo commented
Status: Needs review » Needs work

Looks like patch #25 failed to apply moving back to NW

SAHIL ROHILLA01’s picture

SAHIL ROHILLA01 CreditAttribution: SAHIL ROHILLA01 commented
FileSize
2920546-16.patch365 bytes
SAHIL ROHILLA01’s picture

SAHIL ROHILLA01 CreditAttribution: SAHIL ROHILLA01 commented
FileSize
2920546-16.patch365 bytes
SAHIL ROHILLA01’s picture

SAHIL ROHILLA01 CreditAttribution: SAHIL ROHILLA01 commented
FileSize
2920546-29.patch369 bytes
longwave’s picture

longwave
he/him
Primary language English
Location UK
CreditAttribution: longwave at Full Fat Things commented
Component: Seven theme » Claro theme

Looks like Claro has identical CSS for the table element. Moving to Claro so it can be determined if this is a problem there; if not, this should be moved to the contributed Seven project as Seven is now removed from core.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.