Topic: Cannot align search form to the right

davout free asked 4 years ago


Newbie question...

I have a navbar where I want to right align both a search form and a set of nav bar actions. I've tried various things, but can't get the search form to right align next to the actions. Any suggestions?

<!--Navbar-->

<!-- Search form -->
<form class="form-inline waves-light ml-md-auto mr-1" mdbWavesEffect>
  <div class="md-form my-0" style="margin-right: 20px">
    <input class="form-control mr-sm-2" placeholder="Search" type="text" placeholder="Search" aria-label="Search">
    <button class="my-0 waves-light" color="primary" mdbBtn mdbWavesEffect outline="true" size="sm" type="button">Search</button>
  </div>
</form>

<ul class="navbar-nav ml-auto">

  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="user"></mdb-icon> User: [Ian Hayes]<span class="sr-only">(current)</span></a>
  </li>

  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="users"></mdb-icon> Tenant: [Ian Hayes]<span class="sr-only">(current)</span></a>
  </li>

  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="envelope"></mdb-icon> Contact<span class="sr-only">(current)</span></a>
  </li>

  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="question-circle"></mdb-icon> Help<span class="sr-only">(current)</span></a>
  </li>

  <!-- Dropdown -->
  <li class="nav-item dropdown" dropdown>
  <a class="nav-link dropdown-toggle waves-light" dropdownToggle mdbWavesEffect mdbWavesEffect type="button">
    <mdb-icon fas icon="cog"></mdb-icon>
    My account<span class="caret"></span></a>
  <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Preferences</a>
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Account</a>
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>History</a>
    <div class="divider dropdown-divider"></div>
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Log out</a>
  </div>
  </li>

</ul>

<!-- Links -->


Konrad Stępień staff answered 4 years ago


Hi @davout,

Please just use d-flex align-items-end or d-flex align-items-end flex-column classes for your wrapper.

More info about flex you can find on this page.

Best, Konrad.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No