How can I get the background image in full screen - html

I am just new to html ,and was deigning this page, I want the image to completely cover the background but rather it is showing something like this (pic given).
What should i change so that I can get a complete view (image covering the back ground completely.)
Here is my code.
Thanks in advance.
.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Imperial</title>
<meta name="author" content="">
<meta name="description" content="">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--[if IE 7]><link href="css/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/framework.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style1.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- Contact Form CSS files -->
<link type="text/css" href="./js-disclaimer/basic.css" rel="stylesheet" media="screen">
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type='text/css' href='js-disclaimer/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type="text/javascript" src="./js-disclaimer/jquery.js"></script>
<script type="text/javascript" src="./js-disclaimer/jquery.simplemodal.js"></script>
<script type="text/javascript" src="./js-disclaimer/basic.js"></script>
</head>
<body id="Body" style="zoom: 1;" class="cover">
<i class="icon-eye-close icon-2x"></i>
<div class="wrappers" style="background-image:url(./img/waw.jpg);">
<!-- home -->
<div class="main">
<!---- menu area--->
<div class="menu_area"> <img src="./img/logo.png" alt=""> <br>
<ul>
<li class="current">Home</li>
<li>World above the world</li>
<li>Spaces</li>
<li>Safety & Security</li>
<!----<li>Plans</li>--->
<li>Plans</li>
<!----<li>Location</li>--->
<li>Location</li>
<li>Enquiry</li>
<li>Contact Us</li>
<br>
<br>
<li>About SD Corp.</li>
<li>ebrochure</li>
<!--<li>E-Brochure</li>-->
</ul>
</div>
<div class="content">
<div id="loader"></div>
<ul class="grid blog one-col">
<li class="enquiry" style="height:600px;">
<div class="enquiry">
<h1 style="text-align:center; margin-left:-40px; font-size:large;"><b>Fill in the spaces below</b></h1>
<form onsubmit="return validation();" action="feedback_action.asp" method="post" name="form">
<table cellspacing="5" cellpadding="0" style="margin:10px;" class="c">
<tbody><tr>
<td colspan="2"><table width="100%" cellspacing="0" cellpadding="0" border="0" class="c">
<tbody><tr>
<td>You Are a : </td>
<td><input type="radio" value="buyer" name="youare"> Buyer</td>
<td><input type="radio" value="agent" name="youare"> Agent</td>
<td><input type="radio" value="other" name="youare"> Other</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td><label>Name</label></td>
<td><label>Mobile</label></td>
</tr>
<tr>
<td><input type="text" size="32" name="nameinput" id="userInput" value=""></td>
<td><input type="text" size="30" name="mobileinput" id="Phone" value=""></td>
</tr>
<tr>
<td>Address</td>
<td>Landline</td>
</tr>
<tr>
<td rowspan="3"><textarea name="addressinput" cols="26" rows="4"></textarea></td>
<td><input type="text" name="landlineinput" size="30"></td>
</tr>
<tr>
<td>E-mail</td>
</tr>
<tr>
<td><input type="text" name="emailinput" style="" height="20"></td>
</tr>
<tr>
<td>Country</td>
<td>City</td>
</tr>
<tr>
<td><select name="countryinput">
<option selected="selected" value="">Select Country</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'ivoire">Cote D'ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-bissau">Guinea-bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Republic of">Korea</option>
<option value="Korea, Republic of">Korea</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States of">Micronesia</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Taiwan, Province of China">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-leste">Timor-leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">British</option>
<option value="Virgin Islands, U.S.">U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select></td>
<td><input type="text" name="cityinput" size="20"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" id="submit" value="Submit" name="submit"></td>
</tr>
</tbody></table>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer" id="basic-modal" style="color:#000000;">&copy SDCPL 2013. All Rights Reserved | Disclaimer</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Disclaimer</h3>
<p>The content depicted herein is for general information and purely conceptual and is not legal offering nor will it be part of any binding document. The Developer reserves the right to delete, modify or supplement the content at any time for any reason without prior notification.</p>
</div>
</div>
<!--LOAD SCRIPTS-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/plugins.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>

