Code Monkey home page Code Monkey logo

Comments (61)

jgillich avatar jgillich commented on May 12, 2024 179

Stop with the +1, they don't do anything. Use reactions.

from bulma.

richeklein avatar richeklein commented on May 12, 2024 59

@guilhermedecampo solution works well. Just use a wrapper div around the content block that is just above the footer.

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
  
#wrapper {
  flex: 1;
}

from bulma.

edg-l avatar edg-l commented on May 12, 2024 52 
.fix-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    overflow:hidden;
}

from bulma.

obfusticatedcode avatar obfusticatedcode commented on May 12, 2024 33

I'm using Bulma and echo what other people have mentioned that a sticky footer class="" would be great. I've used, this simple solution, https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ which works great.

from bulma.

JamesTheHacker avatar JamesTheHacker commented on May 12, 2024 22

I feel like a right plank. It's been in the documentation all along .is-fixed-bottom.

https://bulma.io/documentation/components/navbar/#fixed-navbar

🤦‍♂️

I checked out what is-fixed-bottom and it does exactly the following except I've modified it for sticky footers.

footer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 30;
}

K.I.S.S 😉

from bulma.

ErikThiart avatar ErikThiart commented on May 12, 2024 18

Sticky Footer should be the default for Bulma, I cannot think of a reason why you would not want this behavior.

from bulma.

guilhermedecampo avatar guilhermedecampo commented on May 12, 2024 17

@joaoeffting try out...

layout.jsx

<div className={styles.site}>
  <Header/>
  <main className={styles.site__content}>
    // my-content
  </main>
  <Footer />
</div>

layout.styl

.site
  display flex
  min-height 100vh
  flex-direction column

.site__content
  flex 1

from bulma.

nullbio avatar nullbio commented on May 12, 2024 16

I too am seeking the holy sticky footer.

from bulma.

