Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7429
  • Last Modified:

Bootstrap: How to increase the width of the search input box

Hello,
  I am trying to add a search box like google input box in my application  but I cannot get it to work in FF. Here is my code

<div class="container">
	<div class="row">
	    <div class="col-md-8">
	        <form class="navbar-form navbar-left" role="search">
	         <div class="input-group">
	            <input type="text" class="form-control" placeholder="Search for awesome stuff">
	            <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
	          </div>
	        </form>
	    </div>
	</div>
</div>

Open in new window


In IE11 and Crome I get a bigger search input box, However the input box appears smaller in FF
0
SiemensSEN
Asked:
SiemensSEN
  • 3
  • 2
1 Solution
 
Adrian CrabtreeCommented:
What is the CSS attributed to the input? My guess would be the property box-sizing. It would look something like this:

box-sizing: border-box;

Open in new window


If that is the case, you would need to add in the Mozilla-prefix for it to work. The new CSS would look like this:

box-sizing: border-box;
-moz-box-sizing: border-box;

Open in new window


Again, this is just a guess. IE and Chrome both recognize box-sizing while FF does not.
0
 
SiemensSENAuthor Commented:
Did not work, This what I see in FF

In Firebug I see the correct width (default to screen width --centered)  for
div class="container">
	<div class="row">
	    <div class="col-md-8">

Open in new window


However,  the width shrink when I hover on this class
<form class="navbar-form navbar-left" role="search">

Open in new window


The CSS is

navbar-form {
    border: 0 none;
    box-shadow: none;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    width: auto;

Open in new window

}
this is in bootstrap.css file (line 4331)

Thanks for your help
0
 
GaryCommented:
Got a link to the page?
Bootstrap would have already reset all margins, padding and box-sizing so that wouldn't be the cause.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Adrian CrabtreeCommented:
As Cathal asked, do you have a link to the page?
0
 
SiemensSENAuthor Commented:
I don't have a link to the page but I attach my simple HTML file . The stylesheet/js are linked directly from the bootstrap and jquery site.


You will see the search box appears bigger in IE and Chrome .
test.htm
0
 
Adrian CrabtreeCommented:
In you CSS, if you change the .navbar-form width to 100% within the 768px media query, that should work.

@media (min-width: 768px) {

.navbar-form {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now