1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: How to make a full-width navbar search input

Vicko Novianto free asked 6 years ago

I want to make a full-width navbar search input. The search input will be on the right of the navbar brand, and on the left of the login and register button(which is located on upper right corner). How to accomplish this? Thank you.

Dawid Adach pro answered 6 years ago

Dear Vicko, you just have to change width form and input to 100%. I have added inline styles to show example but of course, you should change attributes by adding and styling new class. 
<!--Navbar-->

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

 

<!-- Navbar brand -->

<logo><a class="navbar-brand" href="#">Navbar</a></logo>

<!-- Collapsible content -->

<links>

<!-- Links -->

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

<li class="nav-item active">

<a class="nav-link waves-light"mdbRippleRadius>Home<spanclass="sr-only">(current)</span></a>

</li>

<li class="nav-item">

<a class="nav-link waves-light"mdbRippleRadius>Features</a>

</li>

<li class="nav-item">

<a class="nav-link waves-light"mdbRippleRadius>Pricing</a>

</li>

</ul>

<!-- Links -->

<!-- Search form -->

<form class="form-inline waves-light"style="width: 100%;"mdbRippleRadius>

<input class="form-control mr-sm-2"style="width: 100%;"type="text"placeholder="Search">

</form>

</links>

<!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Vicko Novianto free commented 6 years ago

Thank you for your answer, but why on the button that is located on the right side of the search input, the icon and the text is separated by a newline? link for image: https://imgur.com/atEdiLD

Dawid Adach pro commented 6 years ago

That's difficult to tell without the source code. Please analyse code using inspector (i.e. chrome console) that will help you sort it out.

Vicko Novianto free commented 6 years ago

<!--Navbar--> <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark blue"> <!-- Navbar brand --> <logo> <a class="navbar-brand" href="/index.html"> <img src="assets/img/marketplace-logo.png" height="35" alt=""> </a> </logo> <!-- Collapsible content --> <links> <form [formGroup]="searchForm" class="form-inline waves-light mdbRippleRadius mr-auto" style="width: 100%;" novalidate> <!-- <div class="form-group" id="search"> --> <!-- <div *ngIf="!isAdmin" class="input-group" id="header"> --> <input #searchBox type="text" class="form-control mr-sm-2" style="width: 100%;" placeholder="Search" id="searchBox" (keyup.enter)="enterSearch(searchBox.value)"> <!-- </div> --> <!-- </div> --> </form> <!-- Links --> <ul class="navbar-nav ml-auto"> <li *ngIf="!isLoggedIn" class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius href="login"> <i class="fa fa-sign-in"></i> <span class="clearfix d-none d-sm-inline-block">Login</span> </a> </li> <li *ngIf="!isLoggedIn" class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius href="register"><i class="fa fa-user"></i>Register</a> </li> <li *ngIf="isLoggedIn && !isAdmin" class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius href="cart"><i class="fa fa-shopping-cart"></i>Pricing</a> </li> <!-- Dropdown --> <li *ngIf="isLoggedIn && authenticatedUser.username" class="nav-item dropdown btn-group" dropdown> <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-effect" mdbRippleRadius> Basic dropdown<span class="caret"></span></a> <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu"> <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a> <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a> <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a> <div class="divider dropdown-divider"></div> <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a> </div> </li> </ul> <!-- Links --> <!-- Search form --> <!-- <form class="form-inline waves-light" mdbRippleRadius> <input class="form-control mr-sm-2" type="text" placeholder="Search"> </form> -->   </links> <!-- Collapsible content --> </mdb-navbar> <!--/.Navbar-->

Jakub Strebeyko staff commented 6 years ago

Dear Vicko, Have you tried inspecting the elements? Developer tools are usually the way to detect issues in the CSS styling of elements. Regards, Kuba
Write
Create snippet
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
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Vicko Novianto
0Support score
2Questions 0Answers 0Snippets