Adjust width of textbox and make mobile responsive

Question

I am trying to make my textbox and button look responsive and stays inline-block even when I use mobilephone.I want the width of the text boxes to expand based on the browser to use more of the screen. My html look like this:

<div id="wrapper">
         <li class="input-button"> 
           <div style="float:left;">                      
          <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60"/>  
           <div id="loader" style="display:none;"><img src="loader.gif" /></div>            
                                </div>   
              <div style="float:left;margin-left:10px;">              
           <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
                                </div> 
              </li>        
           </div>

and css part look like this:

body{   
    background: #f5fffa;
    font-family: 'Lora', serif;
    font-family: 'Montserrat', sans-serif;
}
#wrapper {
 max-width: 940px;
  margin:0 auto;
  padding:0;
}
.input-button
{
margin:20px auto;
display:inline-block;
}
#KUNDE{ 
   padding: 10px 5px;
   font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
   border: 1px solid #a4c3ca;
   background: #f1f1f1;
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);  
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;      
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;

}

I have tried to implement CSS3 flexbox and CSS calc() like adding #Kunde { display: flex; } and .input-button input { width: calc(100% - 160px); } and removing the size="60" from html and using width attribute in CSS like #KUNDE{ width=100%; }. Those methods did not help me out the solve problems or I couldn't use them in the proper way :(

Any suggestion will be highly appreciated.

Answer 1

There's a number of solutions to your problem. I've outlined three options with some example code below. Some adjustments will need to be made to meet your specific needs but should be trivial.

* {
  box-sizing: border-box;
}
[id] {
  margin: 10px 0;
}
input {
  width: 100%;
  margin-right: 10px;
}

#example-1 input {
  /* minus button width + input margin */
  width: calc( 100% - 85px ); 
}
#example-1 button {
  width: 75px;
}

#example-2 {
  margin-left: -10px;
  margin-right: -10px;
  overflow: hidden; /* clearfix */
}
#example-2 div {
  float: left;
  padding: 0 10px;
}
#example-2 div:nth-child(1) {
  width: 60%;
}
#example-2 div:nth-child(2) {
  width: 40%;
}
#example-2 button {
  width: 100%;
}

#example-3 {
  display: flex;
  justify-content: space-around;
}

<h2>Floated with Calc() - <small>Fixed Size Button</small></h2>
<div id="example-1">
  <input type="text"><button type="text">Fixed Width</button>
</div>

<h2>Constrain Width with Container Elements - <small>Percentage Size Button</small></h2>
<div id="example-2">
  <div>
    <input type="text">
  </div>
  <div>
    <button type="text">Percentage Width</button>
  </div>
</div>

<h2>Flexbox</h2>
<div id="example-3">
  <input type="text"><button type="text">Hent</button>
</div>

The first example shows the use of calc(). I'm guessing you were close before but might have applied it to the wrong elements and/or applied incorrect values.

The second example show a grid approach where you place elements inside of other elements that make a grid. Those elements are then set to take up a certain portion of their containing element. This is similar to Bootstrap and other CSS frameworks.

For the second example I also added a demonstration of making the button with a flexible width. Though not required for that solution, if a fixed size is used then you would want to switch to example one or three if both items need to take up the full width of the parent element.

The third example shows flexbox.

Answer 2

your html is pretty messy so I removed all unnecessary tags:

<div id="wrapper">
  <form name="searchbar">                     
      <input type="text" id="KUNDE" placeholder="Search by name or ID." value=""/>  

      <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
      <div id="loader" style="display:none;"><img src="loader.gif" /></div>   
  </form>        
</div>

basic idea is to express the widths of the elements in percentage and if you want to fine tune it you can add media queries for different sizes:

body{   
    background: #f5fffa;
    font-family: 'Lora', serif;
    font-family: 'Montserrat', sans-serif;
}
#wrapper {
   max-width: 940px;
  margin:0 auto;
  padding:0;
}
.input-button {
  margin:20px auto;
  display:inline-block;
}
form {
  width: 100%;
}
form input {
  width: 79%;
  box-sizing: border-box;
}
form button {
  float: right;
  width: 19%;
  box-sizing: border-box;
}
#KUNDE{ 
   padding: 10px 5px;
   font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
   border: 1px solid #a4c3ca;
   background: #f1f1f1;
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);  
}
.btn-style {
  padding:5px;
  border: 1px solid #00748f;
  height: 42px;

  cursor: pointer;
  font: bold 12px Arial, Helvetica;
  border-radius: 5px;      
  text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
  background-color: lightblue;

}

css could be little bit cleaner also but I don't want to mess with your styles :)

here it is in action: http://codepen.io/1GR3/pen/mAqyZr?editors=1100

Answer 3

Try the following. Use cal() and width: 100% in necessary place to achieve this

body {
  background: #f5fffa;
  font-family: 'Lora', serif;
  font-family: 'Montserrat', sans-serif;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
}
.input-button {
  display: inline-block;
  width: 100%;
}
.input-wrapper {
  width: calc(100% - 140px)
}
#KUNDE {
  padding: 10px 5px;
  font: bold 16px'lucida sans', 'trebuchet MS', 'Tahoma';
  border: 1px solid #a4c3ca;
  background: #f1f1f1;
  border-radius: 5px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
  margin: 0 10px;
  padding: 5px;
  border: 1px solid #00748f;
  height: 42px;
  width: 100px;
  cursor: pointer;
  font: bold 12px Arial, Helvetica;
  border-radius: 5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
  background-color: lightblue;
}

<div id="wrapper">
  <li class="input-button">
    <div class="input-wrapper" style="float:left;">
      <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" />
      <div id="loader" style="display:none;">
        <img src="loader.gif" />
      </div>
    </div>
    <div style="float:left;margin-left:10px;">
      <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
    </div>
  </li>
</div>