Ben Philipp February 2016

Unnecessary vertical Scrollbar in Chrome

Using the Joomla extension JCE Mediabox, I am displaying dynamic content in a lightbox. I have the height set to auto, which works all in all, but on Chrome (and reportedly on Safari), I am getting a scrollbar, even when the container is large enough:

Live site: http://www.drumcafe.de/team/musiker -> Click on one of the musicians with orange name

(I can't simply copy code over to JsFiddle, I'd have to include the whole plugin)

  • Height of the container is set to auto / CSS
  • Height of the parent is set by the extension / JS
  • Pixel height as reported by Chrome is identical for container and content (both integers)
  • There are no other elements in the container
  • The content is not placed absolutely or with an offset, nor is there a border
  • The container is set to overflow-y: auto;, as it has to be for more content on smaller screens

Where does the scrollbar come from? (And how do I get rid of it?)

Bear in mind I need the overflow: auto

EDIT: Well, you asked for relevant code, however, I'm afraid it might not do much good on its own without the working site around it. Here it is:

HTML:

<div id="jcemediabox-popup-body" style="display: block; top: 0px; height: 889px; width: 1573px;">
    <div id="jcemediabox-popup-container" style="display: block;">
        <div id="jcemediabox-popup-loader" style="display: none;"/>
        <div id="jcemediabox-popup-content" style="display: block; width: 1573px; height: 889px; opacity: 1;">
            <div id="jcemediabox-popup-ajax" style="display: block;"> <!-- this is where the scrollbar occurs -->
                <div id="overall"&        

Answers


Yahel February 2016

You will need to override JCE Mediabox style, the problem is in #jcemediabox-popup-ajax has overflow auto. If you change this class in your css file to:

#jcemediabox-popup-ajax{
overflow: hidden !important;
}

Post Status

Asked in February 2016
Viewed 3,547 times
Voted 5
Answered 1 times

Search




Leave an answer