jgehrcke avatar jgehrcke commented on May 12, 2024 16 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Footer at the bottom / sticky footer</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
    />
    <style type="text/css" media="screen">
      body {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      #wrapper {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <section class="hero is-medium is-primary is-bold">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">
              The footer is at the bottom. Seriously. 🦠
            </h1>
            <h2 class="subtitle">
              By <a href="https://gehrcke.de">Jan-Philip Gehrcke</a>
            </h2>
          </div>
        </div>
      </section>
    </div>
    <footer class="footer">
      <div class="content has-text-centered">
        <p>
          I am down here.
        </p>
      </div>
    </footer>
  </body>
</html>

A minimal working example, based on one of the first comments above: #47 (comment)

Demo: https://gehrcke.de/files/perm/github/bulma-sticky-footer.html

from bulma.

diomed avatar diomed commented on May 12, 2024 15

@jgthms why is this, despite so much interest for it, closed and not implemented?

from bulma.

ibrahimyu avatar ibrahimyu commented on May 12, 2024 14

+1 this is a must have!

from bulma.

VizuaaLOG avatar VizuaaLOG commented on May 12, 2024 14

There is a pull request to add this in at #366

from bulma.

benbrittain avatar benbrittain commented on May 12, 2024 10

A Sticky footer by default would still be greatly useful

from bulma.

pskarlas avatar pskarlas commented on May 12, 2024 10

This solution serves me more than well...no extra wrappers involved.

from bulma.

Warix3 avatar Warix3 commented on May 12, 2024 10

@JamesTheHacker It's not the same as sticky footer described in the issue. Take a look here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Sticky footer stays always on bottom of the web page and not on bottom of the screen, unless there is not enough content, then it's both on bottom of the screen and on bottom of the page. And of course when you scroll down to the bottom. Unlike fixed navbar which is always on bottom of the screen regardless of content and scrolling.

from bulma.

pergsify avatar pergsify commented on May 12, 2024 10

I'm using Vue and thanks much @jgehrcke this solves my requirement with simple tweaks.

<template>
	<div class="page-wrapper">
		<div class="content-wrapper">
			
		</div>
		<footer class="footer">
		</footer>
	</div>
</template>

<style scoped>
.page-wrapper {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.content-wrapper {
	flex: 1;
}
</style>

from bulma.

joaopgrassi avatar joaopgrassi commented on May 12, 2024 9

I've been banging my head trying to implement the solution proposed by OP in an Angular CLI app for a couple of hours. So, I followed the approach there and added the class in the body and in a wrapper div. In my case, around router-outlet where my content is loaded:

index.html

 <!-- omitted header for brevity -->
<body class="Site">
  <app-root></app-root>
</body>
</html>

app.component.html

<div class="Site-content">
    <router-outlet></router-outlet>
</div>
<footer class="footer">
    Footer here
</footer>

And it doesn't work! Tried everything. Almost giving up, I tried one last thing: I added the class to the app-root instead and it worked!

 <!-- omitted header for brevity -->
<body>
  <app-root class="Site"></app-root>
</body>
</html>

Not sure why it was not working on body... but my best guess is that the Site and Site-content classes have to be direct siblings? (not even sure if this is the correct term). When I had the Site class in the body, the<app-root> was in between the wrapper div that contained the Site-content. Might be obvious or a silly mistake on my side, but I thought it would help others putting this here.

from bulma.

lobanovkirill avatar lobanovkirill commented on May 12, 2024 8

Please add sticky class for footer!

from bulma.

dikaio avatar dikaio commented on May 12, 2024 8

@jgillich. Yes, that just made an enormous difference...

from bulma.

spridev avatar spridev commented on May 12, 2024 8

I also use a fixed navbar, but instead of hardcoding the navbar-height (like @sergiubologa did), I used an available bulma variable:

body {
  display: flex;
  min-height: calc(100vh - #{$navbar-height});
  flex-direction: column;
}

#wrapper {
  flex: 1 0 auto;
}

I also replaced flex: 1 by flex: 1 0 auto to make it work on IE11.

from bulma.

rmuchall avatar rmuchall commented on May 12, 2024 7

@jgthms
Would it be possible to reopen this issue? :)

Thanks!

from bulma.

kimbaudi avatar kimbaudi commented on May 12, 2024 7

I want my sticky footer to work whether or not my navbar is fixed (to the top or bottom). So I ended up combining the solutions provided by @guilhermedecampo and @ispri.

body {
  &.default {
    display: flex;
    // use this if navbar is NOT fixed (default)
    min-height: 100vh;
    flex-direction: column;
  }
  &.fixed {
    display: flex;
    // use this if navbar is fixed
    min-height: calc(100vh - #{$navbar-height});
    flex-direction: column;
  }
}

Now I add <body class="default"> when I'm using a regular navbar and I add <body class="fixed"> when I'm using a fixed navbar. Now I get sticky footer when my navbar is fixed and also when its not! 😄

from bulma.

collyrooms avatar collyrooms commented on May 12, 2024 7

come on bulma

from bulma.

Warix3 avatar Warix3 commented on May 12, 2024 6

Bulma would've been better with this as a default. I've used https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and it works fine. Sure it would add some extra classes and elements that need to be used, but at least give us an option to do that. It doesn't have to be the default but it would definitely improve bulma if it becomes an option.

from bulma.

boweeb avatar boweeb commented on May 12, 2024 6

@dcolley

Sorry but that is not "what the OP wanted", as demonstrated by the OP's link and multiple comments in this thread (particularly in response to this comment).

What is desired is for the footer to be stuck to the bottom of the page, not the screen/viewport. IOW, if the content is large enough then the footer will not be visible; you'll have to scroll it into view. But if the content is small then instead of having the footer halfway up the page, it would be "stuck" to the bottom.

@jgthms

IMO, I think the main frustration is the lack of response, even though workarounds have been demonstrated. Of course, I would appreciate the DX improved around this but even an answer we wouldn't want to hear would be better than 5 years of silence after consistent cries from the community. The GH issue may be closed but the community has no sense of closure.

For late-comers, I suggest browsing this thread for workarounds. Personally, I find the comment by @jgehrcke the most helpful. Demo here and blogged about here.

from bulma.

jethromayuk avatar jethromayuk commented on May 12, 2024 5

+1

from bulma.

omrico avatar omrico commented on May 12, 2024 5

a footer that stick to the bottom of the screen if there is not enough content, but then continue to move down as your content grows, IE NOT a stuck/pegged to the bottom footer that remains there as you scroll down.

That one ☝️

from bulma.

glosta avatar glosta commented on May 12, 2024 5

@guilhermedecampo solution works well. Just use a wrapper div around the content block that is just above the footer.

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
  
#wrapper {
  flex: 1;
}

To get this to work on IE 11 consider:

.wrap-to-fix-footer {
    flex: 1 0 0;
}

from bulma.

niconisoria avatar niconisoria commented on May 12, 2024 4

Reopen this issue again please!

from bulma.

MrJacz avatar MrJacz commented on May 12, 2024 3

@jgthms Please reopen this issue and reconsider implementation because I've been looking for a working solution for the last 12 hours and Haven't found anything that works as intended... this is something that has a lot of interest and should not be put to the side. even if you make an extension for it, it would be so f***ing helpful you don't understand!

from bulma.

JamesTheHacker avatar JamesTheHacker commented on May 12, 2024 3

Still not implemented?! It's not even hard to implement and so many people have requested their support for this. I start to lose faith in a library when it fails to keep up to conventions and its community.

from bulma.

estysdesu avatar estysdesu commented on May 12, 2024 3

+1

from bulma.

dcolley avatar dcolley commented on May 12, 2024 3

I used https://bulma.io/documentation/components/navbar/#fixed-navbar to get this working without any hacks.

index.html

<!DOCTYPE html>
<html lang="" class="has-navbar-fixed-top has-navbar-fixed-bottom">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> -->
    <link rel="manifest" href="/manifest.json" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
	<div id="app" class="page-wrapper">
		<navbar></navbar>
		<router-view></router-view>
		<footer-info></footer-info>
	</div>
</template>

FooterInfo.vue

<template>
	<nav class="navbar is-dark is-fixed-bottom">
		<a class="navbar-item">
			I am a footer
		</a>
	</nav>
</template>

Now both header and footer are sticky, and float above the page. The page scrolls in behind the footer.
I think this is what the OP wanted.

from bulma.

BenBao93 avatar BenBao93 commented on May 12, 2024 2

+1

The solution mentioned by @obfusticatedcode works flawless but having it built in would be more beautiful

from bulma.

ErikThiart avatar ErikThiart commented on May 12, 2024 2

Just to confirm do you guys want a footer that stick to the bottom of the screen if there is not enough content, but then continue to move down as your content grows, IE NOT a stuck/pegged to the bottom footer that remains there as you scroll down or do you want a fixed footer that is at the bottom of the screen and remains there whilst you scroll down?

from bulma.

shepherdjerred avatar shepherdjerred commented on May 12, 2024 2

Using bulma with react, this solution worked perfectly fine for me without any other work

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

My root component looks like this

ReactDOM.render((
  <Provider store={store}>
    <HashRouter>
      <div className='site'>
        <ReduxNavigation />
        <div className='site-content'>
          <ReduxRouter />
        </div>
        <Footer />
      </div>
    </HashRouter>
  </Provider>
), document.getElementById('root'));

from bulma.

guilhermedecampo avatar guilhermedecampo commented on May 12, 2024 1

Any news on that?

from bulma.

sergiubologa avatar sergiubologa commented on May 12, 2024 1

I use a fixed navbar (.is-fixed-top) so in order to get rid of the unnecessary scrollbar I use the following solution:

body {
  display: flex;
  min-height: calc(100vh - 52px);
  flex-direction: column;
}
  
#wrapper {
  flex: 1;
}

