Bulma: Actual fullheight for heros

Created on 18 Jun 2018 · 17Comments · Source: jgthms/bulma

This is about Bulma.

It's a bug concerning the is-fullheight class.

It's not a browser bug.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.7.1]
My browser is: Chrome, Opera

I am sure this issue is not a duplicate

Description

A fullheight hero is not fullheight if the navbar is fixed to the top.

Steps to Reproduce

Add has-navbar-fixed-top to the class list of the html attribute.
Set up a page as follows:

<section class='hero is-fullheight'>
    <div class="hero-body">
      <div class="container">
          <h1 class='title'>Title</h1>
      </div>
      </div>
   <div class='hero-footer'>
    <div class="container">
         <p>Not on the screen unless scrolled to</p>
    </div>
   </div>
</section >

Expected behavior

I expected to see the hero-footer on screen.

Actual behavior

The hero-footer will only be visible if scrolled to.

Source

dergoegge

👍4 ❤2

Most helpful comment

wouldn't it be easier to use the body/html class, instead of adding another helper to the hero?
ie

.has-navbar-fixed-top .hero.is-fullheight {
    min-height: calc(100vh - #{$navbar-height});
}

emkajeej on 22 Jun 2018

👍3 ❤2 🎉2 😄2

All 17 comments

Hi @dergoegge,

Here is my hack for this issue:

.hero.is-fullheight.has-fixed-navbar {
    min-height: calc(100vh - #{$navbar-height});
}

jimblue on 20 Jun 2018

👍4

Not sure if this is actually a bug or intended behaviour...
But @jimblue 's hack works for me!

I will close the issue after some time if nobody else has something to say.

dergoegge on 20 Jun 2018

This could be added as a modifier class.

jgthms on 20 Jun 2018

👍1

@jgthms that could be nice :)

jimblue on 20 Jun 2018

wouldn't it be easier to use the body/html class, instead of adding another helper to the hero?
ie

.has-navbar-fixed-top .hero.is-fullheight {
    min-height: calc(100vh - #{$navbar-height});
}

emkajeej on 22 Jun 2018

👍3 ❤2 🎉2 😄2

@emkajeej I think a modifier is better here. There's probably particularly cases where peoples would like to have the choice.

jimblue on 22 Jun 2018

👍1

I'm inclined to disagree. The docs state that a .is-fullheight modifier makes the hero as large as the viewport, so it's only fair that the user expects a component with the exact height of the viewport, not "the height plus a seemingly arbitrary amount of pixels".
Secondly, the .has-fixed-navbar naming implies that the navbar is part of the hero, while in reailty it's part of the body.

The same logic is also already being applied in navbar.sass:238.

In the edge case that the user actually wants the .is-fullheight hero to be slightly larger than the actual viewport the .has-navbar-fixed-top .hero.is-fullheight is easily overridden.

emkajeej on 25 Jun 2018

👍7

Can we have this (https://github.com/jgthms/bulma/issues/1949#issuecomment-399421960) code merged, @jgthms?

frederikhors on 31 Jul 2018

👍3 ❤2 🎉2

+1 on this. fairly minimal page w/o any hero-head just a hero-body that has a centered div with minimal contents (height of only like 250px) and a hero-foot with 2 p tags in it (60px height) and I need to scroll to see the footer. expectation is that there's no scroll.

tetreault on 4 Oct 2018

The docs state that a .is-fullheight modifier makes the hero as large as the viewport, so it's only fair that the user expects a component with the exact height of the viewport, not "the height plus a seemingly arbitrary amount of pixels".

That's not true. The fullheight hero is basically never higher than the viewport. The height is set with min-height: 100vh. I'm using min-height and not height because I don't want the content to be clipped if it's higher than the viewport. But that's almost never the case, and not the case here.

Example: https://codepen.io/jgthms/pen/ReRPpe

The hero is fullheight here. You can't see the footer because the has-navbar-fixed-top class on the <html> adds padding at the top. But you can see that the hero _is_ fullheight (I made the navbar transparent). So:

has-navbar-fixed-top is doing what's it's supposed to
is-fullheight is doing what's it's supposed to

It would be disingenuous to make the is-fullheight class make the hero _less_ than fullheight.

The solution is with an additional modifier for the hero, something like the one stated here: https://github.com/jgthms/bulma/issues/1949#issuecomment-398594152

jgthms on 4 Oct 2018

@jgthms The PR #1954 i opened does not change the is-fullheight class. It adds another modifier to the hero like you proposed early on. Maybe take a look and merge or give me a few pointers as to what more needs to be done so we can get this issue resolved!

dergoegge on 4 Oct 2018

Thanks @dergoegge that's pretty good actually! Will have a proper look later.

jgthms on 5 Oct 2018

👍2

The solution is with an additional modifier for the hero, something like the one stated here: #1949 (comment)

In the above solution the hero height is also being modified to be less than the viewport.
i'm proposing exactly that, but with the modifier being on the body rather than the hero for the reasons stated in the second half of my comment (ie semantically and for consistency).

emkajeej on 8 Oct 2018

Encountered a weird behavior using is-fullheight-with-navbar to the hero element.
Everything works but when adding the same hero to another page, the hero element is residing behind the navbar fixed top.

claide on 30 Aug 2019

Encountered a weird behavior using is-fullheight-with-navbar to the hero element.
Everything works but when adding the same hero to another page, the hero element is residing behind the navbar fixed top.

@claide I'm having this problem too. Did you find a solution?

i-defranca on 2 Dec 2019

Encountered a weird behavior using is-fullheight-with-navbar to the hero element.
Everything works but when adding the same hero to another page, the hero element is residing behind the navbar fixed top.

@claide I'm having this problem too. Did you find a solution?

Hmm I forgot about this, but try to add class has-navbar-fixed-top to your html tag like below

<html class="has-navbar-fixed-top">

claide on 3 Dec 2019

This is about Bulma.

It's a bug concerning the is-fullheight class.

It's not a browser bug.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.7.1]
My browser is: Chrome, Opera

I am sure this issue is not a duplicate

Description

A fullheight hero is not fullheight if the navbar is fixed to the top.

Steps to Reproduce

Add has-navbar-fixed-top to the class list of the html attribute.

Set up a page as follows:
<section class='hero is-fullheight'>
    <div class="hero-body">
    <div class="container">
        <h1 class='title'>Title</h1>
    </div>
      </div>
   <div class='hero-footer'>
  <div class="container">
       <p>Not on the screen unless scrolled to</p>
  </div>
   </div>
</section >
Expected behavior

I expected to see the hero-footer on screen.

Actual behavior

The hero-footer will only be visible if scrolled to.