How do I expand input element to its container div

Hi. I have to inputs and each one is within a div and those divs are within a larger container div. My problem is those inputs are smaller than their container divs. I don’t know how to expand them to have equal size of height with their container divs. Below is my part of code.

#tfheader{
		background-color:#c3dfef;
		position: relative;
		top:135px;
		height:250px;
	}

	#tfnewsearch{	
		display:inline-block;
		
	}

        .tftext{
		margin: 0;
		width: 210px;
		height:100%;	
		position: relative;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666;
		border:1px solid #0076a3; 
		border-left-style:none;
		border-right-style:none;
				
	}
		
	.tftext.tftextinput1{box-sizing: border-box;}

        .tftext.tftextinput2{
	box-sizing: border-box;
	}
		
	
	.group: before,.group: after{
	 content:"";
	 position: absolute;
	 top:50%;
	 left:27%;    
	 height:33px;	 
	 display: table;
	 clear: both;
	}
			
	.inputdiv{
	vertical-align: top;
        position: relative;
        height:100%;
	display:table-cell;
	border:1px solid black;
	}

.tfclear{
		clear:both;
	}

<div id="tfheader">
	<center>
	<div class="group" style="border:1px solid black;">
		<form id="tfnewsearch" method="get" 
action="http://www.google.com" >
         <div class="inputdiv">
		       <input type="search" id="tfq1b" class="tftext 
tftextinput1" 
     name="q" size="21" maxlength="120" placeholder="Search our 
website"></input>
			   </div>
    <div class="inputdiv">			
    <input type="search" id="tfq2b" class="tftext 
    tftextinput2" name="q" size="21" maxlength="120" 
placeholder="city"></input>				  	 
    </div>
    </div>
    </form>
	</center>
		<div class="tfclear"></div>
    </div>

Is this what you have in mind?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>

<title> HTML5 Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
#tfheader{
  background-color:#c3dfef;
  position: relative;
  top:135px;
  height:250px;
}

#tfnewsearch{ display:inline-block; }
.tftext{
	margin: 0;
	width: 210px;
	height:100%;	
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
	border:1px solid #0076a3; 
	border-left-style:none;
	border-right-style:none;
}
.tftext.tftextinput1{ box-sizing: border-box; }
.tftext.tftextinput2{ box-sizing: border-box; }
.group: before,
.group: after{
   content:"";
   position: absolute;
   top:50%;
   left:27%;    
   height:33px;	 
   display: table;
   clear: both;
}
.inputdiv{
   vertical-align: top;
   position: relative;
   height:100%;
   display:table-cell;
   border:1px solid black;
}

.tfclear{ clear:both; }
input { width: 100%; }
</style>

</head>
<body>
  <form id="tfnewsearch" method="get" action="http://www.google.com" >
<div id="tfheader">
 <div class="group" style="border:1px solid black;">
   <div class="inputdiv">
    <input type="search" id="tfq1b" class="tftext tftextinput1" name="q"
      maxlength="120" placeholder="Search our website"></input>
   </div>
   <div class="inputdiv">			
    <input type="search" id="tfq2b" class="tftext tftextinput2" name="q"
      maxlength="120" placeholder="city"></input>				  	 
   </div>
 </div>
 <div class="tfclear"></div>
</div>
  </form>

<script>

</script>

</body>
</html>
1 Like

Thank you very much for your answer. Could you please tell me what have you changed in my code? Your changes in my code seems to work correctly but mine doesn’t.

Hi,

Not so easy to see in your mal-indented and fragmented code, as posted. :slight_smile:

It is the html that differ: The form tags are moved to include all the divs.

You have mis-matched tags. Did you use an HTML and/or JS code verify site?
Minor changes to the CSS – do a line-by-line comparison.

Hi,

The only change I can see is this added line, which doesn’t change the display here. :slight_smile:

input { width: 100%; }

No I didn’t. Could you please suggest me HTML and/or JS code verify site?

You can ‘google’ others, but some common validation sites are:
HTML: https://validator.w3.org/
JS: http://jslint.com/
CSS: https://jigsaw.w3.org/css-validator/

