Table horizontal scrool in pop up

Hi @ethicpc,

Thank you for reaching out to us. Sure, I will be happy to assist you with your requested feature.

Could you please share your test page or site URL with the active popup holding your requested table?

I am looking forward to your response. Thank You.

Hello,

Thank you for your help.

You can go to the page: https://www.maisonbelema.fr/ and in the footer, on the link “Guide des tailles”.

I forgot to specify that it was the mobile version, because the problem does not occur in desktop format.

Thanks again for your help.

Hi @ethicpc,

I appreciate your patience. I tried a few changes; however, I couldn’t confirm the same on the mobile device, as the edit was only on the front end.

If you don’t mind, could you please send us your request via our support page (URL: https://divimode.com/get-support/) so we can investigate further and resolve your issue? As we need temporary access to your site to confirm the changes.

I am looking forward to your response and resolving your issue. Thank you.

Hi ! Thanks for your answer.

You can try this code il your popup, you’ll see the problem :

<table>
<thead>
  <tr>
    <th style="background-color: black; color: white; border: 1px solid white; text-align: center;">Taille</th>
    <th style="background-color: black; color: white; border: 1px solid white; text-align: center;">54 / 55</th>
    <th style="background-color: black; color: white; border: 1px solid white; text-align: center;">56 / 57</th>
    <th style="background-color: black; color: white; border: 1px solid white; text-align: center;">58 / 59</th>
    <th style="background-color: black; color: white; border: 1px solid white; text-align: center;">60 / 61</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td style="background-color: black; color: white; border: 1px solid white; text-align: center; border-color: black;">Universelle</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">S</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">M</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">L</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">XL</td>
  </tr>
  <tr>
    <td style="background-color: black; color: white; border: 1px solid white; text-align: center; border-color: black;">US</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">6 3/4 - 6 7/8</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">7 - 7 1/8</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">7 1/4 - 7 3/8</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">6 7/8 - 7</td>
  </tr>
  <tr>
    <td style="background-color: black; color: white; border: 1px solid white; text-align: center; border-color: black;">UK</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">6 5/8 - 6 3/4</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">6 7/8 - 7</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">7 1/2 - 7 5/8</td>
    <td style="text-align: center; border: 1px solid black; white-space: nowrap;">7 1/8 - 7 1/4</td>
  </tr>
</tbody>
</table>

Hi @ethicpc,

Thank you for your patience, I forwarded your request to our development team to confirm the optimal solution to resolve your issue.

And our development team updated the following code to add to your popup to resolve your table scroll issue.

Code:
Script Open

DiviArea.addAction( 'disabled_scrolling', function() {
DiviArea.Core.enableBodyScroll();
});

Scrip Close

You should create a Code-Module inside that Area and paste the code into that module.
See here: https://share.getcloudapp.com/wbuDgmR4

I have also tested it and created a demonstration.
See here: https://share.getcloudapp.com/GGu7jNev

I hope this information helps. Please do not hesitate to ask any further questions. Thank you.

Hi,
thank you very much for your answer!
However, there is something I don’t understand. The code you provided in response is not the same code as in your video capture.
What is the code to use?
Thanks again for your work!

Hi @ethicpc,

Thank you for reaching out to us again. I am sorry for the confusion; implementing anyone will give the same result.

You can simply add the code I have added in my response above.

Code:
Script Open

DiviArea.addAction( 'disabled_scrolling', function() {
DiviArea.Core.enableBodyScroll();
});

Scrip Close

Preview: https://share.getcloudapp.com/E0uXvQnR

Sample/Test URL: https://preview.divimode.com/popup-with-scrollable-contents/

I hope this information helps; please do not hesitate to ask any further questions. Thank you.

Hi!
Thank you so much for this code that works great!

Thanks again!

Hi @ethicpc,

Thank you for your confirmation. I appreciate.