How do I keep my input fields on one line while centering the DIV that contains them?

F

10

8

I gave this CSS class to some input fields

.searchField {
    display: inline-block;
}

This is their underlying HTML ...

<div id="searchForm">
Search For Results<br> 
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
    <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
    <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form> </div>

However, despite the fact that there is enough horizontal screen real estate, one of them keeps wrapping to teh next line, as this Fiddle illustrates -- https://jsfiddle.net/3mwn14fk/ . How do I keep these items on one line (assuming there is enough browser width)? Note I also want to keep the DIV they are within vertically and horizontally centered.

Edit: This is what I see in the Fiddle. This is on Firefox. Note the text fields are not on one line.

Edit 2

Per Monica's Fiddle, this is what I see. Note that the first naem and last name are on one line, but the event text box is on the next line. I would like all three to be on the same line, even if the black box containing them has to expand

Fastening answered 30/8, 2016 at 19:47 Comment(11)

works fine for me – Smew 30/8, 2016 at 19:55

what browser are you on? I've added an image into my question of what I see. I tried this on Mac Firefox and Mac Chrome. – Fastening 30/8, 2016 at 20:5

looking at your screenshot, there's not enough room for the third input.. it's doing what it should – Smew 30/8, 2016 at 20:8

use display: table for #loginArea and display:table-cell for .searchField it works have a look jsfiddle.net/UserIsMonica/3mwn14fk/1 – Ineffectual 30/8, 2016 at 20:17

@aw04, what are you talking about? there is tons of horizontal space. Just because there isn't enough horizontal space in teh black area, the black area shoudl expand to accommodate it because there is horizontal space beyond it. – Fastening 30/8, 2016 at 20:50

the horizontal space is being constrained by the styles you're using to center the black area... not the inner elements. so it works, but only at a certain width – Smew 30/8, 2016 at 21:0

My question does not say anything about the inner area needing to be constrained -- only that it needs to be centered. If you know an answer that keeps that area centered and allows things to stay on one line, then that is the answer I'm looking for. – Fastening 30/8, 2016 at 21:13

i can try and take time later, but the short of it is it will be a lot easier if you make something a constant width. you can try playing around with the left and translate of the black box though – Smew 30/8, 2016 at 21:24

@Mike You have set the position of the #loginArea div to be absolute. By the virtue of the position and the transform properties, it occupies only HALF of the available width. And the input boxes are stacking pretty good in whatever space they have available to them. Try commenting these styles to see what I mean:

#loginArea {     /*position: absolute;     top: 50%;     left: 50%;     transform: translateX(-50%) translateY(-50%);*/ }

– Hoofbound 31/8, 2016 at 7:35

@Mike, Also note that default size of the inout elements is 20. So the first two inputs have a size 20, while the third one has a specified size of 50 - more than the combined sizes of the first 2 inputs. This means, for the all inputs to stay on one line, the width of the black area should be AT LEAST 4 times the width of the first input. The width of the first input box as shown by Chrome Inspector comes out to be 173 px. So your black box should be at least 4x173= 692. If we account for some padding and margin between elements, then #loginArea should be min 700px wide. – Hoofbound 31/8, 2016 at 7:44

Just add white-space: nowrap; to the #loginArea css rule. – Limassol 1/9, 2016 at 21:6

C

5

Just to give you an alternative you could use flexbox to achieve what you want. Here's a quick demo:

/* Just some basic CSS declarations to start with */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

h4 {
  margin: 5px 0; /* Just to make the demo look nicer */
}

#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #CCCCCC;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */
}

#search-form {
  position: relative;
  display: flex;
  align-items: center; /* Not necessary but will center the items */
  flex-direction: row; /* Not necessary but tells that they should be in a row */
  justify-content: flex-start; /* Will align items to left on larger screens */
  flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */
}

#search-form > * { /* You could give a class or element instead of asterix */
  margin: 0 10px 5px 0; /* Just to make it look nices */
  width: 25%; /* Width of text inputs, you could set them different from each other */
  min-width: 100px; /* Min width to wrap elements when small screen */
  flex: 1;
}