Evaluate your original post code (that does not work)
against the code I provided. Look at the source code line order of the HTML
and the attributes of each CSS line. Note, for example that <center> tags were removed because they have been deprecated from the more recent HTML specs.

It they look the same after that, then let me know.
BTW, how much HTML/JS/CSS coding experience have you had?
I tried to use as much of your original code as I could
with the changes to make it work!

3 Likes

First things I see:

<center> is obsolete for centering elements. Discard it.

Next, there is no need to close the <input> with </input>.

Third, I don’t see you have targeted the div with a class of inputdiv with any styles. I’m assuming that .inputdiv would be what you would want to target to distribute the heights (likely with percentage values).

Fourth, I find it very hard to read HTML markup that looks like this:

               <someelement class="someclass" style="border:1px solid black; text-align:!important">
<div class="somediv"> 
                                                              <div class="inputdiv"><input type="search" id="tfq1b" class="tftext 
tftextinput1"  name="q" size="21" maxlength="120" placeholder="Search our 
website">
                                               </div>

I prefer everything indented neatly like such:

<div id="tfheader">
	<div class="group">
		<form id="tfnewsearch" method="get" action="http://www.google.com" >
                <div class="inputdiv">
		            <input type="search" id="tfq1b" class="tftext tftextinput1" name="q" size="21"                      maxlength="120" placeholder="Search our website">
<!-- ...and so on -->

Fifth, you have a stylesheet, but you also have a border set on the div called group that you have absolutely positioned to its child element (the form inputs). Keep all of your CSS in one spot. :wink:

Sixth, you have no use for unique classes for your form inputs. They are both set to border-box.

My opinion is that this code should be scrapped and re-written to be much more simple. :eyeglasses:
What you have could be condensed to 10 lines or less on the HTML side.

Do you have a live site example or screenshot that shows how the heights are distributed unevenly?

1 Like

Thank you very much for your answer. I want those two search bars to be shown in the center of the web page and by omitting tag, they will be shown to the left of website thus I can not omit them. Or do you have a better suggestion for that? As you asked me about my experience in implementing html/css I can tell you I am inexperienced and amateur.

You could center a block by setting its horizontal margins to auto, and if you display it as a css table it will center without the need of an explicit width set.

E.g:

#tfnewsearch{  /* the form */
  display: table;
  margin: 0 auto 0 auto;
}

1 Like

You could also center the form’s direct child “tfheader” by setting the text-align to center it’s (the form’s) inline content and then make the child an inline-block. Then the child could get the left aligning back for its own content.

E.g:

#tfnewsearch{ text-align:center;} /* Without a width, or auto, the form (a block) will expand and center its content in available space */

#tfheader{
  background-color:#c3dfef;
  position:relative;
  top:135px;
  height:250px;
  display:inline-block; /* as inline-block it will shrink-wrap its content and obey current text-aligning */
  text-align:left; /* if needed: reset the text-align to what you use */
}

Elenor,

I think this HTML format is sufficient for what you are trying to achieve, but maybe @erik_j has selflessly already directed you. This is similar to what @jmrker posted, but I want to simplify it even further:

<form id="tfnewsearch" method="get" action="http://www.google.com" >
      <div id="inputdiv">
           <input type="search" name="q" maxlength="120" placeholder="Search our website">
           <input type="search" id="tfq2b" name="q" maxlength="120" placeholder="city">
       </div>
</form>

I don’t know what .tfclear is there for. Do you have a reason for that? If not, I can’t imagine that this needs to be more than those 6 lines. Maybe you would like to add <label>s to the form inputs.

Without seeing your test site to see why you have absolute positioning, I will lobby how you might amend your CSS targets as follows (similar styles as Erik):

#tfnewsearch {
     display: table;
     margin: 0 auto 0 auto;
     text-align:center;
}

#inputdiv {
     background-color:#c3dfef;
     position:relative;  /* left this until we know why you have this positioned like this ... probably not needed */
     top:135px;
     height:250px;
     display:inline-block; /* as inline-block, it will shrink-wrap its content and obey current text-aligning */
}

input {
      height:40%; /* sample height of inputs to occupy. adjust as needed. */
      width:100%;
}

Will you be able to remember what tfq2b is? If I was the author, I might call it cityinput or something like that.

