Post by matts119 » Mon Jul 08, 2024 11:17 pm

Hi. I have a problem that the paypal checkout integration plugin stops the table on the checkout screen from being able to scroll across. I mean the table that displays all of the items ordered and their prices, just before you enter your credit card details or press the paypal button (id="collapse-checkout-confirm"). On a laptop or big screen its no problem, but when seen on a mobile and the responsive mode shrinks everything it takes effect. You can see here https://www.thebiocleanse.com/. I was figuring I should move the paypal code to outside of the id="collapse-checkout-confirm" panel. Is that correct, and if so where can I find this code?

Sorry forgot to add
1. Your Exact OpenCart Version (e.g. 1.5.6.4, 2.3.0.2, 3.0.6.0, etc.)
3.0.3.9
2. Used Template/Theme
codezeel written Wrist Timer
3. (Additional) Installed Extension(s)

4. (Additional) Installed Translation(s)

5. Used php Version
7.4
6. Used Browser and Version (and if used, installed extensions like Ads-Blocker, etc.)
chrome latest

Newbie

Posts

Joined
Mon Jul 08, 2024 11:10 pm

Post by softmonke » Wed Jul 10, 2024 10:31 am

matts119 wrote:
Mon Jul 08, 2024 11:17 pm
Hi. I have a problem that the paypal checkout integration plugin stops the table on the checkout screen from being able to scroll across. I mean the table that displays all of the items ordered and their prices, just before you enter your credit card details or press the paypal button (id="collapse-checkout-confirm"). On a laptop or big screen its no problem, but when seen on a mobile and the responsive mode shrinks everything it takes effect. You can see here https://www.thebiocleanse.com/. I was figuring I should move the paypal code to outside of the id="collapse-checkout-confirm" panel. Is that correct, and if so where can I find this code?

Sorry forgot to add
1. Your Exact OpenCart Version (e.g. 1.5.6.4, 2.3.0.2, 3.0.6.0, etc.)
3.0.3.9
2. Used Template/Theme
codezeel written Wrist Timer
3. (Additional) Installed Extension(s)

4. (Additional) Installed Translation(s)

5. Used php Version
7.4
6. Used Browser and Version (and if used, installed extensions like Ads-Blocker, etc.)
chrome latest
Seems like it could be an issue with your theme. In "bootstrap.min.css" (CSS style copy-pasted below), there is a "float: left" property added for the "table-responsive" class:

Code: Select all

@media (max-width: 767px) {
    .table-responsive {
        float: left;
        margin-bottom: 15px;
        overflow: auto;
        width: 100%;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch;
    }
}
Remove the "float: left" property and it should work correctly. But I'm not sure if it might cause any other issues on other parts of your website.

Check out our ever-growing list of extensions for OpenCart here.
Some useful extensions for a better admin experience: Image File Manager ProDrag & Drop Sort Order

Reach out to us at hello@softmonke.com for your OpenCart web development needs or feedback for our extensions.


User avatar
Active Member

Posts

Joined
Tue May 23, 2023 4:42 am


Post by matts119 » Wed Jul 10, 2024 10:39 pm

Thank you, yes that was the problem, but the fix turned out to be to wrap the table in a <div class="clearfix"> tag. This can be done in the /catalog/view/theme/default/template/checkout/confirm.twig file for anyone else with the issue.

Fixing like this will avoid messing up other things that use that css class I think.

Newbie

Posts

Joined
Mon Jul 08, 2024 11:10 pm
Who is online

Users browsing this forum: No registered users and 2 guests