CODEWITHSUNDEEP
csshtmlsearchbutton
Bobi
Bobi

Reputation: 477

Search Form Same Line

I cannot seem to make the search button and input box be aligned on the same line...currently the textbox is above the search button...any tips?

<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form method="get" action="@Url.ArticulateSearchUrl(Model)">
    <input type="text" name="term" class="form-control" placeholder="Search">
    <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
</div>
<!-- End Search Bar -->

Upvotes: 0

Views: 5888

Answers (2)

Bobi
Bobi

Reputation: 477

I figured it out. This did the trick:

<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form class="input-group" method="get" action="@Url.ArticulateSearchUrl(Model)">
    <div class="input-group-btn">
        <input type="text" name="term" class="form-control" placeholder="Search">
        <span><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
    </div>
</form>
</div>
<!-- End Search Bar -->

Upvotes: 0

Giannis Dallas
Giannis Dallas

Reputation: 688

The problem is that the <div>s the <h2> and the <form> are display:block and fill the width of their container

You can convert your HTML to

<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="@Url.ArticulateSearchUrl(Model)">
    <input type="text" name="term" class="form-control" placeholder="Search">
    <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>

and add this CSS

.headline-md,h2,form{
   display:inline-block;
}

.headline-md{
width:80px;
margin-right:15px;
}

I added !important to force the new CSS rules. I added a code snippet to demonstrate the code.

    .headline-md,h2,form{
       display:inline-block !important;
    }

    .headline-md{
    width:80px !important;
    margin-right:15px !important;
    }
<div class="headline headline-md"><h2>Search</h2></div>
    <form method="get" action="@Url.ArticulateSearchUrl(Model)">
        <input type="text" name="term" class="form-control" placeholder="Search">
        <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
    </form>

Upvotes: 1

Related Questions