bulma icon indicating copy to clipboard operation
bulma copied to clipboard

Is Bulma's navbar compatible with a table created using CSS grid?

Open peterlondon1 opened this issue 1 year ago • 3 comments

Should I be able to use Bulma's navbar on a page that also contains a table created using css grid?

I'm using this example table that uses css grid: https://codepen.io/neoky/pen/mGpaKN

It works perfectly - the header stays in place when the table scrolls up and down - until I add a Bulma navbar (the standard Bulma example at https://bulma.io/documentation/components/navbar/ )

Once I add the Bulma's navbar the table header initially stays in place, but then moves or gets hidden by the Bulma navbar.

peterlondon1 avatar Dec 26 '23 12:12 peterlondon1

@peterlondon1

Did you check for a class name overlap?

n614cd avatar Feb 14 '24 21:02 n614cd

While this is an older post and the syntax isn't Bulma 1.0's grid syntax

The following css would need to be updated:

.grid-header {
  background-color: lightgray;
  position: sticky;
  top: 0;
  z-index: 1;
}

You can change it to top: 3.25rem; (for example) or whatever the desired fixed navbar-height is (if spaced navbar its height is a little longer).

digitigradeit avatar Mar 24 '24 14:03 digitigradeit

thanks @digitigradeit , will give that a try

peterlondon1 avatar Apr 16 '24 09:04 peterlondon1