Actual fullheight for heros #1949

dergoegge · 2018-06-18T13:41:15Z

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.

The text was updated successfully, but these errors were encountered:

jimblue · 2018-06-20T01:20:51Z

Hi @dergoegge,

Here is my hack for this issue:

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

dergoegge · 2018-06-20T12:03:27Z

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.

jgthms · 2018-06-20T13:43:30Z

This could be added as a modifier class.

jimblue · 2018-06-20T16:18:14Z

@jgthms that could be nice :)

emkajeej · 2018-06-22T12:12:16Z

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});
}

jimblue · 2018-06-22T16:22:31Z

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

emkajeej · 2018-06-25T07:58:23Z

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.

frederikhors · 2018-07-31T19:41:11Z

Can we have this (#1949 (comment)) code merged, @jgthms?

tetreault · 2018-10-04T12:26:10Z

+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.

jgthms · 2018-10-04T18:32:55Z

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: #1949 (comment)

dergoegge · 2018-10-04T21:10:11Z

@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!

jgthms · 2018-10-04T22:57:04Z

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

emkajeej · 2018-10-08T10:06:32Z

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).

claide · 2019-08-30T06:05:26Z

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.

i-defranca · 2019-12-02T22:41:15Z

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?

claide · 2019-12-03T09:07:11Z

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">

ompande · 2020-07-18T15:16:09Z

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.

Thanks! It worked.

dergoegge mentioned this issue Jun 20, 2018

Add is-fullheight-with-navbar class for heros #1954

Merged

jgthms closed this as completed in #1954 Oct 7, 2018

snyk-bot mentioned this issue Aug 13, 2019

[Snyk] Upgrade bulma from 0.6.2 to 0.7.5 devopsred/gaia#6

Open

snyk-bot mentioned this issue Feb 20, 2020

[Snyk] Upgrade bulma from 0.7.2 to 0.8.0 tghelere/valorize-vidas#6

Merged

snyk-bot mentioned this issue Apr 5, 2020

[Snyk] Upgrade bulma from 0.5.1 to 0.8.0 anikets43/angular-ngrx-socket-frontend#4

Open

snyk-bot mentioned this issue Apr 15, 2020

[Snyk] Upgrade bulma from 0.7.2 to 0.8.1 mc-ireiser/heroes-vue-node-api#5

Open

snyk-bot mentioned this issue Apr 22, 2020

[Snyk] Upgrade bulma from 0.6.1 to 0.8.1 jwlh/WDI_GROUP_PROJECT#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Actual fullheight for heros #1949

Actual fullheight for heros #1949

dergoegge commented Jun 18, 2018

jimblue commented Jun 20, 2018 •

edited

Loading

dergoegge commented Jun 20, 2018 •

edited

Loading

jgthms commented Jun 20, 2018

jimblue commented Jun 20, 2018

emkajeej commented Jun 22, 2018

jimblue commented Jun 22, 2018 •

edited

Loading

emkajeej commented Jun 25, 2018 •

edited

Loading

frederikhors commented Jul 31, 2018

tetreault commented Oct 4, 2018 •

edited

Loading

jgthms commented Oct 4, 2018

dergoegge commented Oct 4, 2018

jgthms commented Oct 4, 2018

emkajeej commented Oct 8, 2018

claide commented Aug 30, 2019

i-defranca commented Dec 2, 2019

claide commented Dec 3, 2019

ompande commented Jul 18, 2020

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

Actual fullheight for heros #1949

Actual fullheight for heros #1949

Comments

dergoegge commented Jun 18, 2018

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

jimblue commented Jun 20, 2018 • edited Loading

dergoegge commented Jun 20, 2018 • edited Loading

jgthms commented Jun 20, 2018

jimblue commented Jun 20, 2018

emkajeej commented Jun 22, 2018

jimblue commented Jun 22, 2018 • edited Loading

emkajeej commented Jun 25, 2018 • edited Loading

frederikhors commented Jul 31, 2018

tetreault commented Oct 4, 2018 • edited Loading

jgthms commented Oct 4, 2018

dergoegge commented Oct 4, 2018

jgthms commented Oct 4, 2018

emkajeej commented Oct 8, 2018

claide commented Aug 30, 2019

i-defranca commented Dec 2, 2019

claide commented Dec 3, 2019

ompande commented Jul 18, 2020

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

jimblue commented Jun 20, 2018 •

edited

Loading

dergoegge commented Jun 20, 2018 •

edited

Loading

jimblue commented Jun 22, 2018 •

edited

Loading

emkajeej commented Jun 25, 2018 •

edited

Loading

tetreault commented Oct 4, 2018 •

edited

Loading