How do I make my inputs line up the same on Firefox as they do on Chrome?

Question

I’m trying to get my elements to align properly on Firefox on a small screen (I’m using Mac El Capitan). I have these elements

<div id="searchContainer">
<h1>Search For Race Results:</h1>
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" value="✓" type="hidden">
<input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text">
<input name="last_name" id="last_name" value="" placeholder="Last Name" type="text">
<input name="event" id="event" value="" placeholder="Event" type="text">
<input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image">
</form></div>

and I have these styles for aligning things

#first_name,
#last_name {
  width: 40%;
  /*make the width like event so all the input fields looks good*/
} 

#event {  
  width: 100%;
}

#last_name,
#event {
  margin-left: 2px;
}

#event {
  margin-right: 2px;
} 

input.search_button {
  /* Search-button will be center when meda screen < 400px */
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media only screen and (max-width: 400px) {
  /*set the max width 400px so they will wrap after the media screen reach 400px*/
  #search-form {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #first_name {
    width: calc(50% - 8px);
    margin: 0;
  }

  #last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
  }

  #first_name,
  #last_name {
    margin-bottom: 1px;
  }

  #event {
    width: calc(100% - 35px);
    margin-right: 2px;
  }
}

But notice when I compress the screen to a size less than 400 pixels on Firefox, the elements do not wrap nicely as they do on Chrome, which is what I want — https://jsfiddle.net/7z662891/2/ . What do I need to do to get my Firefox alignment to behave like Chrome?

It seems to have to do with the default styling for the chrome inputs vs the firefox inputs. The firefox inputs seem rounder and more spacious than the simple rectangular chrome ones, which may be causing the issue. — vladdobra, Oct 14 '16 at 16:53
Consider adding `min-width: 0` to the input elements ([demo](https://jsfiddle.net/7z662891/3/)). Details here: http://stackoverflow.com/q/36247140/3597276 — Michael Benjamin, Oct 14 '16 at 17:00
Thanks but this doesn't work. If you look at your demo, compress the screen to less than 400 pixels in Firefox and notice the magnifying glass wraps to a different line than the event input, but in Chrome this will never happen (they will always stay on the same line) — , Oct 14 '16 at 18:35
You may want to consider adding some styles to normalise elements so that your styling is more consistent. For example: https://necolas.github.io/normalize.css/ — Dominic Aquilina, Oct 18 '16 at 16:42
Look at my fiddle on Chrome -- that's waht I want in Firefox. Do you want me to just take a screen shot of the Fiddle in Chrome to save you the trouble of clicking on the link? — , Oct 19 '16 at 20:12
@Mike Don't get an attitude when you are asking for help. You cannot even understand a simple suggestion to post a screenshot of what you are trying to accomplish. Take a look at my questions, i show screenshots, not just vague comments. — JGallardo, Oct 19 '16 at 21:42

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

5

I see a couple of problems here.

Resets

First of all you have to be aware that each browser will display various elements differently by default. So your first step is to add resets. You can try things like

Meyerweb
Normalize
Super Form Reset.css

Form styling

Add specific styles to things that you want to be consistent. Otherwise you will get the default.

Math

Try not to mix px and %. For example, you used

#last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
}

Instead try

#last_name {
    width: 48%;
    margin-left: 1%;
}

Because everything needs to add to or less than 100% when you are placing them side by side.

Also be aware that calc is not supported in many older browsers. You can read more at https://developer.mozilla.org/en-US/docs/Web/CSS/calc

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 18 '16 at 16:56

JGallardo

11,074
10
82
96

1

yes! +1 for not mixing percentages and absolutes. This will cause issues when dealing with different screen sizes in ways you likely don't want. ie: 8px will be a certain % of the width (call it 2% for this example). If you change the viewing area to be half the size though, those 8px are now 4% as they haven't changed but all the width height that uses % has changed. – Rodger Oct 19 '16 at 16:19
Hi, I tried your percentage idea -- https://jsfiddle.net/7z662891/14/ , but only does it still not display properly on Mac Firefox, Chrome is now broken as well. – Oct 19 '16 at 20:16
@Mike no did not. you used percentage only a few times but still left everything else untouched. Like i said before, post a screenshot, wireframe, sketch, etc so we can see what you are trying to accomplish. – JGallardo Oct 19 '16 at 21:40

score 0 · Answer 2 · answered Oct 24 '16 at 17:16

If you put your inputs in a line with no whitespaces, this resets the default margins to 0.

<input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text"><input name="last_name" id="last_name" value="" placeholder="Last Name" type="text"><input name="event" id="event" value="" placeholder="Event" type="text"><input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image">

I rewrote the CSS to not use flex-boxes since sometimes there are issues that occur with using them. Also made the box-sizing: border-box; include everything within #searchContainer, so all the widths would be based on the box containing the border rather than just the content width, with the width increasing when there is a border, or when there is padding, and set the input text types to have 4px padding so that the text has room to breathe on all sides.

A media query was added to make the inputs line up to the next line when it is 600px or narrower.

Is this what you were looking for?

JSFiddle example: https://jsfiddle.net/xbpsx6ur/8/

score 0 · Answer 3 · answered Oct 25 '16 at 15:35

With Firefox, the form does not seem to contain the input elements as Chrome does. Firefox lets the form's internal elements spill over the form's boundary before wrapping as the browser width is decreased.

I suggest having a div inside of the form and then use that div to contain the input elements. Some CSS updates may also be needed, but this may help Firefox behave more like Chrome for your HTML.

score -1 · Answer 4 · answered Oct 24 '16 at 12:20

-1

don't use calc value in css because it wont support all the browser. try to use width as percentage value.

Example:
  #first_name {
    width:35%;
    margin: 0;
  }

answered Oct 24 '16 at 12:20

Ayyappan K

1,111
8
9

My earlier answer gave the same advice. But you did not add anything new. – JGallardo Oct 24 '16 at 18:27

How do I make my inputs line up the same on Firefox as they do on Chrome?

4 Answers4

Resets

Form styling

Math