CODEWITHSUNDEEP
cssmaterialize
TajC
TajC

Reputation: 45

Inline Search Bar Materialize CSS

How can I have both my search box and badge horizontally in single row in the navbar ? I'm using materialize CSS

<nav class="orange" role="navigation">
            <div class="nav-wrapper container">
            <a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
                <ul class="right">
                    <a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
                    <form class="col s12">
                        <div class="inline">
                            <div class="input-field col s6">
                                <input id="search" type="text" class="validate" placeholder="Search...">
                            </div>
                            <div class="input-field col s6">
                                <button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
                            </div>
                        </div>
                    </form>
                </ul>
            </div>
        </nav>

Upvotes: 1

Views: 1378

Answers (2)

Melvin Witte
Melvin Witte

Reputation: 169

If you upload your problem into a CodePen, it is easier for people to try out your code, adapt it and help you. It doesn't take long, I added your stuff in around 5 minutes, with taking care of scripts and links, but it will be a great help for people who want to help you solve your problem.

So, some general stuff about the materialize grid:

  • To make text fields inline, you need to add the inline class to the input-field-div (can be found in the examples of Materialize Text Inputs). Adding an enclosing div does not work
  • Columns only work with an enclosing row, which the <form> does not have. This is also part of your problem, more down below
  • The grid is based on 12 columns. So the form with col s12 will take up the complete row
  • If you want to split the form 50:50, you need to put the form in their own container. If not, the col will assume, that it is referencing the container around the whole navbar (more about Grids in Materialize
  • An unordered list (ul-tags) should always have list-items (li-tags) for each individual part of the unordered list

So, regarding your problem: Add list items to your unordered list, one for the badge, one for the search form. Then, you also need to add a div with the row-class to your form, as well as a container for the elements to get back into a local context. Add the inline-class to the right element, and you are good to go. Here's a CodePen with a working example. Hope it helps and you understand why it didn't work before!

edit: update codepen link

Upvotes: 0

bajran
bajran

Reputation: 1503

Try by this way

<nav class="orange" role="navigation">
            <div class="nav-wrapper container">
            <a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
                <ul class="right">
                    <a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
                    <form class="col s12">
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="search" type="text" class="validate" placeholder="Search...">
                            </div>
                            <div class="input-field col s6">
                                <button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
                            </div>
                        </div>
                    </form>
                </ul>
            </div>
        </nav>

Add row class instead of inline

Upvotes: 0

Related Questions