Tabs and CSS grid

  • Resolved Eric Lindesvard

    (@eric-lindesvard)


    3 years, 3 months ago

    I have used Tabby RT for many years now. Works great, thank you! Now I have upgraded my old float CSS framework to CSS grid. Works fine, but the only thing that does not work, is the tabby sections on mobile.

    When the tab is collapsed, everything is allright. Also on page load, all is fine. When the tab expands, after pressning a tab, it’s content width sticks out of the grid. Not much, but enough to cut off content.

    The container has overflow hidden, so the content to the right of the container is not visible. I do not want a scroll-x function. Content should stay in it’s container.

    Anyone experienced this? I have a hard time figuring this out. A fixed width on the container does not seem to do the trick. There are some javascript going on here, but it shouldn’t have to demand a wider space.

    Grateful for your thoughts.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author cubecolour

    (@numeeja)

    I don’t see any tabs created with tabby responsive tabs on the page you have linked.

    Thread Starter Eric Lindesvard

    (@eric-lindesvard)

    Look closer. There are two sections on the page using your software. The anchor link I’ve posted directs you to one of them.

    Plugin Author cubecolour

    (@numeeja)

    It doesn’t look like the issue is specific to the tabs, but the content inside the tab is not resizing to fit the available space. You can check this by seeing how the content of the tab behaves if you put it on a test page by itself.

    Thread Starter Eric Lindesvard

    (@eric-lindesvard)

    Hm, p, ul or li tags (or the div in the upper section) should not affect the width. They just take the space they are assigned to. Don’t you think?

    Plugin Author cubecolour

    (@numeeja)

    The issue does not appear for me when using firefox or Chrome on MacOS, but I can now see it when using Safari.

    There is probably an explanation for this, but I cannot see why it is occurring, however you might be able to formulate a ‘quick & dirty’ workaround by adding a CSS rule using the following as a starting point:

        article.page .responsive-tabs .responsive-tabs__panel {
        max-width: 95%;
    }
    Thread Starter Eric Lindesvard

    (@eric-lindesvard)

    Yes, thank you, that is a workaround. I’ll go for that for now. There might be some kind of bug that has to do with the javascript part. Will you look into it later?

    Plugin Author cubecolour

    (@numeeja)

    I have not been able to reproduce the issue on my own sites, so I am afraid that would be beyond the scope of the free support I can provide.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Tabs and CSS grid’ is closed to new replies.