Overflow on media causes scroll bar

[darrenmothersele]

This is about Bulma (master branch)

Overview of the problem

• I'm using Bulma master branch
• Chromium on Linux
• Sass

Description

Scrollbar appears on media item

Steps to Reproduce

            <div class="card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4">{{ user.name }}</p>
                            <p class="subtitle is-6">@{{ user.username }}</p>
                        </div>
                    </div>
                </div>
            </div>

Expected behavior

No scrollbar to be visible

Actual behavior

f17975d

This is because of the overflow: auto; property from the .media-content class. I've checked it on Windows in Chrome browser.

[glococo]

Same happend to me. Please, remove overflow or replace auto -> hidden

[turbopixel]

Same here

[ErikSchierboom]

I have the same issue.

[neetso]

I have the same issue with media-content. I want to add a list or group of buttons inside a media-content div.

[ekrister]

This is still a problem with Bulma 0.9.1. You can also see it on the official documentation page of the card component.

[svdHero]

Same problem here. Please re-open.

[kerams]

This appears to be the issue.

bulma/sass/components/media.sass

Lines 57 to 59 in 49b0100

	+mobile
	.media-content
	overflow-x: auto

You can override it in sass after importing Bulma.

[SnowpawStudios]

This is still an issue in 2022 using bulma v0.9.4 in Chrome, Edge, and Firefox (tested using the sample code for making cards on the Bulma website).

Note that the scrollbars only appear when you increase the zoom and narrow the width of the window. For example in Chrome, the scrollbars appear at a zoom of 150% and window width of about 650px.