CODEWITHSUNDEEP
cssbootstrap-4alignmentnavbar
CelticJordan
CelticJordan

Reputation: 35

Having problems aligning a search input and a submit button inside a navbar at small resolutions

I was making a search view for a webpage when I realized the search box and submit button next to it (aligned to the right at most screen widths) would get out of place when in very small max-widths.

I'm using Bootstrap 4, so I used ".ml-auto" to align those elements to the left of the navbar, working fine except in this case (as I know elements in navbars behave different in Bootstrap). Css and js files are imported correctly (made sure of it before writing this). Here are some snippets of the code so you can see the issue:

HTML

    <div class="container">
    <header id="head">
        <h1 class="page-header float-left">bitDump</h1>
        <div class="clearfix"></div>
    </header>
    <section id="mainBody">
        <nav class="navbar navbar-expand-sm navbar-dark navbar-tweak">
            <form class="form-inline my-2 my-md-0 ml-auto">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0 ml-auto" type="submit">O</button>
            </form>
        </nav>
    </section>
</div>

Custom CSS (complementing Bootstrap's)

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: none;
  color: #000;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ddd;
  font-weight: normal;
} 

.navbar-tweak {
    border-radius: 5px;
    background-color: #6c757d;
    border-color: #5a6268;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.page-header {
  padding-bottom: 5px;
  margin: 20px 0 10px;
  border-bottom: 1px solid #eee;
}

The misalignment can be seen in https://www.codeply.com/p/T3d3CgZcya, on the vertical phone resolution (iirc it's 360px wide)

Any ideas how to fix it?

Upvotes: 1

Views: 31

Answers (1)

Asaf
Asaf

Reputation: 1564

Just add this style:

@media (max-width: 480px){
  .form-control{
    width: auto;
  }
}

Currently you are using width: 100% so the input is taking all the space, and there is no space left for the button.

Upvotes: 0

Related Questions