Div not appearing as expected

#1

I am sorry for comming again, I found something I do not understand. I am using bs3 form from w3schools, disabbled my experiment, because the div I try to use is not appearing in the container where I defined, however I’ve given size, position and colour , I dont understand why.here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
	.contactdata{
		//display:none;
    }
    .contactmessage{
    	//display:none;
    }
    .container2{
		position: relative;
    	display: inline-block;
        width:50%;
        float:left;
		transform: translate(-100px,0px); /* Standard syntax */
}
     }
	.container3{
	    position:absolute;
		top:0;
		left:0;
		width:300px;
		height:400px;
		background-color:yellow;
		//overflow-x:auto;
	} 
  </style>
  
  <script>
  </script>
</head>
<body>
<div class="container" style="background:pink;width:60%;min-height:300px;">
	<div class="container3" style="background:blue;"><!--
		<div class="container container2" style="background:lightgreen;">
		  
		  <form class="contactdata" action="/action_page.php">
		  <h2>Vertical (basic) form1</h2>
			<div class="form-group">
			  <label for="email">Email:</label>
			  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
			</div>
			<div class="form-group">
			  <label for="pwd">Password:</label>
			  <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
			</div>
			<div class="checkbox">
			  <label><input type="checkbox" name="remember"> Remember me</label>
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		  </form>
		  </div>
		  <div class="container container2" style="background:cyan;">
		  
		  <form class="contactmessage" action="/action_page.php">
		  <h2>Vertical (basic) form2</h2>
			<div class="form-group">
			  <label for="email">Email:</label>
			  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
			</div>
			<div class="form-group">
			  <label for="pwd">Password:</label>
			  <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
			</div>
			<div class="checkbox">
			  <label><input type="checkbox" name="remember"> Remember me</label>
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		  </form>
		</div>-->
	</div>
</div>
</body>
</html>

0 Likes

Check empty input with jquery
#2

This is a completely different question to the JS questions and you should have posted this as a new thread in the CSS forum rather than muddy the waters here.

If you are talking about .container3 with the blue background then it is in place but you can’t see it because it has no content and therefore its height is zero.

0 Likes

#3

Moved. smile

2 Likes

#4

yes, I am sorry for that, I will do that, thank you, frank

0 Likes