Do you have other code for this page or a screenshot of what you’re working on?

Thank you very much for your helpful response. I want to implement two search bars exactly the same as in the https://www.yelp.co.uk/london website. I used your code in my implementation but the problem is those search bars aren’t shown horizontally near each other. second, I used .group class in my code because I wanted to create two search bars and two titles that are all in the related smaller div then I want those divs to be shown horizontally thus I created an other larger div “.group” in order to contain all of them and I display it as the table and the I display the other divs inside it to be table-cell because I wanted those divs to be shown horizontally . I don’t know whether my solution is correct or not. Third I don’t know how can I copy all of my total code here that won’t be shown fragmented. Is there any kind of quot here to put my code inside it?

Click the </> button and paste your code to replace the tip:

type or paste code here

Though mixed tab/space indenting display poorly. :wink:

1 Like

I appreciate if anyone suggest me to improve my code. In addition, unfortunately the button’s height doesn’t expand to have the same height as the other inputs. And the result in https://www.cubicfactory.com/jseditor/ shows me the 2 inputs heights aren’t expanded the same as the label’s height!

but the result in Mozila firefox developer is like the picture below:

I don’t know why there is difference in showing the height of inputs in them! After all I want the search bar to be shown in the middle of the blue div. I would be appreciate if any one helps me to solve this problem.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>

<title> HTML5 Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- Add jQuery to your website if you don't have it already -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script>
$(function() {
	$("#searchinput").click(function() {
		if ($("#searchinput").val() == "Search our website"){
			$("#searchinput").val(""); 
		}
	});
	$("#cityinput").click(function() {
		if ($("#cityinput").val() == "city"){
			$("#cityinput").val(""); 
		}
	});
});
</script>
<style>
#tfnewsearch{  width: 100%; height:100%;}
#tfheader{
  background-color:#c3dfef;
  position: relative;
  top:135px;
  height:250px;
  width:100%;
}


.tftext{
	margin: 0;
	width: 210px;
	height:100%;	
	position: relative;
	line-height: 50px;  
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
	border:1px solid #0076a3; 
	border-left-style:none;
	border-right-style:none;
	box-sizing: border-box;
}

	.labeldiv{
	
	width:55px;
    vertical-align: middle; 
    line-height: 50px;
	color: #000000;
	background-color: #ffffff;
	border:1px solid #0076a3;
	border-right-style:none;
	display:table-cell;
	}

.group: before,
.group: after{
   content:"";
   position: relative;
    top:50%;
   left:27%;   
 
   width: 100%;
   display: table;
   margin: 0 auto 0 auto;
   clear: both;
     background-color:red;
}
.inputdiv{
   vertical-align: top;
   position: relative;
  line-height: 50px;
   width: 300 px;
   display:table-cell;
   border:1px solid black;
}

