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

CommentFileSizeAuthor
#35 Patcherror.png33 KBkanchan bhogade
#35 Screen Shot 2025-04-17 at 12.55.56.png82.23 KBkanchan bhogade
#35 Screen Shot 2025-04-17 at 12.52.23.png78.54 KBkanchan bhogade
#34 Screenshot from 2025-04-17 12-03-09.png40.42 KBsnehal-chibde
#34 Screenshot from 2025-04-17 12-04-11.png31.9 KBsnehal-chibde
#34 Screenshot from 2025-04-17 12-05-28.png27.64 KBsnehal-chibde
#34 Screenshot from 2025-04-17 12-05-44.png48.39 KBsnehal-chibde
#33 Screenshot-of-mobile-respose-view-of-long-list-of-elements-in-claro-theme.png36.33 KBniranjan_panem
#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

Comments

HOG created an issue. See original summary.

hog’s picture

hog commented
StatusFileSize
new table_displaying_on_mobile-2920546-2.patch387 bytes
new interdiff-table_displaying_on_mobile-2920546-2.txt600 bytes
hog’s picture

hog commented
Assigned: hog » Unassigned
Status: Active » Needs review
andypost’s picture

andypost
he/him
Primary language Russian
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 commented
StatusFileSize
new 2920546-9.patch387 bytes

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

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 2920546-10.patch370 bytes
new 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 commented
StatusFileSize
new 2920546-13.patch395 bytes

Just rerolled #10

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new 2920546-14.patch358 bytes
new interdiff_13-14.txt394 bytes
ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new 2920546-15.patch356 bytes
abhijith s’s picture

abhijith s commented
StatusFileSize
new 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 commented
StatusFileSize
new 2920546-table-cut-off-small-device-before-patch.png79.62 KB
new 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 commented
Status: Needs review » Needs work
StatusFileSize
new 2920546-Before Patch.png36.6 KB
new 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 commented
StatusFileSize
new 2920546-20.patch491 bytes
new 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 commented
Status: Needs work » Needs review
Manibharathi E R’s picture

Manibharathi E R commented
StatusFileSize
new 2920546-21.patch520 bytes

Updaed Patch #20.

Manibharathi E R’s picture

Manibharathi E R commented
StatusFileSize
new 2920546-22.patch513 bytes

Updated Patch.

Manibharathi E R’s picture

Manibharathi E R commented
StatusFileSize
new 2920546-23.patch513 bytes
Anonymous’s picture

Anonymous (not verified) commented
StatusFileSize
new 2920546-25.patch546 bytes
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

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

sahil rohilla01’s picture

sahil rohilla01 commented
StatusFileSize
new 2920546-16.patch365 bytes
sahil rohilla01’s picture

sahil rohilla01 commented
StatusFileSize
new 2920546-16.patch365 bytes
sahil rohilla01’s picture

sahil rohilla01 commented
StatusFileSize
new 2920546-29.patch369 bytes
longwave’s picture

longwave
he/him
Primary language English
Location UK
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.

niranjan_panem’s picture

niranjan_panem commented
StatusFileSize
new Screenshot-of-mobile-respose-view-of-long-list-of-elements-in-claro-theme.png36.33 KB

Checked in Drupal 11 claro theme, not able to reproduce the issue. below is the screen shot of working as expected.
screenshot of mobile view

snehal-chibde’s picture

snehal-chibde commented
Status: Needs work » Needs review
StatusFileSize
new Screenshot from 2025-04-17 12-05-44.png48.39 KB
new Screenshot from 2025-04-17 12-05-28.png27.64 KB
new Screenshot from 2025-04-17 12-04-11.png31.9 KB
new Screenshot from 2025-04-17 12-03-09.png40.42 KB

I have checked this issue in drupal 11 claro theme, not able to replicate it, checked on various pages wherein we have long element in table, the issue is not replicated.

kanchan bhogade’s picture

kanchan bhogade commented
StatusFileSize
new Screen Shot 2025-04-17 at 12.52.23.png78.54 KB
new Screen Shot 2025-04-17 at 12.55.56.png82.23 KB
new Patcherror.png33 KB

Hi
I have able to reproduce this issue on Drupal 11.x using Drupal pod.
but unable to apply the patch.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: -table Seven +Needs issue summary update

The issue summary for this one appears incomplete.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.