CODEWITHSUNDEEP
csstwitter-bootstrapreactjsfirefoxsass
Bite code
Bite code

Reputation: 597301

<button> unclickable in Firefox but works in chrome

I have the following header:

      <header id="app-header"
              className="fluid-container navbar navbar-default">
          <div>
            <button className={buttonClass}
                    onClick={this.openSideBar}>
              <span className="glyphicon glyphicon-menu-hamburger"></span>
            </button>
          </div>

          <h1>{this.props.title}</h1>
      </header>

It uses the last stable version of react and boostrap.

I style it with some sass:

#app-header

      margin-bottom: 5px
      display: flex
      flex-direction: row
      height: 5rem

      div
        width: 5rem
        margin-right: -5rem  // let the h2 center align on the whole row

        button
          background: transparent
          border: none
          width: 100%
          height: 100%

          &:hover
            background: white

      h1
        height: 100%
        margin: 0
        flex: 2
        text-align: center
        font-size: 2rem
        display: flex
        align-items: center
        justify-content: center

I end up with a header looking like this:

enter image description here

The hamburger menu is clickable under chrome, but not under firefox. If I remove all sass style, the h1 goes on top of the button, but the button gets clickable in firefox.

Upvotes: 0

Views: 328

Answers (2)

Fabian Schultz
Fabian Schultz

Reputation: 18556

margin-right: -5rem on #app-header div is causing this. Try finding an alternative way—seems like Firefox is misinterpreting this and placing the clickable area outside the window.

Upvotes: 3

Chirag Gojaria
Chirag Gojaria

Reputation: 55

write button code like this

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

Upvotes: -1

Related Questions