#search-form .search_button {
  max-height: 20px;
  flex: 0 0 20px; /* Keep the magnifying class proportioned/20px wide */
  min-width: 0px; /* Do not use the min-width declared above */
  margin: 0 0 5px 0;
}

<div id="loginArea">
  <div id="searchForm">
    <h4>
      Search For Results
    </h4>
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
      <input name="utf8" type="hidden" value="✓">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="http://image.flaticon.com/icons/png/128/49/49116.png" class="search_button">
    </form>
  </div>
</div>

I set the login area to a width of 80% but you can alter this in any way you want of course. I set also the min-width of the inputs to 100 pixels - except for the last one - so that it will wrap nicely on smaller screens. I also set the max-width for the inputs so they will not grow infinitely and the search forms justify-content: flex-start; will align them to left on bigger screens.

Also the support for flexbox on browsers can be improved with setting prefixes like -webkit- and -ms- etc to the CSS declarations.

JSFiddle to play around with

Browser support for flexbox

Cute answered 2/9, 2016 at 6:43 Comment(12)

Thanks, the only issue I see with this though is that when I expand teh window ( jsfiddle.net/vbegaf5k/1 ), the containing box has all this extra space to the right of the magnifying glass. I only want the box to take up as much real estate as the elements within it and no more. – Fastening 2/9, 2016 at 14:14

Well it's just about the margin and max width of the elements.. I edited the code snippet so that the search input doesn't have the margin anymore and all the other fields will expand as much as the container. Here's even a new JSFiddle for it: jsfiddle.net/thepio/t8c53ayq – Cute 2/9, 2016 at 18:24

Thanks for this updated fiddle. I'm noticing as I expand the width of the window the size of the text fields changes. Ideally, I'd like these to just stay at whatever width "size='x'" comes out to. – Fastening 2/9, 2016 at 22:44

Wasn't that how it worked before my changes? The inputs can have the min and max-width properties which will keep them fixed or allow some width change. – Cute 5/9, 2016 at 5:25

Is there any way to do it where you don't specify "width" properties for the inputs and just let their width be whatever the browser renders "size='x'" to be? – Fastening 5/9, 2016 at 21:41

Yes there actually is. It just won't wrap the elements on smaller screens to a new line if they get too small if you don't have min-width. I mean if you remove the widths all together the inputs will be three even inputs (in width). In this example the widths are gone except from the search input. You should either make it a button or something and then use flex only on the inputs. The search input would otherwise leave those spaces around it that you were talking about. jsfiddle.net/thepio/29ym9wh0 – Cute 6/9, 2016 at 5:53

This still isn't right, though. If you look at your Fiddle -- jsfiddle.net/29ym9wh0/1 , the magnifyhing glass is going to the next line even though there is enoguh horizontal screen real estate to keep it on that line. I would like the gray container to expand to accommodate everything. I don't want the items in the container to expand. I lack the proper knowledge to be able to explain what I want better. – Fastening 7/9, 2016 at 14:25

Thank you for explaining. Maybe it's just me that don't understand what you want :P Here's yet another fiddle: jsfiddle.net/thepio/1q4h9zq1 . I must say that without setting the min-width to the inputs the browser itself will not render the inputs under a certain width. This is what is causing the search button to wrap to the next line. See the min-width set in the CSS #search-form > *. I set it to 50px now which I think is now almost too little considering the inputs get so small on smaller screens === not good for the user. Hopefully this explanation helps :) – Cute 8/9, 2016 at 5:19

This totally rocks, there's just one more thing. I tried setting the "size" attributes on the inputs from yoru Fiddle -- jsfiddle.net/1q4h9zq1/1 , but the input sizes seem unaffected. Is there a way to allow those size attributes to be effective and keep the other fixes that you've made? – Fastening 8/9, 2016 at 14:7

