Solved

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

Posted on 2014-01-28
6
5,321 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

910 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

21 Experts available now in Live!

Get 1:1 Help Now