Menu icon Foundation
Topbar text input too big

Hi,

I've got a new project on the go and have created a top bar (trying to emulate sexy topbar in the documentation). The problem is that the form input is bigger than the submit button (see attached image).

Can you take a look at my code and see if I'm doing something obviously wrong please?

Many thanks
Brett

Top bar

<div class='row'>
       	<div class='large-12 columns'>
   		<nav class='top-bar' data-topbar>
    		 <ul class='title-area'>
        <li class='name'>
      
        </li>
        <li class='toggle-topbar menu-icon'>
          <a href='#'>
            <span></span>
          </a>
        </li>
      </ul>
    		
    		<section class='top-bar-section'>
    			<ul class='right'>
    				<li class='has-form'>
    					<div class='row collapse'>
    						<div class='large-8 small-9 columns'>
    							<input type='text' placeholder='Search'>
    						</div>
    						<div class='large-4 small-3 columns'>
    							<a href='#' class='alert button expand'>Search</a>
    						</div>
    					</div>    				
    				</li>
    			</ul>
    		
    		</section>
    	</nav>
    	
    	
    	</div>
    </div>

topbarinput

Hi,

I've got a new project on the go and have created a top bar (trying to emulate sexy topbar in the documentation). The problem is that the form input is bigger than the submit button (see attached image).

Can you take a look at my code and see if I'm doing something obviously wrong please?

Many thanks
Brett

Top bar

<div class='row'>
       	<div class='large-12 columns'>
   		<nav class='top-bar' data-topbar>
    		 <ul class='title-area'>
        <li class='name'>
      
        </li>
        <li class='toggle-topbar menu-icon'>
          <a href='#'>
            <span></span>
          </a>
        </li>
      </ul>
    		
    		<section class='top-bar-section'>
    			<ul class='right'>
    				<li class='has-form'>
    					<div class='row collapse'>
    						<div class='large-8 small-9 columns'>
    							<input type='text' placeholder='Search'>
    						</div>
    						<div class='large-4 small-3 columns'>
    							<a href='#' class='alert button expand'>Search</a>
    						</div>
    					</div>    				
    				</li>
    			</ul>
    		
    		</section>
    	</nav>
    	
    	
    	</div>
    </div>
Brett Hambridge over 5 years ago

I've figured this out myself with the help of Chrome dev tools

Basically the ordering of the CSS that I downloaded from Zurb is different to that on the demo site (docs).

The section of code needs moving above the .top-bar input section in foundation.css otherwise it overwrites the .top-bar input { } css

/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: white;
  font-family: inherit;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
  -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="date"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="time"]:focus,
  input[type="url"]:focus,
  textarea:focus {
    -webkit-box-shadow: 0 0 5px #999999;
    -moz-box-shadow: 0 0 5px #999999;
    box-shadow: 0 0 5px #999999;
    border-color: #999999; }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="date"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="time"]:focus,
  input[type="url"]:focus,
  textarea:focus {
    background: #fafafa;
    border-color: #999999;
    outline: none; }
  input[type="text"][disabled],
  input[type="password"][disabled],
  input[type="date"][disabled],
  input[type="datetime"][disabled],
  input[type="datetime-local"][disabled],
  input[type="month"][disabled],
  input[type="week"][disabled],
  input[type="email"][disabled],
  input[type="number"][disabled],
  input[type="search"][disabled],
  input[type="tel"][disabled],
  input[type="time"][disabled],
  input[type="url"][disabled],
  textarea[disabled] {
    background-color: #dddddd; }

James over 5 years ago

Hi Brett Hambridge,
just want to say thanks for your help on your own reply: "The section of code needs moving above the .top-bar input section in foundation.css otherwise it overwrites the .top-bar input { } css"

it work with me too.
thanks again.

Che Mcnabb over 5 years ago

Hey all,

This post is over 3 months old and I just ran into this again this morning while trying to demonstrate to a client why foundation is the way to go.

Is there an official explanation why out-of-the box foundation's formatting is broken?

Also - thank you to the original poster for listing the issue and resolving it. The order in the foundation css is wrong, and I thank you for your solution.

Marv Steigman over 5 years ago

Just wanted to add my many thanks to @Brett who saved me a few MORE hours and some strands of precious hair!

@Rafi, why is this still not fixed in the latest CSS from Zurb? Just an oversight or Is it because it is easily corrected for those not using plain old CSS? I am a bit concerned about having to rearrange the CSS every time there is an update from Zurb. Can we some kind of reassurance from you that this will be corrected in the next update?

Jeff Walter about 5 years ago

Seriously guys... I just ran into this issue and wasted 20 minutes of my time looking for the fix.

I'm trying out Foundation for the first time, thinking about making the switch from other frameworks, and after coming across this, I'm wondering what other easy to fix issues are in your source. Pretty lame.

Please update the css, I'm sure it's a 2 minute fix.

Thanks!

Rafi Benkual about 5 years ago

This was fixed in 5.3.3. You can get the update to resolve it.

Credomane about 5 years ago

I just downloaded 5.3.3 and this issue is still there.

[edit]

Looking at the code on github shows that it should be resolved but the builds available for download do not have the css in the same order that they are listed in the scss source from what I can tell.

Zachary Lyons about 5 years ago

I too investigated this issue before finding this thread. My solution for now is to add style="height: 1.8rem" inline on the textbox.