For CSS3, add this style to your page using background-size:cover;:
<style>
html {
background: url(YOUR IMAGE URL HERE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE 9 and under*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
</style>
If necessary, here is a non-css3 solution:
CSS:
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
width: auto;
height: auto;
}
Body HTML:
<div class="bg">
<img src="YOUR IMAGE URL HERE" alt="">
</div>

Use it like this
body{
background:url("img_flwr.gif");
background-size:100% 100%;
background-repeat:no-repeat;
}

I would recommend using a library like jquery.backstretch.js which can be found here: http://srobbin.com/jquery-plugins/backstretch/

Just take for bg properties:
.bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('image.jpg');
background-size: cover;
background-position: center;

Related

What is the best way to stack input fields along with labels side by side in a form. (Without making it apply to the whole form)

Super noob question here. I'm wanting to know how I can stack two input fields and labels side by side. I've managed to get most of my document lined up and sized. I thought the solution would be to group both the inputs and labels I want side by side in a div, and add the code:
style="display: inline-block;
But that didn't work. Any tips?
<style>
body {
margin: 0;
padding: 0;
}
div {
display: inline;
grid-template-columns: max-content;
grid-gap: 5px;
}
fieldset {
border: 0px;
}
form {
background-color: #FDD2BF;
width: 600px;
}
h1 {
margin: 0;
}
input {
border-radius: 20px;
border: 0px;
text-align: center;
}
label {
display: block;
}
select {
border-radius: 20px;
border: 0px;
width: 48%;
}
</style>
<body>
<form action="" method="POST">
<h1>Customer Profile</h1>
<fieldset>
<legend>Customer Information</legend>
<div>
<label for="date">Date</label>
<input type="date" name="date" id="date">
</div>
<div>
<label for="companyname">Company Name</label>
<input type="text" name="companyname" id="companyname" size="80">
</div>
<div>
<div>
<label for="streetname">Address</label>
<input type="text" name="address" id="streetname" placeholder="Street Name" size="80">
<div>
<input type="text" name="address" id="streetcontinued" size="80">
</div>
</div>
<div style="display: inline-block;">
<input type="text" name="address" id="city" placeholder="City" size="40">
<input type="text" name="address" id="region" placeholder="Region" size="38">
</div>
<div style="display: inline-block;">
<input type="text" name="address" id="zipcode" placeholder="Postal/Zip" size="40">
<select id="country" name="country">
<option>Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, Democratic Republic of the Congo</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Cote D'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curacao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and Mcdonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="XK">Kosovo</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libyan Arab Jamahiriya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the Former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthelemy</option>
<option value="SH">Saint Helena</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="CS">Serbia and Montenegro</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.s.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<div>
<label for="companyphone">Phone</label>
<input type="tel" name="companyphone" id="companyphone" size="80">
</div>
</fieldset>
<fieldset>
<legend>Company Representative</legend>
<div>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="First Name">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name">
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email">
<label for="jobtitle">Job Title</label>
<select name="jobtitle" id="jobtitle">
<option value="choose">Job Title</option>
<option value="Transportation Manager">Transportation Manager</option>
<option value="Driver">Driver</option>
<option value="Agent">Agent</option>
<option value="Owner">Owner</option>
</select>
</div>
<div>
<label for="contactphone">Phone</label>
<input type="contactphone" name="contactphone" id="contactphone" size="80">
</div>
</fieldset>
</form>
</body>
</html>
It is very simple check the code below
.flex {
display: flex;
}
label {
flex-shrink: 0; /* so the lengthy label will not get stacked */
}
input {
margin-left: 1rem;
}
<div class="flex">
<label for=""> Company </label>
<input type="text" />
</div>
<div class="flex">
<label for=""> Email </label>
<input type="email" />
</div>
Let me know if this what you wanted?? I just showed you how its done you can implement this in your entire code accordingly.

Elements get out of the div on making the screen responsive

I have the following block of code, The problem with this is that it tends to get out of the aircard div when making the screen responsive, I dont know for what reason as shown in the picture,whereas they should stack over one another. What's the reason that they are not being responsive and how can I make them responsive. The code is as follows:
HTML:
<div class="container-fluid">
<div class="air-card">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 col-xs-offset-0">
<h2 class="text-center hidden-xs m-sm-bottom ng-scope"> Complete Your Account </h2>
<h4 class="text-center ng-binding ng-scope"> Yourname#gmail.com </h4> <br>
<form method="POST" action="confirm.html">
<!--<i class="fas fa-globe">--><select> <!-- </i> -->
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
</select> <br> <br>
<input type="password" name="" placeholder="Create a Password" required> <br> <br>
<h4 style="text-align: center;"> I want to: </h4>
<div class="btn-group btn-group-lg" align="center" style="margin-left: 400px; position: relative; border: 1px solid black;">
<button type="button" class="btn btn-light">Hire for a Project</button>
<button type="button" class="btn btn-light"> Work as a Freelancer </button>
</div> <br> <br>
<div class="custom-control custom-checkbox" style="margin-left:380px;">
<!--<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"> <div class="custom-control custom-checkbox">-->
<input type="checkbox" class="custom-control-input" id="customCheck1"">
<label class="custom-control-label" for="customCheck1"> Yes! Send me genuinely useful emails every now and then to help me get the most out of Extolssolutions. </label>
<input type="checkbox" class="custom-control-input" id="customCheck1"">
</div></label>
<div class="custom-control custom-checkbox" style="margin-left:380px;">
<!--<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"> <div class="custom-control custom-checkbox">-->
<input type="checkbox" class="custom-control-input" id="customCheck1" required>
<label class="custom-control-label" for="customCheck1" required> Yes, I understand and agree to the Extols Solutions Terms of Service , including the User Agreement and Privacy Policy. </label> <br> <br>
<input type="checkbox" class="custom-control-input" id="customCheck1"">
</div>
<button type="submit" class="btn btn-success"> Next </button>
</form>
</div>
</div>
</div>
</div>
CSS:
.air-card {
position: relative;
background-color: #fff;
margin: 30px 0px;
padding: 30px;
box-shadow: 0 1px 6px rgba(57,73,76,.35);
}
select
{
margin-left: 420px;
}
input[type='password']
{
margin-left: 420px;
width: 354px;
}
input[type='checkbox']
{
margin-left: 420px;
text-align: center;
}
label a:hover
{
color: green;
}
button[type='submit']
{
margin-left: 550px;
margin-top: 20px;
width: 8%;
}
.row a
{
color: #747676;
font-family: Arial,sens-serif;
}
JSBIN: http://jsbin.com/dupihupugu/1/edit?html,css,console,output
P.S, I'm relatively a newbie to both CSS,Bootstrap 4 as well as Stack overflow,so please go easy on me
[The full screen page][The responsive screen page]1
Try this
nav
{
background-color: #FFFFFF;
}
nav ul li
{
text-decoration: none;
}
a.navbar-brand
{
margin-left: 100px;
margin-right: 500px;
}
li
{
text-align: right;
}
p
{
display: block;
margin-bottom: 0px;
}
.footer-navbar-wrapper {
background-color: #494949;
}
.copyright
{
color: #E0E0D6;
}
.row a
{
color: #747676;
font-family: Arial,sens-serif;
}
footer
{
padding-top: 40px;
padding-bottom: 20px;
position: relative;
}
.air-card {
position: relative;
background-color: #fff;
margin: 30px 0px;
padding: 30px;
box-shadow: 0 1px 6px rgba(57,73,76,.35);
}
select
{
margin-left: 420px;
}
input[type='password']
{
width: 354px;
}
input[type='checkbox']
{
text-align: center;
}
label a:hover
{
color: green;
}
button[type='submit']
{
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Signup</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Sign Up Module </title>
<style type="text/css">
</style>
</head>
<body>
<header class="header-navbar-wrapper header-navbar-skinny ng-scope" role="banner" data-ng-controller="headerController">
<nav class="primary-navbar navbar navbar-default" role="navigation">
<a class="navbar-brand" href="#"><img src="logo.jpg"></a>
<ul class="navbar-nav">
<!--<li class="nav-item"> <a class="nav-link" href="#"> <span style="color: #6FDA44"> Extols </span> <span style="color: #4B4B4B"> Solutions</span> </a> </li>-->
<div style="text-align: center;">
<li class="nav-item"> <p> <span class="navbar-text" style="color: #767676">Already Have an Account?</span> <a class="nav-link" href="#" style="color: #178329">Log in</a></p></li>
</div>
</ul>
</nav>
</header>
<div class="container-fluid">
<div class="air-card">
<div class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 col-xs-offset-0">
<h2 class="text-center hidden-xs m-sm-bottom ng-scope"> Complete Your Account </h2>
<h4 class="text-center ng-binding ng-scope"> Yourname#gmail.com </h4> <br>
<form method="POST" action="confirm.html">
<!--<i class="fas fa-globe">--><div align="center">
<select > <!-- </i> -->
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US" selected>United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select> <br> <br>
</div>
<div align="center">
<input type="password" name="" placeholder="Create a Password" required> <br> <br>
</div>
<div align="left">
<h4 style="text-align: center;"> I want to: </h4>
<div class="btn-group btn-group-lg" align="center" style=" border: 1px solid black;margin-left:21%">
<button type="button" class="btn btn-light">Hire for a Project</button>
<button type="button" class="btn btn-light"> Work as a Freelancer </button>
</div> <br> <br>
<div class="custom-control custom-checkbox" style="margin-left:200px;">
<!--<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"> <div class="custom-control custom-checkbox">-->
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"> Yes! Send me genuinely useful emails every now and then to help me get the most out of Extolssolutions. </label>
<input type="checkbox" class="custom-control-input" id="customCheck1">
</div>
<div class="custom-control custom-checkbox" style="margin-left:200px;">
<label class="custom-control-label" for="customCheck1"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" required>
<label class="custom-control-label" for="customCheck1" required> Yes, I understand and agree to the Extols Solutions Terms of Service , including the User Agreement and Privacy Policy. </label> <br> <br>
<input type="checkbox" class="custom-control-input" id="customCheck1">
</div></div>
<div align="center">
<button type="submit" class="btn btn-success btn-lg"> Next </button>
</div> </form>
</div><br/>
</div>
</div>
</div>
<footer class="footer-navbar-wrapper footer-skinny ng-scope" role="contentinfo" data-ng-controller="footerController">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p class="copyright" > © 2015-2018 Extols Solutions Inc </p>
Terms of Service
<br>
Privacy Policy
</div>
</div>
</div>
</footer>
</body>
</html>

How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

I want to create a centered form.
HTML:
<div id="profileContainer”>…</div>
CSS:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px;
width: 100%;
max-width: 760px;
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
The problem is when the screen is vertically shorter, part of the form gets hidden, and no scrollbars appear to make it accessible: JSFiddle.
Question:
How do I get scrollbars to appear when vertical space alone is insufficient, but keep my div centered horizontally and vertically when there is enough space?
I would change the CSS rule for #profileContainer like this:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px;
width: 90%;
max-width: 760px;
display: block;
position: relative;
margin: 30px auto 0;
}
position: relative instead of fixed, less width, since 100% plus the padding exceeds the container width. margin: 0 auto to center horizontally instead of left: 50% and transformX(-50%). Fixed margin top instead of vertical centering to avoid the effect you describe.
Fiddle: http://jsfiddle.net/qacv17gq/1/
Addition: Except with javascript/jQuery you won't be able to center a container vertically and not have parts of it hidden with no scrollbar when the window/screen height is less than the container's height.
This can easily be achieved with flexbox by simply removing all of the positioning from #profileContainer and adding the following rules to body:
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
The first three rules will center #profileContainer while the last one makes sure that the body will always be at least the full height of the view.
JSFiddle doesn't show the last rule correctly and your example is too big to embed it here, so I moved it over to codepen.
As a side note, you have an extra closing div tag just before you close main.
It's 2016, everyone! Time to start relying on CSS Flexbox to center our elements and retire our beloved translate(-50%, -50%) hack.
CodePen
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#profileContainer {
width: 760px;
max-width: 100vw;
max-height: 100vh;
overflow-y: scroll;
}
The <body> serves as our flex container. justify-content: center and align-items: center will center the form. max-width and max-height will keep the form from exceeding the boundaries of the window.
No positioning needed!
I think this is the answer you are looking for... Just go through this code
If you have any query ask me
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="profileContainer" class="container-fulid">
<div class="col-md-8 col-xs-8 col-xs-offset-2 col-md-offset-2" style="border:1px solid #000;padding:0px;border-radius:4px">
<header>
<nav class="navbar navbar-inverse" style="">
<div class="navContainer">
<div id="navbar">
<div id="leftNavSection">
</div>
<div id="rightNavSection" style="color:#fff">
Logged in as Dave A
<a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container-fulid">
<!-- User's profile -->
<div id="profile" >
<div class="col-lg-12">
<div class="col-md-8 col-md-offset-2">
<h2>Profile Information</h2>
<form class="edit_user" id="edit_user_38" action="/users/38" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="wh3mbAtBBAMrOqPUdqGMY5aHns3EZ/tVQDRHhcA1A2ZqXKgDE+VKG7Gj/NyjySKngvorjjq8rVMc/n8LOE4Pgg==" />
<div class="profileField">
<label for="user_first_name">First name</label><br/>
<div class="field"><input size="20" class="textField form-control" type="text" value="Dave" name="user[first_name]" id="user_first_name" style="width:50%"/></div>
</div>
<div class="profileField">
<label for="user_last_name">Last name</label><br/>
<div class="field"><input size="20" class="textField form-control" type="text" value="A" name="user[last_name]" id="user_last_name" style="width:50%"/></div>
</div>
<div class="profileField">
Birthday<br/>
<div class="col-lg-4">
<select id="user_dob_2i" name="user[dob(2i)]" class="form-control">
<option value="">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_3i" name="user[dob(3i)]" class="form-control">
<option value="">Select Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_1i" name="user[dob(1i)]" class="form-control">
<option value="">Select Year</option>
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>
<option value="1908">1908</option>
<option value="1909">1909</option>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
</div>
<div class="profileField address">
<label for="user_address_attributes_address">Home Town</label><br/>
<div class="col-lg-4">
<div class="field"><input placeholder="City" class="textField form-control" type="text" name="user[address_attributes][city]" id="user_address_attributes_city" /></div>
</div>
<div class="col-lg-4">
<select class="selectField selectMenu form-control" name="user[address_attributes][state_id]" id="user_address_attributes_state_id"><option value="">Select State</option>
<option value="3526">Alabama</option>
<option value="3556">Alaska</option>
<option value="3547">Arizona</option>
<option value="3510">Arkansas</option>
<option value="3542">California</option>
<option value="3543">Colorado</option>
<option value="3527">Connecticut</option>
<option value="3512">Delaware</option>
<option value="3513">Florida</option>
<option value="3514">Georgia</option>
<option value="3555">Hawaii</option>
<option value="3548">Idaho</option>
<option value="3529">Illinois</option>
<option value="3530">Indiana</option>
<option value="3528">Iowa</option>
<option value="3515">Kansas</option>
<option value="3557">Kentucky</option>
<option value="3516">Louisiana</option>
<option value="3531">Maine</option>
<option value="3517">Maryland</option>
<option value="3558">Massachusetts</option>
<option value="3532">Michigan</option>
<option value="3533">Minnesota</option>
<option value="3519">Mississippi</option>
<option value="3518">Missouri</option>
<option value="3549">Montana</option>
<option value="3534">Nebraska</option>
<option value="3545">Nevada</option>
<option value="3535">New Hampshire</option>
<option value="3536">New Jersey</option>
<option value="3544">New Mexico</option>
<option value="3537">New York</option>
<option value="3520">North Carolina</option>
<option value="3550">North Dakota</option>
<option value="3538">Ohio</option>
<option value="3521">Oklahoma</option>
<option value="3551">Oregon</option>
<option value="3559">Pennsylvania</option>
<option value="3539">Rhode Island</option>
<option value="3522">South Carolina</option>
<option value="3552">South Dakota</option>
<option value="3523">Tennessee</option>
<option value="3524">Texas</option>
<option value="3546">Utah</option>
<option value="3540">Vermont</option>
<option value="3560">Virginia</option>
<option value="3553">Washington</option>
<option value="3511">Washington, D.C.</option>
<option value="3525">West Virginia</option>
<option value="3541">Wisconsin</option>
<option value="3554">Wyoming</option></select>
</div>
<div class="col-lg-4">
<select id='user[address]_country_id' name='user[address][country_id]' class="form-control">
<option value="0">-- Select --</option><option value="38">Canada</option><option value="233" selected>United States</option><option value="0" disabled="disabled">----------------------------</option><option value="3">Afghanistan</option>
<option value="15">Aland Islands</option>
<option value="6">Albania</option>
<option value="62">Algeria</option>
<option value="11">American Samoa</option>
<option value="1">Andorra</option>
<option value="8">Angola</option>
<option value="5">Anguilla</option>
<option value="9">Antarctica</option>
<option value="4">Antigua and Barbuda</option>
<option value="10">Argentina</option>
<option value="7">Armenia</option>
<option value="14">Aruba</option>
<option value="13">Australia</option>
<option value="12">Austria</option>
<option value="16">Azerbaijan</option>
<option value="32">Bahamas</option>
<option value="23">Bahrain</option>
<option value="19">Bangladesh</option>
<option value="18">Barbados</option>
<option value="36">Belarus</option>
<option value="20">Belgium</option>
<option value="37">Belize</option>
<option value="25">Benin</option>
<option value="27">Bermuda</option>
<option value="33">Bhutan</option>
<option value="29">Bolivia</option>
<option value="30">Bonaire, Saint Eustatius and Saba </option>
<option value="17">Bosnia and Herzegovina</option>
<option value="35">Botswana</option>
<option value="34">Bouvet Island</option>
<option value="31">Brazil</option>
<option value="106">British Indian Ocean Territory</option>
<option value="239">British Virgin Islands</option>
<option value="28">Brunei</option>
<option value="22">Bulgaria</option>
<option value="21">Burkina Faso</option>
<option value="24">Burundi</option>
<option value="117">Cambodia</option>
<option value="47">Cameroon</option>
<option value="38">Canada</option>
<option value="52">Cape Verde</option>
<option value="125">Cayman Islands</option>
<option value="41">Central African Republic</option>
<option value="215">Chad</option>
<option value="46">Chile</option>
<option value="48">China</option>
<option value="54">Christmas Island</option>
<option value="39">Cocos Islands</option>
<option value="49">Colombia</option>
<option value="119">Comoros</option>
<option value="45">Cook Islands</option>
<option value="50">Costa Rica</option>
<option value="98">Croatia</option>
<option value="51">Cuba</option>
<option value="53">Curacao</option>
<option value="55">Cyprus</option>
<option value="56">Czech Republic</option>
<option value="40">Democratic Republic of the Congo</option>
<option value="59">Denmark</option>
<option value="58">Djibouti</option>
<option value="60">Dominica</option>
<option value="61">Dominican Republic</option>
<option value="221">East Timor</option>
<option value="63">Ecuador</option>
<option value="65">Egypt</option>
<option value="210">El Salvador</option>
<option value="88">Equatorial Guinea</option>
<option value="67">Eritrea</option>
<option value="64">Estonia</option>
<option value="69">Ethiopia</option>
<option value="72">Falkland Islands</option>
<option value="74">Faroe Islands</option>
<option value="71">Fiji</option>
<option value="70">Finland</option>
<option value="75">France</option>
<option value="80">French Guiana</option>
<option value="176">French Polynesia</option>
<option value="216">French Southern Territories</option>
<option value="76">Gabon</option>
<option value="85">Gambia</option>
<option value="79">Georgia</option>
<option value="57">Germany</option>
<option value="82">Ghana</option>
<option value="83">Gibraltar</option>
<option value="89">Greece</option>
<option value="84">Greenland</option>
<option value="78">Grenada</option>
<option value="87">Guadeloupe</option>
<option value="92">Guam</option>
<option value="91">Guatemala</option>
<option value="81">Guernsey</option>
<option value="86">Guinea</option>
<option value="93">Guinea-Bissau</option>
<option value="94">Guyana</option>
<option value="99">Haiti</option>
<option value="96">Heard Island and McDonald Islands</option>
<option value="97">Honduras</option>
<option value="95">Hong Kong</option>
<option value="100">Hungary</option>
<option value="109">Iceland</option>
<option value="105">India</option>
<option value="101">Indonesia</option>
<option value="108">Iran</option>
<option value="107">Iraq</option>
<option value="102">Ireland</option>
<option value="104">Isle of Man</option>
<option value="103">Israel</option>
<option value="110">Italy</option>
<option value="44">Ivory Coast</option>
<option value="112">Jamaica</option>
<option value="114">Japan</option>
<option value="111">Jersey</option>
<option value="113">Jordan</option>
<option value="126">Kazakhstan</option>
<option value="115">Kenya</option>
<option value="118">Kiribati</option>
<option value="123">Kosovo</option>
<option value="124">Kuwait</option>
<option value="116">Kyrgyzstan</option>
<option value="127">Laos</option>
<option value="136">Latvia</option>
<option value="128">Lebanon</option>
<option value="133">Lesotho</option>
<option value="132">Liberia</option>
<option value="137">Libya</option>
<option value="130">Liechtenstein</option>
<option value="134">Lithuania</option>
<option value="135">Luxembourg</option>
<option value="149">Macao</option>
<option value="145">Macedonia</option>
<option value="143">Madagascar</option>
<option value="157">Malawi</option>
<option value="159">Malaysia</option>
<option value="156">Maldives</option>
<option value="146">Mali</option>
<option value="154">Malta</option>
<option value="144">Marshall Islands</option>
<option value="151">Martinique</option>
<option value="152">Mauritania</option>
<option value="155">Mauritius</option>
<option value="246">Mayotte</option>
<option value="158">Mexico</option>
<option value="73">Micronesia</option>
<option value="140">Moldova</option>
<option value="139">Monaco</option>
<option value="148">Mongolia</option>
<option value="141">Montenegro</option>
<option value="153">Montserrat</option>
<option value="138">Morocco</option>
<option value="160">Mozambique</option>
<option value="147">Myanmar</option>
<option value="161">Namibia</option>
<option value="170">Nauru</option>
<option value="169">Nepal</option>
<option value="167">Netherlands</option>
<option value="251">Netherlands Antilles</option>
<option value="162">New Caledonia</option>
<option value="172">New Zealand</option>
<option value="166">Nicaragua</option>
<option value="163">Niger</option>
<option value="165">Nigeria</option>
<option value="171">Niue</option>
<option value="164">Norfolk Island</option>
<option value="121">North Korea</option>
<option value="150">Northern Mariana Islands</option>
<option value="168">Norway</option>
<option value="173">Oman</option>
<option value="179">Pakistan</option>
<option value="186">Palau</option>
<option value="184">Palestinian Territory</option>
<option value="174">Panama</option>
<option value="177">Papua New Guinea</option>
<option value="187">Paraguay</option>
<option value="175">Peru</option>
<option value="178">Philippines</option>
<option value="182">Pitcairn</option>
<option value="180">Poland</option>
<option value="185">Portugal</option>
<option value="183">Puerto Rico</option>
<option value="188">Qatar</option>
<option value="42">Republic of the Congo</option>
<option value="189">Reunion</option>
<option value="190">Romania</option>
<option value="192">Russia</option>
<option value="193">Rwanda</option>
<option value="26">Saint Barthelemy</option>
<option value="200">Saint Helena</option>
<option value="120">Saint Kitts and Nevis</option>
<option value="129">Saint Lucia</option>
<option value="142">Saint Martin</option>
<option value="181">Saint Pierre and Miquelon</option>
<option value="237">Saint Vincent and the Grenadines</option>
<option value="244">Samoa</option>
<option value="205">San Marino</option>
<option value="209">Sao Tome and Principe</option>
<option value="194">Saudi Arabia</option>
<option value="206">Senegal</option>
<option value="191">Serbia</option>
<option value="250">Serbia and Montenegro</option>
<option value="196">Seychelles</option>
<option value="204">Sierra Leone</option>
<option value="199">Singapore</option>
<option value="211">Sint Maarten</option>
<option value="203">Slovakia</option>
<option value="201">Slovenia</option>
<option value="195">Solomon Islands</option>
<option value="207">Somalia</option>
<option value="247">South Africa</option>
<option value="90">South Georgia and the South Sandwich Islands</option>
<option value="122">South Korea</option>
<option value="68">Spain</option>
<option value="131">Sri Lanka</option>
<option value="197">Sudan</option>
<option value="208">Suriname</option>
<option value="202">Svalbard and Jan Mayen</option>
<option value="213">Swaziland</option>
<option value="198">Sweden</option>
<option value="43">Switzerland</option>
<option value="212">Syria</option>
<option value="228">Taiwan</option>
<option value="219">Tajikistan</option>
<option value="229">Tanzania</option>
<option value="218">Thailand</option>
<option value="217">Togo</option>
<option value="220">Tokelau</option>
<option value="224">Tonga</option>
<option value="226">Trinidad and Tobago</option>
<option value="223">Tunisia</option>
<option value="225">Turkey</option>
<option value="222">Turkmenistan</option>
<option value="214">Turks and Caicos Islands</option>
<option value="227">Tuvalu</option>
<option value="240">U.S. Virgin Islands</option>
<option value="231">Uganda</option>
<option value="230">Ukraine</option>
<option value="2">United Arab Emirates</option>
<option value="77">United Kingdom</option>
<option selected="selected" value="233">United States</option>
<option value="232">United States Minor Outlying Islands</option>
<option value="234">Uruguay</option>
<option value="235">Uzbekistan</option>
<option value="242">Vanuatu</option>
<option value="236">Vatican</option>
<option value="238">Venezuela</option>
<option value="241">Vietnam</option>
<option value="243">Wallis and Futuna</option>
<option value="66">Western Sahara</option>
<option value="245">Yemen</option>
<option value="248">Zambia</option>
<option value="249">Zimbabwe</option></select>
</div>
</div>
<div class="profileField">
<label for="user_automatic_import">
<input name="user[automatic_import]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[automatic_import]" id="user_automatic_import" />
Automatically Save Results Matching My Name, Age, and Home Town
</label> </div>
<div class="profileField" style="margin:10px 0px;">
<span class="buttonContainer"><a class="btn btn-danger" data-no-turbolink="true" href="/races/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn btn-success" /></span>
</div>
</form>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
You should change position to absolute.
Update
Change #profileContainer for those 3:
position: absolute;
top: 0;
left: 0;
Remove:
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Update
See how you center element:
#container {
display: table;
position: absolute;
height: 100%;
width: 100%;
background: #000;
}
#cell {
display: table-cell;
vertical-align: middle;
background: #ff0000;
}
#profileContainer {
margin: 0 auto;
width: 300px;
height: 300px;
background: #fff;
}
<div id="container">
<div id="cell">
<div id="profileContainer">
<h2>Profile Information</h2>
<p>Form</p>
</div>
</div>
</div>
Add this to the styling of the element.
#profileContainer {
overflow: scroll;
}
Also, try to nest your content between a div inside the div#profileContainer, in case it doesn't work.
I think if you modify #profileContainer style like as follow then you can achieve the effect you want:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px;
width: 100%;
max-width: 760px;
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: scroll;
overflow-x: hidden;
max-height: 70vh;
}
I did two things, first is added an vertical scroll and second is specified the maximum height that the #profileContainer can take which is 70vh i.e. 70% of the view-port height. You can adjust it as per your needs.
You could add this css's:
#profileContainer {overflow:auto; max-height:100%;}
html, body {height:100%; margin:0;}
JSFIDDLE
Here you are... this is a cross-browser solution, works everywhere, verified and tested, pure css, no-js, clean solution.
I have added the necessary code at the top and commented out what was needed to your main element.
I wrapped everything in a table / table-cell wrapper (styled below)
<div class="profile-wrapper">
<div>
(..your elem)
</div>
</div>
Then styled them as follows:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
.profile-wrapper {
display:table;
width:100%;
height:100%;
}
.profile-wrapper > div {
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
}
Html and body elements have to be given a height:100% to achieve what is requested.
What this does is it creates a table - and it's table-cell inside of it - that occupies the whole screen. Then using the text-align:center and vertical-align:middle you center both horizontally and vertically any display:inline-block element. Since tables expand automatically depending on the content, in case your element is larger than the table-cell dimensions, scrollbars occur..
Here is your updated fiddle.
http://jsfiddle.net/c9btschs/1/
Add following CSS properties along with the #profileContainer
max-height: 85%;
overflow: auto;
This will gives you a scrollbar only if the content is overflown, and the 85% ensures the UI responsive & good looking on all screens
JSFiddle Working Example
Yo need to just change the styles of your profile container:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px 2%;
width: 96%;
max-width: 760px;
margin: 0 auto;
}
Try this http://jsfiddle.net/kiroslim/tcou4dk3/10/!

Drop Down menu not opening

Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
<div class="form-group row">
<label for="location" class="col-sm-3 control-label">Job Location</label>
<div class="col-sm-9">
<select id="location" name="job_location" multiple="" data-placeholder="Enter city and country or leave it blank" class="form-control form-control-chosen jform-chosen-validate" style="display: none;">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 795px;" title="" id="location_chosen"><ul class="chosen-choices"><li class="search-field">
<input type="text" value="Enter a city and country or leave it blank" class="default" autocomplete="off" style="width: 279px;"></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div></div>
</div>
</div>
removing the display:none
according to your code you are using bootstrap after removing it if it not working check the jquery and javascript links pattern
like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
you have style display:none on it change it to block
or you could opt for a (small bit of js) option and go for this
Here is a fiddle
var mytextbox = document.getElementById('country');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function(){
mytextbox.value= " ";
mytextbox.value = mytextbox.value + this.value;
}
textarea, select{display:block; vertical-align:top; height:27px;}
<select id="dropdown">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<textarea id="country"></textarea>
Ref

Submit button image overflowing - HTML

I've just created an image and am using it as a submit button:
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/button.png" width="170" height="40" value="Sign up" class="loudbutton" />
However the image is larger than it should be, it's flowing outside the images border (not css).
You can see the example:
All the blue outside of the black border should not show!
Does anyone have any idea what's going on?
You can see the full HTML at: http://jsfiddle.net/9vsLyhwg/
Thanks
Remove padding: 7px; from .loudbutton, .quietbutton {
#submit {
padding:0;
}
<!doctype html>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://secure.workbooks.com/resources/=QzM/workbooks_signup_form.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://secure.workbooks.com/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://secure.workbooks.com/javascripts/jquery_validate.js"></script>
<title>Signup to Workbooks</title>
<script type="text/javascript">
$(window).load(function() { $("#spinner").fadeOut("fast"); });
</script>
</head><br>
<body>
<div id="spinner"></div>
<div id="wrap">
<div id="main">
<div id="main-body">
<form id="customer_signup_form" method="post">
<input type="hidden" name="edition" id="edition" value="trial"/>
<input name="nickname" id="nickname" class="hide"/>
<table>
<tr>
<td>
<label for="first_name">First Name</label>
</td>
<td>
<input name="first_name" id="first_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="last_name">Last Name</label>
</td>
<td>
<input name="last_name" id="last_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="email">Email</label>
</td>
<td>
<input name="email" id="email" class="required email" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="confirm_email">Email (Confirm)</label>
</td>
<td>
<input name="confirm_email" id="confirm_email" class="required email" equalTo='#email' size="40"/>
</td>
</tr>
<tr>
<td>
<label for="job_role">Job Role</label>
</td>
<td>
<select name="job_role" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1775">Business Leader</option>
<option value="1776">Customer Support: Leader</option>
<option value="1777">Customer Support: Team Member</option>
<option value="1778">Finance: Leader</option>
<option value="1779">Finance: Team Member</option>
<option value="1780">HR: Leader</option>
<option value="1781">HR: Team Member</option>
<option value="1782">Individual Contributor</option>
<option value="1783">Industry Analyst</option>
<option value="1784">Investment Analyst</option>
<option value="1785">IT: Leader</option>
<option value="1786">IT: Team Member</option>
<option value="1787">Journalist</option>
<option value="1788">Marketing: Leader</option>
<option value="1789">Marketing: Team Member</option>
<option value="1790">Office Manager / Assistant</option>
<option value="1791">Operations: Leader</option>
<option value="1792">Operations: Team Member</option>
<option value="1793">Procurement Professional</option>
<option value="1794">Purchasing: Leader</option>
<option value="1795">Purchasing: Team member</option>
<option value="1796">Sales: Leader</option>
<option value="1798">Sales: Team Member</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="telephone">Telephone</label>
</td>
<td>
<input name="telephone" id="telephone" class="required" minlength="10" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="number_of_employees">Number of Employees</label>
</td>
<td>
<input name="number_of_employees" id="number_of_employees" class="required integer" pattern="[0-9]*" size="7"/>
</td>
</tr>
<tr>
<td>
<label for="company_name">Company Name</label>
</td>
<td>
<input name="company_name" id="company_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="industry">Industry</label>
</td>
<td>
<select name="industry" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1721">Agriculture, Forestry & Fishing</option>
<option value="1722">Charity</option>
<option value="1723">Construction</option>
<option value="1725">Education & Training</option>
<option value="1726">Energy: B2B</option>
<option value="1727">Energy: B2C</option>
<option value="1728">Energy: Utilities</option>
<option value="2204">Finance: General</option>
<option value="1729">Finance: B2B</option>
<option value="1730">Finance: B2C</option>
<option value="1731">Finance: Investment Banking</option>
<option value="1732">Finance: Retail Banking</option>
<option value="1733">Government: Local</option>
<option value="1734">Government: National</option>
<option value="1735">Government: National, Local</option>
<option value="1736">Health: B2C</option>
<option value="1737">Health: Government</option>
<option value="1738">Health: Social Care</option>
<option value="1739">Hotels & Restaurants</option>
<option value="2205">Insurance: General</option>
<option value="1740">Insurance: B2B</option>
<option value="1741">Insurance: B2C</option>
<option value="1799">IT & Telecommunications: General</option>
<option value="1742">IT & Telecommunications: Hardware</option>
<option value="1743">IT & Telecommunications: Mobile Operators</option>
<option value="1744">IT & Telecommunications: National Carriers</option>
<option value="1745">IT & Telecommunications: Reseller/Integrator</option>
<option value="1746">IT & Telecommunications: Service Provider</option>
<option value="1747">IT & Telecommunications: Software</option>
<option value="1748">IT & Telecommunications: Vendor</option>
<option value="1749">Leisure</option>
<option value="1750">Manufacturing</option>
<option value="1751">Media & Publishing</option>
<option value="1752">Mining & Quarrying</option>
<option value="1755">Real Estate</option>
<option value="1756">Research & Laboratories</option>
<option value="1759">Services: Accounting</option>
<option value="1760">Services: Advertising, Marketing & Event Management</option>
<option value="1762">Services: Consulting</option>
<option value="1763">Services: Engineering, Architecture & Design</option>
<option value="1765">Services: Legal</option>
<option value="2060">Services: Recruitment & HR</option>
<option value="1767">Services: Other</option>
<option value="1768">Services: Personal Services</option>
<option value="1769">Services: Professional Services</option>
<option value="2062">Trade Association & Professional Bodies</option>
<option value="1772">Transport & Logistics</option>
<option value="1773">Water Supply, Sewerage & Waste Management</option>
<option value="1774">Wholesale, Retail & Distribution</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="current_crm">Current CRM</label>
</td>
<td>
<select name="current_crm" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1503">Salesforce.com</option>
<option value="2495">Microsoft Dynamics CRM Cloud</option>
<option value="1042">Microsoft Dynamics CRM On Network</option>
<option value="1232">Sugar CRM</option>
<option value="1052">Sage CRM</option>
<option value="1053">Saleslogix from Infor (ex Sage)</option>
<option value="1234">Netsuite</option>
<option value="1048">Spreadsheets / None</option>
<option value="1054">Custom/In-house</option>
<option value="2059">Other</option>
<option value="1842">Workbooks</option>
<option value="1504">Access Database</option>
<option value="1051">ACT!</option>
<option value="2157">Aderant CRM</option>
<option value="2491">Base CRM</option>
<option value="2100">Bluecube CRM</option>
<option value="1512">Capsule</option>
<option value="2489">CallPro</option>
<option value="2199">CCH Central</option>
<option value="2397">Charitylog</option>
<option value="2409">CiviCRM</option>
<option value="2092">Clarity</option>
<option value="1507">ClickHQ</option>
<option value="2263">Dealmaker (TAS Group)</option>
<option value="1509">Exact</option>
<option value="2099">FileMaker</option>
<option value="2076">FileVision</option>
<option value="2135">Frontline Data</option>
<option value="1043">Goldmine</option>
<option value="1046">Goldvision</option>
<option value="1505">Highrise</option>
<option value="2137">iMIS</option>
<option value="1840">Industry Specific</option>
<option value="1841">Insightly CRM</option>
<option value="2122">Intouch CRM</option>
<option value="1928">IRIS Integra</option>
<option value="2305">Lagan CRM</option>
<option value="2271">Lexis Nexis InterAction</option>
<option value="1237">Link CRM</option>
<option value="1930">Logical Office</option>
<option value="1044">Maximizer</option>
<option value="2505">Membrain</option>
<option value="2513">Method CRM</option>
<option value="1049">MS Outlook BCM</option>
<option value="1236">Myoffice.net</option>
<option value="1537">NetAge</option>
<option value="2146">Nimble CRM</option>
<option value="1983">Officetalk</option>
<option value="2369">OOMI CRM</option>
<option value="1610">Open CRM</option>
<option value="2200">Only Considering Workbooks</option>
<option value="2182">Onyx CRM</option>
<option value="2106">Open Market</option>
<option value="1510">Oracle</option>
<option value="2327">Orchard CRM</option>
<option value="2179">Pivotal CRM</option>
<option value="2156">Progress CRM</option>
<option value="1984">Prospectsoft</option>
<option value="2155">ProTech</option>
<option value="2102">Raisers Edge - Blackbaud</option>
<option value="1047">Really Simple Systems</option>
<option value="2139">Sage - Edition Unknown</option>
<option value="1206">Salesforce.com - Enterprise Edition</option>
<option value="1041">Salesforce.com - Group Edition</option>
<option value="1205">Salesforce.com - Professional Edition</option>
<option value="2121">Salesnet CRM</option>
<option value="1541">SalesNexus</option>
<option value="1444">Salesorder</option>
<option value="1511">SAP</option>
<option value="2181">Saratoga CRM</option>
<option value="2493">Second CRM</option>
<option value="2201">Siebel</option>
<option value="1929">Shuttleworth</option>
<option value="2105">Spirit</option>
<option value="1985">Superoffiice</option>
<option value="1648">Team Scope</option>
<option value="2097">Technique MIS</option>
<option value="2138">ThankQ</option>
<option value="1229">Tracker RMS</option>
<option value="1513">TSG MRM</option>
<option value="2272">Union Square CRM</option>
<option value="1839">VTiger</option>
<option value="2159">Webchise</option>
<option value="1050">WebCRM</option>
<option value="1045">Zoho</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/button.png" width="170" height="40" value="Sign up" class="loudbutton" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$.extend($.validator.messages, {
min: 'Please choose an option.'
});
$("#customer_signup_form").validate({
submitHandler: function(form) {
$('#submit').attr('disabled', 'disabled').attr('value', 'Registering. Please wait...');
document.body.style.cursor = "progress";
form.submit();
}
});
$("#customer_first_name").focus();
});
//]]>
</script>
</div>
</div>
</div>
</body>
</html>
In your workbooks_signup_form.css css file you have the .loudbutton declaration with...
background-color: rgb(79, 111, 163);
Remove that and the overflow color is removed.
you have used this:
.loudbutton, .quietbutton {
color: #FFF;
border-radius: 0.5em;
background-color: #4F6FA3;
border: medium none;
padding: 7px;
margin: 10px 0px;
float: right;
}
remove background-color: #4F6FA3; and you are good to go.