Well you know, if you set size="10" to an input it will force the browser to have it at set width and it won't work responsively nor otherwise like in my example...If you want it to be responsive you need to forget the inline size. If you wish to have different size inputs you need to look at flex-grow flex-shrink and flex-basis CSS declarations. Or do it like with the search button or set min-width etc. To sum it up I guess you can't do exactly what you want with CSS unless you do some media queries in your CSS. – Cute 9/9, 2016 at 5:24

Since I'm a novice at CSS, I defer to your expertise. But just so I understand you, you're stating its impossible to specify "size"s on my inputs and keep them on the same line, while keeping the parent container centered unless I specify "width" attributes for the inputs? – Fastening 9/9, 2016 at 13:44

Yes, I would say so. I haven't seen anybody at least in the past 5 years using the size attribute anywhere. It's all done with CSS these days. – Cute 9/9, 2016 at 14:8

A

5

Use inline-block for children with white-space: nowrap on parent. It will prevent children from wrapping in next line.

Note: Please see snippet in full page mode.

#loginArea {
  white-space: nowrap;
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.searchField {
  display: inline-block;
  vertical-align: top;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results<br> 
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
    </form>
  </div>
</div>

Acrogen answered 2/9, 2016 at 6:15 Comment(7)

Thanks but when I compress the screen so that there is not enough real estate, the elements disappear instead of wrapping like they are supposed to -- jsfiddle.net/3mwn14fk/5 . – Fastening 2/9, 2016 at 14:8

@Mike you can use a media query and move white-space: nowrap there from above you wants the inputs not to wrap. – Acrogen 2/9, 2016 at 14:13

What's a media query? Anyway when I remove the "white-space: nowrap;" directive, things wrap even though there is enoguh screen real estate to dispaly them -- jsfiddle.net/3mwn14fk/6 , which takes me back to the original problem I was trying to solve. – Fastening 2/9, 2016 at 14:16

@Mike media query apply styles based on the width of viewport. you can check the fiddle that i posted in above comment. I hope it will solve your problem. – Acrogen 2/9, 2016 at 14:20

Ah I missed your Fiddle. Why do we need the "min-width" directive? Will this break if viewing on a mobile device? – Fastening 2/9, 2016 at 14:28

@Mike As i told media query apply styles based on viewport width. Search on Google for more information. Styles written inside @media (min-width: 850px) {... } will apply only when your browser screen will be of width equal to 850px or more. On screens lower than this resolution these styles will not be applied. – Acrogen 2/9, 2016 at 14:30

Hey I'm noticing something odd about your Fiddle -- when I compress the screen like so -- jsfiddle.net/3mwn14fk/9 , things are wrapping, even though there is still enough horizontal space to display them all in one line. Note that I don't care about the width of the black containing box, it can expand as needed to accommodate all the elements. – Fastening 2/9, 2016 at 16:31

C

5

Just to give you an alternative you could use flexbox to achieve what you want. Here's a quick demo:

/* Just some basic CSS declarations to start with */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

h4 {
  margin: 5px 0; /* Just to make the demo look nicer */
}

#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #CCCCCC;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */
}

#search-form {
  position: relative;
  display: flex;
  align-items: center; /* Not necessary but will center the items */
  flex-direction: row; /* Not necessary but tells that they should be in a row */
  justify-content: flex-start; /* Will align items to left on larger screens */
  flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */
}

#search-form > * { /* You could give a class or element instead of asterix */
  margin: 0 10px 5px 0; /* Just to make it look nices */
  width: 25%; /* Width of text inputs, you could set them different from each other */
  min-width: 100px; /* Min width to wrap elements when small screen */
  flex: 1;
}

#search-form .search_button {
  max-height: 20px;
  flex: 0 0 20px; /* Keep the magnifying class proportioned/20px wide */
  min-width: 0px; /* Do not use the min-width declared above */
  margin: 0 0 5px 0;
}

<div id="loginArea">
  <div id="searchForm">
    <h4>
      Search For Results
    </h4>
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
      <input name="utf8" type="hidden" value="✓">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="http://image.flaticon.com/icons/png/128/49/49116.png" class="search_button">
    </form>
  </div>
</div>