Expanded responsive view overflows screen

Expanded responsive view overflows screen

dimicheledimichele Posts: 3Questions: 3Answers: 0

Link to test case:
https://registeredcitizens.com/residency-restrictions/

Description of problem:

I am using datatables inside Wordpress successfully on a computer. On a cellphone, mine is a Pixel 3a XL, the collapsed table is beautiful. However, when I click the expand icon the table expands but a lot of the data overflows the right side of the screen and I can't scroll to the right to see all of the data.

If you goto my link above, open the developer console, and turn on responsive mode, then choose the Pixel 2 XL or resize the screen to under 575 wide you can see what I am talking about.

I am using Chrome on the Pixel phone.

Is there to force the expanded view of the table to behave on a cellphone when there is a lot of content in the data cells and the phone resolution is less than 575 pixels?

Thanks in advance.

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,055 Site admin

    Its the link text that is causing the issue:

    Interestingly, in Firefox it automatically breaks the link text over lines even if there is no white space.

    To get the same in Chrome:

    td a {
      word-break: break-word;
    }
    

    Allan

This discussion has been closed.