mistery_girl mistery_girl - 4 years ago 93
HTML Question

CSS issue in search bar form in smaller screens

I encountered this strange CSS issue.When I use the page width more than some

700px
, it looks good.But the same thing, when I resize it less than
700px
(I am not sure of the correct size), it becomes crazily deformed. There's not much difference between the widths. See this when it is resized:

enter image description here

I have the following HTML and CSS that might be related:

<form class="navbar-form search-form" role="search" form="" action="" method="post" onsubmit="return validate()" style="margin:0px 0px 0px 0px;">
<div class="form-group ">
<input type="text" name="s" id="search" size="27" class="form-control form-search search-text ac_input" placeholder="Type your search..." autocomplete="off">
</div>
<button type="submit" class="btn search-home " name="subm">
<span class="glyphicon glyphicon-search white"></span>
</button>
</form>`


And this is the corresponding CSS that comes from BootStrap:

@media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}


Kindly help me with the issue to fix the search bar. Thanks in advance.

Answer Source

Looks like the issue is with the <input /> tag's parent. That's a <div class="form-group"> and below 768px, it breaks. I had the same issue. Kindly try this:

.navbar-form.search-form .form-group {
  float: left;
}

The float: left is removed in the smaller screens. Try this? This would default it for all the .navbar-form.search-form and I hope there's not any other forms using the same class.

Also, it is better if you add an id say, #search-form and then you can target it that way.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download