Topic: Nav buttons not behaving as expected in fixed footer

AJEsler2019 priority asked 4 years ago


*Expected behavior*I expected buttons in a fixed footer navbar to be responsive (auto resizing whilst remaining on the same line) and full screen width in Angular 8 /MDB 4 as screen width changes.*Actual behavior*As screen narrows, navbar will stack, taking up too much screen space. This contrasts with JQuery Mobile from which I am converting where buttons resize narrower staying on one line down to broswer in Developer mode with iPhone X in portrait mode.*Resources (screenshots, code snippets etc.)*My Jquery Mobile css is "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" and navbar code is as follows:

<!-- Display the navbar-->
<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li> <a href="./home.php" class="ui-btn ui-corner-all ui-shadow ui-btn-active ui-state-persist">Home</a></li>
            <li><a href="./games.php" class="ui-btn ui-corner-all ui-shadow”>Games</a></li>
            <li><a href="./teams.php" class="ui-btn ui-corner-all ui-shadow">Teams</a></li>
            <li><a href="./venues.php" class="ui-btn ui-corner-all ui-shadow">Venues</a></li>
            <li><a href="./results.php" class="ui-btn ui-corner-all ui-shadow">Results</a></li>
        </ul>
    </div>

My Angular 8 MD Bootstrap 4 css is "css/bootstrap.min.css" and "css/mdb.min.css" and navbar code is as follows:

<mdb-navbar SideClass="navbar navbar-expand-xl navbar-dark grey fixed-bottom">
 <!-- Links -->
 <ul class="navbar-nav mr-auto container-fluid text-center">
        <li class="nav-item active">
            <a class="nav-link waves-light" mdbWavesEffect>Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link waves-light" mdbWavesEffect>Games</a>
        </li>
        <li class="nav-item">
            <a class="nav-link waves-light" mdbWavesEffect>Teams</a>
        </li>
        <li class="nav-item">
            <a class="nav-link waves-light" mdbWavesEffect>Venues</a>
        </li>
        <li class="nav-item">
            <a class="nav-link waves-light" mdbWavesEffect>Results</a>
        </li>
</ul>

Bartosz Termena staff commented 4 years ago

@AJEsler2019

You want exactly the same effect as in JQuery Mobile css?

Best, Bartosz.


AJEsler2019 priority commented 4 years ago

Same behaviour, I am ok if the look of the buttons changes. I want the 5 nav buttons to auto resize (width) along the bottom of the screen as the screen width changes and to never stack on top of each other as the screen width gets narrower (eg to mobile in portrait mode).


Bartosz Termena staff answered 4 years ago


Dear @AJEsler2019

Try to add this code to your styles.scss:

.navbar-nav {
  flex-direction: row;
  justify-content: center;
}

Best, Bartosz.


AJEsler2019 priority answered 4 years ago


Thanks. I solved it with this: In my scss file, I added

.navbar-nav {
justify-content: space-between;
flex-flow: row nowrap;

}

And in the footer html file I added "nav-pills nav-justified" to the list of buttons per below:

<ul class="navbar-nav container-fluid text-center **nav-pills nav-justified**">


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes