Solved

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

Posted on 2014-01-28
6
5,173 Views
Last Modified: 2014-02-04
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
Comment
Question by:SiemensSEN
  • 3
  • 2
6 Comments
 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39815271
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
 

Author Comment

by:SiemensSEN
ID: 39815395
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
 
LVL 58

Expert Comment

by:Gary
ID: 39815515
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39816238
As Cathal asked, do you have a link to the page?
0
 

Author Comment

by:SiemensSEN
ID: 39816294
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
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 200 total points
ID: 39816478
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

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now