where 52px is the height of the navbar.

from bulma.

hakro avatar hakro commented on May 12, 2024 1

It's quite unfortunate that the footer does not automatically stick to the bottom, or at least that it's not configurable easily.
@jgehrcke's trick did not work for me. While it did get the footer stick to the bottom, it also broke the whole layout, even for my very simple page. I have to resort to hacky custom CSS to fix it.

Any plans on having this natively handled by the framework ?
Cheers!

from bulma.

jgthms avatar jgthms commented on May 12, 2024

Yeah, so this requires a class on the html or body, and an additional container like .main or something. It's a tricky one because it's not a separate component but a collection of things. I might add it though.

from bulma.

joaoeffting avatar joaoeffting commented on May 12, 2024

trying to do the same but not working :c

from bulma.

evertramos avatar evertramos commented on May 12, 2024

yeah.. it would be nice to have a sticky and might a always visible as well. I mean, when you have infinite scroll and still want a fixed footer in your page.

Thanks!

from bulma.

jgillich avatar jgillich commented on May 12, 2024

@jgthms I'm probably missing something, why were this and #366 closed?

from bulma.

toymachiner62 avatar toymachiner62 commented on May 12, 2024

@jgillich @jgthms I'm also wondering why this was closed.

from bulma.

solbreslin avatar solbreslin commented on May 12, 2024

