Table showing scrollbar at the bottom, when it shouldn't be there

Question

I'm struggling with a table, that when particular row is present is showing a scrollbarr.

In the code below, First row and second row everything is OK. But when I put the third row (within the foreach) a scrollbar appears at the bottom.

This happens ONLY on desktop. On mobile there is no issue.

NOTE: There is some external CSS I cannot deal with!

HTML:

<div id="content">
        <div id="header">
        </div>
        <div class="formcontent">
            <form method="post">
                <input type="hidden" name="action" value="order_received"/>
                <div class="form-table">
                    <h1 class="center">HEADING HERE</h1>
                    <table class="tagtable listwithfilterbefore">
                        <tr class="oddeven">
                            <td class="left">First row</td>
                            <td class="left"><input type="text" class="minwidth200imp" name="customer" value=""/></td>
                        </tr>
                        <tr class="oddeven">
                            <td class="left">Second row</td>
                            <td class="left">
                                <select name="payment_mode" class="minwidth200imp">
                                    <option value=""></option>
                                    <option value="1">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                </select>
                            </td>
                        </tr>
                        <?php
                        foreach ($object->getExternalProducts() as $result) {
                            print '<tr class="oddeven">';
                            print '<td class="left">' . $result->label . '</td>';
                            print '<td class="left"><input type="number" class="minwidth200imp" name="' .
                                $result->rowid . '" value="" />&nbsp;' . $langs->trans('Pcs') . '</td>';
                            print '<tr>';
                        }
                        ?>
                    </table>
                </div>
            </form>
        </div>
        <div id="footer_container">
        <div id="footer">
            FOOTER HERE
        </div>
        </div>
    </div>

CSS:

@media only screen and (min-width: 601px) {
    #content {
        background-color: #E52D7A;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        min-height: 750px;
        z-index: 100;
        font-family: Montserrat, Sans-serif;
        font-weight: 600;
    }

    #header {
        background-image: url("../img/bgr.png");
        background-repeat: no-repeat;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: 100% 100%;
        position: relative;
        text-align: center;
    }

    .formcontent {
        position: relative;
        padding-top: 50px;
        padding-bottom: 100px;
        text-align: center;
    }

    .form-table {
        background: #fff;
        margin: 0 auto;
        padding: 20px;
        border-radius: 20px;
        max-width: 570px;
        text-align: left;
    }
    h1 {
        padding: 10px;
    }

    h2 {
        padding: 10px;
    }

    #footer_container {
        background: #6E0E5E; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(top, #6E0E5E); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
        background: -webkit-linear-gradient(top, #6E0E5E);
        background: -webkit-linear-gradient(top, #6E0000);
        background: -webkit-linear-gradient(top, #6E0E);
        background: -webkit-linear-gradient(top, #6E0E5E);
        background: black linear-gradient(#E52D7A 0, #6E0E5E 100%); /* Standard syntax */

        width: 100%;
        min-width: 100%;
        bottom: 0;
        left: 0;
        position: fixed;
    }

    #footer {
        line-height: 60px;
        margin: 0 auto;
        text-align: center;
    }
}
@media only screen and (max-width: 601px) {
    #content {
        background-color: #E52D7A;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        min-height: 750px;
        z-index: 100;
        font-family: Montserrat, Sans-serif;
        font-weight: 600;
    }
    #header {
        background-image: url("../img/bgr.png");
        background-repeat: no-repeat;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: 100% 100%;
        position: relative;
        text-align: center;
    }

    .responsive {
        width: 100%;
        height: auto;
    }

    .formcontent {
        position: relative;
        padding-top: 50px;
        padding-bottom: 100px;
        text-align: center;
    }

    .form-table {
        background: #fff;
        margin: 0 auto;
        padding: 20px;
        border-radius: 20px;
        max-width: 90%;
        text-align: left;
    }
    table tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    h1 {
        padding: 10px;
    }

    h2 {
        padding: 10px;
    }

    #footer_container {
        background: #6E0E5E; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(top, #6E0E5E); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
        background: -webkit-linear-gradient(top, #6E0E5E);
        background: -webkit-linear-gradient(top, #6E0000);
        background: -webkit-linear-gradient(top, #6E0E);
        background: -webkit-linear-gradient(top, #6E0E5E);
        background: #E52D7A linear-gradient(#E52D7A 0, #6E0E5E 100%); /* Standard syntax */
        width: 100%;
        min-width: 100%;
        bottom: 0;
        left: 0;
        position: fixed;
    }

    #footer {
        line-height: 60px;
        margin: 0 auto;
        text-align: center;
    }
}

link: https://dev.blacktiehost.com/dolibarr2/htdocs/orderForm.php

My desktop has: 1920 x 1080 but there is no scroll bar, I think it is the default behavior of the browser w.r.t dimensions. Try setting table max width to 100% (there are 2 places in your CSS that deal with max width so try to play with it. Another way is through this [SO thread](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) — Usman Waheed, Jan 08 '22 at 19:11
The scrollbar appears when you hover an input field. Yes, setting (max-)width to 100% fixes it. — Nikita Skrebets, Jan 08 '22 at 19:16

score 0 · Answer 1 · answered Jan 08 '22 at 19:49

I have 4K monitor and see the scrollbar. Putting in CSS table {max-width: 100%;} doesn't work. However, based on the suggestions above, this code worked:

    html {
        overflow: scroll;
        overflow-x: hidden;
    }
    ::-webkit-scrollbar {
        background: transparent;  /* Optional: just make scrollbar invisible */
    }
    /* Optional: show position indicator in red */
    ::-webkit-scrollbar-thumb {
        background: #a3a6a3;
    }

Table showing scrollbar at the bottom, when it shouldn't be there

1 Answers1