CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
bnahin
bnahin

Reputation: 816

Bootstrap Dropdown Not Appearing in Firefox

I have a Bootstrap dropdown menu that is custom-styled, however, it is not appearing in the latest version of Firefox. It works perfectly in Chrome, IE, Safari, and Edge. I assume it has something to do with my structure, however I cannot find the culprit.

While studying the DOM changes while clicking on the link, it seems that the elements are not being modified at all (no class changes, etc.).

HTML:

<header id="header">
  <!--<div id="clockbox"></div>-->
  <div class="navbar navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><a href=""><span class="glyphicon glyphicon-home"></span> Home</a></li>
      <li><a href="forums"><i class="fa fa-comment"></i> Forums</a></li>

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">General
                        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="feedback/"><strong>Submit Feedback</strong></a></li>
          <li role="separator" class="divider"></li>
          <li><a href="messages/news">News</a></li>
          <li><a href="messages/NOTAMs">NOTAMS</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="schedule/master">Master Schedule</a></li>
          <li><a href="info/staff/">Staff</a></li>
          <li><a href="info/roster">Roster</a></li>
          <li><a href="info/topten">Top 10</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="info/currentflights">Current Flights</a></li>
          <li><a href="info/movements">Monthly Movements</a></li>
          <li><a href="info/heatmap">Heat Map</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="info/maps">Maps</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pilots
                        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="events/pilot">Pilot Events</a></li>
          <li><a href="info/prefroutes">Preferred Routes</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="https://cert.vatsim.net/fp/file.php">File a Flight Plan <span style="color:gray" class="glyphicon glyphicon-share" aria-hidden="true"></span></a></li>
          <li><a href="http://www.vatsim.net/pilot-resource-centre">VATSIM Pilot Resources <span style="color:gray" class="glyphicon glyphicon-share" aria-hidden="true"></span></a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Controller
                        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>
            <a href="signup/" data-toggle="tooltip" title="Click here if you have chosen ZSE as home ARTCC in VATUSA.">New Controller
                                    Signup</a>
          </li>
          <li><a href="signup/visitor/">Become a Visitor</a></li>
          <li class="nav-header"><a>profile</a></li>
          <li><a href="profile/view">View Profile</a></li>
          <li><a href="profile/edit">Edit Profile</a></li>
          <li><a href="profile/changepassword">Change Password</a></li>

          <li role="separator" class="divider"></li>

          <li class="nav-header"><a>Training Schedule</a></li>
          <li><a href="documents"><strong>Documents</strong></a></li>

          <li><a href="schedule">My Schedule</a></li>
          <li><a href="worksheets">My Worksheets </a></li>

          <li role="separator" class="divider"></li>

          <li class="nav-header"><a>Controlling Hours</a></li>

          <li><a href="controller/monthview">My Month View</a></li>
          <li><a href="controller/totalhours">My Total Hours</a></li>
          <!--<li><a href="controller/endorsements">My Endorsements</a></li>-->
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Events
                        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="events/"><strong>Events Home</strong></a></li>
          <li role="separator" class="divider"></li>
          <li><a href="events/records">Event Records</a></li>
          <!--<li>
                                <a href="events/requestevent" data-toggle="modal"
                                   title="Click here if you have a new idea for an event">Request Event</a>
                            </li>-->
          <li><a href="events/requestservice">Request ATC Coverage</a></li>
          <li><a href="events/help">FAQ
                                <!--page: about events, how selected, how to sign up, and how to delete requests--></a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Admin
                                <span class="caret"></span></strong></a>
        <ul class="dropdown-menu">
          <li><a href="admin/"><strong>Admin Home</strong></a></li>
          <li role="separator" class="divider"></li>
          <li class="nav-header"><a>Mentor/Instructor</a></li>
          <!-- <li><a href="training/scenarios">Training Scenarios</a></li> Future Feature-->
          <li><a href="admin/trainingstatistics">INS/MTR Activity</a></li>
          <li><a href="training/requests">Training Requests</a></li>
          <li role="separator" class="divider"></li>
          <li class="nav-header"><a>ATM/DATM</a></li>
          <li><a href="admin/homepage">News/NOTAMs</a></li>
          <li><a href="admin/signups">New Signup
                                        Requests </a></li>
          <li><a href="admin/loa">New LOA
                                        Requests 
                                            <span class="badge" id="newreqs"></span></a></li>
          <li role="separator" class="divider"></li>
          <li class="nav-header"><a>Configuration</a></li>
          <li><a href="admin/homepage">Homepage</a></li>
          <li><a href="admin/airports">Edit Airports</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="logo"></div>


</header>

CSS:

li > a {
    transition: all 0.4s ease;
}

.dropdown-menu {
    border-radius: 0;
}

.dropdown-menu li a {
    padding: 10px 25px;
    font-size: 12px;
}

.open > .dropdown-menu {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);

}

.open > .dropdown-menu li a {
    color: #000;
}

.dropdown-menu li a {
    color: #fff;
}

.dropdown-menu {
    /* -webkit-transform-origin: top;
     transform-origin: top;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
     -webkit-transform: scale(1, 0);
     display: block;
     */

    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}

.dropup .dropdown-menu {
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
}

.navbar .nav > li > .dropdown-menu:after {

}

.dropup > .dropdown-menu:after {
    border-bottom: 0;
    border-top: 6px solid rgba(39, 45, 51, 0.9);
    top: auto;
    display: inline-block;
    bottom: -6px;
    content: '';
    position: absolute;
    left: 50%;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

The page is located at zseartcc.org/new

Upvotes: 0

Views: 1435

Answers (1)

GeekAb
GeekAb

Reputation: 505

I think issue is with your javascript.

$(document).on('focusin', function (e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

This code set have wrong reference to event. That should be e. Make that change and check once. I think it will work.

Upvotes: 2

Related Questions