How do I make my elements occupy the width of their “max-width” specification?


Tags: html,css,width,max,display

Problem :

I’m trying to align inputs on the screen using the following form

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

However, I don’t want things to start wrapping unless the screen is small (< 400 pixels). Otherwise, I want everything to occupy 100% of my screen, up to 1000 pixels. So I tried adding this CSS

@media (max-width: 1000px) {
  #search-form {
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
  }

  #first_name {
    width: 50%;
    margin: 0;
  }

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

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

  #event {
    width: calc(100% - 20px);
    margin: 0;
  }
}

Here’s the Fiddle that illustrates the problem -- https://jsfiddle.net/7h62z3tw/2/. How do I adjust things to keep everything on the same line unless the screen is small?



Solution :

I think this is what you are looking for. I add some extra css to looks good for both media screen <400px and normal widow. I also comment out in css section where I have add and change.Live ON Fiddle

  /* line 123, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
  
}


/* line 132, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer h1 {
  margin: 5px 0;
  font-size: 1.0em;
   text-align: center;
  /*just make it for looks good*/
}

#search-form {
  display: inline-flex;
  /*In screen >400px input element will be inline*/
width: 100%;
}

/* line 137, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

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

/* line 138, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#event {
  width: 100%;
}

/* Do not specify width to allow it to grow freely */


/* line 139, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

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

@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;
  }

  /* line 149, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

  #first_name {
    width: 100%; /*Make the this 100% on screen < 400px */
    margin: 0;
  }

  /* line 150, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

  #last_name {
    width: 100%; /*Make the this 100% on screen < 400px */
    margin: 0;
    /*remove the mergin left 1 and add this */
  }

  /* line 151, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

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

  /* line 152, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

  #event {
    width: 85%; /*Make the this 100% on screen < 400px */
    margin: 0;
  }

}

/* line 158, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form {
  display: table-cell;
  padding: 0px;
}

/* line 162, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form form input {
  vertical-align: middle;
}
 

<div id="searchContainer">
  <h1>Enter Search Criteria To Lookup Results:</h1>
  <form id="search-form" action="/events/search" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="✓">

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


    CSS Howto..

    How do you deal with the designing issues of a website?

    How to avoid blank lines at the top of new column (CSS columns)?

    How does localStorage act in Javascript? [closed]

    How are these sites implementing their onhover overlays?

    CSS how to target element beside my current element?

    how to take common factors out from css where it is separated by comma (,) [duplicate]

    CSS 'schema' how-to

    How does CSS float work when applied to an “ul” element

    How to make the main content div fill height of screen with css [duplicate]

    CSS: How to get this overlay to extend 100% with scrolling?

    How to style elements within other elements with css?

    How to make function NOT highlight last row in table?

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to dynamically resize HTML element according to it's sibling size using CSS only?

    How to make to div comes the one under the other

    How to create a box when mouse over text in pure CSS?

    How to make slide down menu to slide up?

    How can I center these varied number of elements within a div?

    Fluid image using percentage: how do I make the correct approach?

    How Do I Anchor tag in XSLT?

    How to place the same image at the top and at the bottom of the same column?

    How to have two items be placed next to each other in HTML?

    How to animate some parts of an image using CSS?

    How to use css with UIWebView?

    How to create multiline ListBox in GWT?

    how to add a css class to a list when the particular li is clicked using jquery?

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How to put a image below another?

    How can I position a child element behind its parent in IE7 and earlier

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?