+1

from bulma.

rvalery avatar rvalery commented on May 12, 2024

+1

from bulma.

dikaio avatar dikaio commented on May 12, 2024

+1

from bulma.

schleimschein avatar schleimschein commented on May 12, 2024

+1 Actually I was irritated when I discovered that this feature doesn't exist.
Edit: ... because the rest of Bulma is so well built :)

from bulma.

AllanDaemon avatar AllanDaemon commented on May 12, 2024

I expected the fixed footer the be the default behavior. It seems to me that most people also expected this to be the default one, and the non-fixed one the variation.

And what is more surprising to my experience is that it isn't implemented yet. But things seem to be on the way to be fixed.

from bulma.

mrUlrik avatar mrUlrik commented on May 12, 2024

@sergiubologa This doesn't seem to work across browsers. Are you having that issue?

from bulma.

mlars84 avatar mlars84 commented on May 12, 2024

It's not ideal, but you can also just give your footer a navbar is-fixed-bottom class. It's crazy they wouldn't just have footer is-fixed-bottom, or have is-fixed-bottom be a helper for anything.

from bulma.

omrico avatar omrico commented on May 12, 2024

Has anyone succeeded implementing @neovive solution with Angular 2+?
I know this is a CSS related issue rather then Angular.
Thanks in advance.

from bulma.

markand avatar markand commented on May 12, 2024

I would like to see this as well.

from bulma.

mlars84 avatar mlars84 commented on May 12, 2024

Yep. "a footer that stick to the bottom of the screen if there is not enough content, but then continue to move down as your content grows, IE NOT a stuck/pegged to the bottom footer that remains there as you scroll down"

from bulma.

avatar commented on May 12, 2024

I'm going to also vote on this. It seems that it exists the ability to actually fix this issue. @jgthms if there is something very specific you want help with to get this done let us know as a community we'd all be glad to help.

from bulma.

JamesTheHacker avatar JamesTheHacker commented on May 12, 2024

@Warix3 I see.

from bulma.

Clauber avatar Clauber commented on May 12, 2024

Nothing yet?

from bulma.

cameronb23 avatar cameronb23 commented on May 12, 2024

Would be a great addition for (clearly) many of us. Just hoping the issue gets reopened 👍

from bulma.

kambanwait avatar kambanwait commented on May 12, 2024

Screenshot 2020-10-02 at 00 26 00
I would recommend using CSS Grid for the sticky footer over flex box

Flex box is best used for components within the layout.
CSS Grid is best used for page layouts. Like the header, columns in the main body and the footer

My approach is:

html,
body {
    height: 100%;
}

// whatever <div> you have wrapping around all of your site - I guess you could use <body> here but I'd recommend using a <section> or <div> with the class of:

.grid-container {
  grid-template-rows: 52px 1fr auto; // 52px is height of the header
  grid-template-areas:
  'header'
  'content'
  'footer';
  display: grid;
  height: 100vh;
}

.grid-content {
  grid-area: content;
}

footer {
  grid-area: footer;
}

edit: added screenshot

from bulma.

RichardJECooke avatar RichardJECooke commented on May 12, 2024

Hi, I see this feature is closed, but I can't see where a sticky footer is in the documentation. Can anyone point me to the right page please?

from bulma.

RichardJECooke avatar RichardJECooke commented on May 12, 2024

Also, Bulma's block element seems to break all the workarounds given here unless content is put inside the block

from bulma.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.