Solved

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

Posted on 2014-01-28
6
5,457 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML &#0153 2 21
Call a function within the ASP code 4 12
Add shadow behind div 5 14
styling bootstrap grid system with CSS 2 8
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

823 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