Bulma: Height 'auto' on html audio tag breaks height of tag

Created on 20 Aug 2018  路  6Comments  路  Source: jgthms/bulma

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.7.1]
My browser is: Chrome, Safari

Description

In the minireset.sass file, the audio tag gets a 'height: auto;'. Because of this, the height of audio tag is set to 0 and the audio tag cannot be properly aligned inside an other element.

This has already mentoined in an older issue (https://github.com/jgthms/bulma/issues/819), but it's still not fixed.

Steps to Reproduce

  1. Add an audio element inside a bulma content element.

Expected behavior

The audio element should have the height assigned by default (user agent stylesheet).

Actual behavior

The audio element has a height of 0px.

pinned

Most helpful comment

I don't think this made it into 0.7.5. minireset.sass is still setting height: auto; for iframes.

https://github.com/jgthms/bulma/blob/d2c9e60d35c91ff8863f4324d86845d803340c68/sass/base/minireset.sass#L60-L67

Any chance for a small point release to address this?

All 6 comments

I confirm this is still problem in v0.7.1 in chrome (btw it works okay in firefox).

Steps to reproduce:
Just place audio control inside sample media component/

Same thing happens with iframes from Google Hire. The height: auto in minireset.sass makes it collapse and it's hardly visible.

Is there a solution to this, the iframe issue is really causing me problems. Disabling the auto in chrome developer tools shows that it works perfectly after. Also manually editing the css generated.

I am also experiencing this. I discovered this when creating a WordPress theme and unit testing against instagram embeds.

Will fix this in the next release. Sorry about that.

I don't think this made it into 0.7.5. minireset.sass is still setting height: auto; for iframes.

https://github.com/jgthms/bulma/blob/d2c9e60d35c91ff8863f4324d86845d803340c68/sass/base/minireset.sass#L60-L67

Any chance for a small point release to address this?

Was this page helpful?
0 / 5 - 0 ratings