How to make a full-width navbar search input

<!--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>

Vicko Novianto commented 7 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 7 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 commented 7 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 7 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

---