[Resolved] bottom margin changes div overflow-x auto

Home Forums Support [Resolved] bottom margin changes div overflow-x auto

Home Forums Support bottom margin changes div overflow-x auto

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1554584
    cigilovic

    Hello there,

    Just a quick question.

    I use a lot of tables on my pages to provide a comparative overview. And since sometimes there is a lot to show, I use div overflow-x auto and add my table code inside so when the screen is not wide enough there’s this horizontal bar appears at the bottom of the table.

    What I have noticed is that, when I have too many columns which cause this horizontal bar to appear on my laptop screen, the following text after div gets very close to the bottom of the bar.

    Whatever I did, it wasn’t working such as adding <br> or <p>, it just looks the same. I pasted my link in the private information section.

    So that page has 3 tables and if you look at where the table ends with this bar, the following text is almost next to it.

    I also checked it with my other similar content pages and I can say it’s about this bar being there because of too many columns.

    But if it has just right amount (the 2nd link I pasted), there’s no problem. Unless you zoomed out then the bar appears and bottom following text comes very close that bar.

    I have been searching for a solution but can not find it.

    Is there any CSS code that I can apply?

    Many thanks,

    Kind regards

    Osman

    https://cigilovic.com

    #1555112
    David
    Staff
    Customer Support

    Hi there,

    use this CSS:

    .overflow-table {
        overflow-x: auto; 
    }
    .overflow-table+* {
        margin-top: 1em;
    }

    Then edit your HTML for your overflow DIV and remove the inline style and give it a class of overflow-table ie.

    <div class="overflow-table">
    ...
    </div>

    This will add a 1em top margin to the element that comes after that DIV.

    #1555409
    cigilovic

    Hi David,

    Excellent!! Thanks a million!!!

    https://cigilovic.com

    #1556117
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.