Chris Dormani Chris Dormani - 7 months ago 23
HTML Question

Why is the placeholder text in my search bar not appearing in firefox

I have a cross browser issue in which the placeholder text that is nested in my search bar of my rails app does not appear in Mozilla despite working terrific in all other browsers.

I have looked around for an answer without success.


search bar rendered in safari, chrome and opera.


enter image description here


search bar rendered using firefox.


enter image description here


_header.html.erb


<nav class="navbar navbar-static-top navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<%= image_tag('nippon.svg', alt: "Nippon Beauty", class: "navbar-brand-icon") %>
</a>
</div>

<input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?">

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Signup", new_user_registration_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Account Settings", edit_user_registration_path %></li>
<li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
<% else %>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</nav>



CSS


@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
font-family: 'Open Sans', sans-serif;
}



.searchTerm {
position: absolute;
left: 550px;
top: 20px;
width: 370px;
border: 15px;
background: #F2F2F2;
padding: 25px;
height: 40px;
border-radius: 8px;
}

Answer

The problem is that the total amount of padding you're using is greater than the height of your input.

padding: 25px;

Is the same as

padding-top: 25px; padding-bottom: 25px;

So the amount of vertical padding is 50px, but you set the height to only 40px. Make your height greater than the amount of padding and you'll see the text.


Of course, the question becomes why doesn't this result in a problem in other browsers. It looks like Chrome deals with it by clipping off the padding when the padding is larger than the given height. If I take the height out of your CSS in Chrome, the search box actually gets bigger. I'm guessing the other browsers do the same thing.

My guess is that the problem is the order in which the CSS is applied in different browsers. Chrome adds the padding, then changes the height of the result. Firefox changes the height, then adds the padding to the result. Again, just a guess, but that's what appears to be happening.