.tfbutton2 {
	float: left;
	display:block;
    width: 100%;
	box-sizing: border-box;
	<!--height: 100%;-->
    line-height:50 px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
  border-top-right-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  }
	.tfbutton2:hover {
	float: left;
	display:block;
		text-decoration: none;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background: -moz-linear-gradient(top,  #0095cc,  #00678e);
		
	}
	/* Fixes submit button height problem in Firefox */
	.tfbutton2::-moz-focus-inner {
	float: left;
	display:block;
	  border: 0;
	  
	}
.tfclear{ clear:both; }

</style>

</head>
<body>
  <form id="tfnewsearch" method="get" action="http://www.google.com" >
	<div id="tfheader">
		<div class="group" style="border:1px solid green;">
					<div class="labeldiv"  style="border-top-left-radius: 5px 5px; border-bottom-left-radius: 5px 5px; padding: 0px 7px;" >Find</div>		
				<div class="inputdiv">
					<input type="search" id="searchinput" class="tftext tftextinput1" name="q" maxlength="120" placeholder="Search our website">
				</div>
					<div class="labeldiv">Near</div>
				<div class="inputdiv">			
					<input type="search" id="cityinput" class="tftext tftextinput2" name="q" maxlength="120" placeholder="city">				  	 
				</div>
					<div style="display:table-cell; width: 35 px; height: 35 px;">
						<button type="submit" class="tfbutton2"><i class="fa fa-search"></i></button>					
					</div>
						<div class="tfclear"></div>
		</div>
	</div>
  </form>
</body>
</html>

I’d do it roughly like this assuming you are still trying for the centred full width version example you linked to.

https://codepen.io/paulobrien/pen/dybEeVy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Test Page</title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- Add jQuery to your website if you don't have it already -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script>
$(function() {
	$("#searchinput").click(function() {
		if ($("#searchinput").val() == "Search our website"){
			$("#searchinput").val(""); 
		}
	});
	$("#cityinput").click(function() {
		if ($("#cityinput").val() == "city"){
			$("#cityinput").val(""); 
		}
	});
});
</script>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.tfnewsearch {
	background-color:#c3dfef;
	padding:10px 0;
	margin:1rem;
}
.tfheader {
	max-width:1180px;
	padding:0 10px;
	margin:auto;
	display:flex;
	border-radius:4px;
}
.tftext {
	margin: 0;
	padding:5px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
	border:1px solid #0076a3;
	border-left-style:none;
	border-right-style:none;
}
.tftext {
	flex:1 0 0%;
	height:2rem;
}
.tfbutton2 {
	min-width:50px;
	margin:0;
	padding:0;
	background: #2196F3;
	color: white;
	font-size: 17px;
	border: 1px solid grey;
	border-left: none; /* Prevent double borders */
	cursor: pointer;
	border-radius: 0 5px 5px 0;
}
.mylabel {
	display:flex;
	align-items:center;
	padding:0 20px 0 10px;
	border:1px solid #0076a3;
	background:#fff;
}
.mylabel:first-child {
	border-radius:5px 0 0 5px;
}
.tfbutton2:hover {
	background: #007ead;
	background: linear-gradient(#0095cc, #00678e);
}
@media screen and (max-width:700px){
	.tfheader {flex-wrap:wrap}
	.tfheader > *{ border-radius:0;flex:1 0 100%;}
	.tfheader .mylabel{border:none;background:transparent;margin:0 0 3px;}
    .tftext{border:1px solid #0076a3;margin:0 0 10px;} 
	.tfbutton2{max-width:100px;margin:10px auto;border-radius:5px}
}

</style>
</head>
<body>
<form id="tfnewsearch" class="tfnewsearch" method="get" action="http://www.google.com" >
  <div class="tfheader">
    <label class="mylabel" for="searchinput">Find</label>
    <input type="search" id="searchinput" class="tftext tftextinput1" name="q" maxlength="120" placeholder="Search our website">
    <label class="mylabel" for="cityinput">Near</label>
    <input type="search" id="cityinput" class="tftext tftextinput2" name="q" maxlength="120" placeholder="city">
    <button type="submit" class="tfbutton2"><i class="fa fa-search"></i></button>
  </div>
</form>
</body>
</html>

Please run your code through the CSS & html validators as there are loads of typos in your code and you will learn a lot more by debugging them yourself rather than me pointing them out to you :slight_smile:

Hi @PaulOB,

I like your demo, and with a few changes, I think it could also adapt to current font-size. :slightly_smiling_face:

Try put these overrides last in the css:

.tfnewsearch {
	font-size:24px; /* e.g. */
}
.tftext {
	height:auto; /* reset to allow self-stretch, was 2em */
	align-self:stretch;; /* added, to adapt its height */
	font-size:inherit; /* added */
}
.mylabel {
	align-items:initial; /* reset, to level with the input */
}
.tfbutton2 {
	font-size:inherit; /* added */
}

Hope I did no typo or thinko. :slightly_smiling_face:

Good idea Erik but I didn’t seem to need all those rules. Just basically set the font-size and removed the height.

Updated codepen:

https://codepen.io/paulobrien/pen/dybEeVy

With your code the label text lost its vertical alignment. I guess you may have changed something else :slight_smile:

1 Like

I missed one detail: :wink:

The misalignment was caused by the font-family declaration in the .tftext rule-block.

In you updated Codepen it is moved to the .newsearch block. :slightly_smiling_face:

I tried to amend it by resetting the .mylabel alignment. :blush:

1 Like