Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2014-01-28
6
5,561 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Find out what you should include to make the best professional email signature for your organization.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

860 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