Trying to align the text on top of the input box - html

I am trying to align the text on top of the input box without manually aligning it. Any pointers on how to do this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input class="select-vehicle-list" list="plate-number-list" id="exampleDataList" placeholder="Plate number">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>

Using the legend tag
You can use the fieldset + legend combo to get a similar effect using pure CSS. See the snippet below:
fieldset {
border-radius: 5px;
width: max-content;
border: 1px solid #D4D4D5;
}
legend {
font-size: 12px;
}
#exampleDataList {
width: 15rem;
border: none;
}
#exampleDataList:focus {
outline: none;
}
<fieldset>
<legend>Select Plate number</legend>
<div class="select-vehicle">
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
</fieldset>
Alternative
You can give label a relative position and move it towards the position like in the picture you have given. See the snippet below:
.select-vehicle {
display: flex;
flex-direction: column;
}
.form-label {
font-size: 12px;
position: relative;
background: #fff;
width: max-content;
padding-inline: 5px;
top: .5rem;
left: .8rem;
}
#exampleDataList {
width: 15rem;
padding: .8rem 1rem;
border: 1px solid #D4D4D5;
border-radius: 5px;
}
<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
More on css positions here.

In the title "legend" was mentioned and the pic resembles a <fieldset> and Bootstrap has foobared the fieldset to be unrecognizable. Here is the markup with BS classes for a fieldset that resembles a fieldset:
<fieldset class="border rounded p-2">
<legend class="float-none w-auto"></legend>
</fieldset>
I added .h6 and .mb-0 to the <legend> to decrease both font-size and margin-bottom. Are you sure you need a <label> or are you adding more form controls to the fieldset?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container">
<section class="row">
<form>
<fieldset class="border rounded p-2">
<legend class="float-none w-auto mb-0 h6">Select State of Registeration: </legend>
<input id='state' name="state" class="form-control" list="state-list" placeholder='State'>
<datalist id="state-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</fieldset>
</form>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>

Related

Why do my field-set containers overflow at mobile-view, but not at larger screen sizes?

I'm creating a mobile-first responsive website using forms. This is the desired mockup I need to create after 769px. https://ibb.co/LQ0Gwt7. Here is the desired mockup for 769px and below: https://ibb.co/7tbDShb
But why is that before 769px, the contents of my fieldset containers spill out?Whats causing this to happen? I put red borders around certain elements for clarity sake.
Take a look here: https://ibb.co/1J9n8pW
Here`s my CSS and HTML code:
* {
box-sizing: border-box;
}
body {
background: seashell;
font-family: 'Merriweather', serif;
}
.header-content {
text-align: center;
background: #29405a;
color: white;
border: 1px solid #29405a;
}
.signup {
text-align: center;
border-bottom: 2px #29405a dashed;
margin: 0 auto;
width: 90%;
}
.form {
margin: 10px auto;
width: 70%;
background: #feffff;
padding: 30px;
border-radius: 10px;
border: 1px red solid;
}
.field {
padding: 20px;
margin: 0 auto;
border: 3px red solid;
}
/*input styles*/
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
background: #e8eeef;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
border: none;
border-radius: 5px;
padding: 12px 0;
}
button[type="submit"] {
background: #52bab3;
color: #FFF;
padding: 10px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.news-input {
margin-bottom: 20px;
}
.news-input label {
margin-left: 10px;
}
.contact-input {
margin: 20px auto;
border: 1px red solid;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.label {
margin-bottom: 10px;
}
.textarea {
display: flex;
flex-direction: column;
}
.button {
display: flex;
flex-direction: column;
}
.extra-info {
text-align: center;
}
#media (min-width: 768px) {
.contact-input {
display: flex;
flex-direction: row;
}
.label,
.input {
flex: 1;
}
.input {
flex: 3;
}
.zip-input,
.zip-label {
flex: 0;
flex-basis: 25%;
}
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header-content">
<h1>The Code Review</h1>
</div>
</header>
<div class="signup">
<h2>Sign up for our newsletter</h2>
<p>Get the latest news on how your code is doing right in your inbox</p>
</div>
<form action="index.html" get="post" class="form">
<fieldset class="field">
<legend>Contact Information</legend>
<div class="contact-input">
<label class="label" for="name">Name</label>
<input class="input" type="text" id="name" name="user_name">
</div>
<div class="contact-input">
<label class="label" for="mail">Email Address</label>
<input class="input" type="email" id="mail" name="user_email">
</div>
<div class="contact-input">
<label class="label" for="phone-number">Phone Number</label>
<input class="input" type="tel" id="phone-number" name="user_phone">
</div>
<div class="contact-input">
<label class="label" for="street">Street Address</label>
<input class="input" type="text" id="street" name="user_street">
</div>
<div class="contact-input">
<label class="label" for="city">City</label>
<input class="input" type="text" id="city" name="user_city">
</div>
<div class="contact-input">
<label class="label" for="state">State</label>
<select class="input" id="state" name="user_state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="contact-input zip">
<label class="label zip-label" for="zip">Zip Code</label>
<input class="input zip-input" type="text" id="zip" name="user_zipcode">
</div>
</fieldset>
<fieldset class="field">
<legend>Newsletter</legend>
<p>Select the newspaper you'd like to recieve:</p>
<div class="news-input">
<input type="checkbox" id="html-news" name="user_htm-news" checked></input>
<label for="html-news">HTML News</label>
</div>
<div class="news-input">
<input type="checkbox" id="css-news" name="user_css-news">
<label for="css-news">CSS News</label>
</div>
<div class="news-input">
<input type="checkbox" id="javascript-news" name="user_javascript-news">
<label for="javascript-news">Javascript News</label>
</div>
<p>Newsletter Format</p>
<div class="news-input">
<input type="radio" id="html" name="user_newsletter-format" checked>
<label for="html">HTML</label>
</div>
<div class="news-input">
<input type="radio" id="css-news" name="user_newsletter-format">
<label for="css-news">CSS News</label>
</div>
<p>Other topics you'd like to hear about</p>
<div class="textarea">
<textarea id="topics" name="user_topics"></textarea>
</div>
</fieldset>
<div class="button">
<button type="submit">Sign Up</button>
</div>
<div class="extra-info">
<p>Copyright the Code Review</p>
</div>
</form>
</body>
</html>
On small screens you have to set
.form {
width: 100%;
}
otherwise the bigger components will overflow your too small .form div.
* {
box-sizing: border-box;
}
body {
background: seashell;
font-family: 'Merriweather', serif;
}
.header-content {
text-align: center;
background: #29405a;
color: white;
border: 1px solid #29405a;
}
.signup {
text-align: center;
border-bottom: 2px #29405a dashed;
margin: 0 auto;
width: 90%;
}
.form {
margin: 10px auto;
width: 100%; /* SET TO 100% */
background: #feffff;
padding: 30px;
border-radius: 10px;
border: 1px red solid;
}
.field {
padding: 20px;
margin: 0 auto;
border: 3px red solid;
}
/*input styles*/
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
background: #e8eeef;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
border: none;
border-radius: 5px;
padding: 12px 0;
}
button[type="submit"] {
background: #52bab3;
color: #FFF;
padding: 10px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.news-input {
margin-bottom: 20px;
}
.news-input label {
margin-left: 10px;
}
.contact-input {
margin: 20px auto;
border: 1px red solid;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.label {
margin-bottom: 10px;
}
.textarea {
display: flex;
flex-direction: column;
}
.button {
display: flex;
flex-direction: column;
}
.extra-info {
text-align: center;
}
#media (min-width: 768px) {
.form{
width: 70%;
}
.contact-input {
display: flex;
flex-direction: row;
}
.label,
.input {
flex: 1;
}
.input {
flex: 3;
}
.zip-input,
.zip-label {
flex: 0;
flex-basis: 25%;
}
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header-content">
<h1>The Code Review</h1>
</div>
</header>
<div class="signup">
<h2>Sign up for our newsletter</h2>
<p>Get the latest news on how your code is doing right in your inbox</p>
</div>
<form action="index.html" get="post" class="form form_setter">
<fieldset class="field">
<legend>Contact Information</legend>
<div class="contact-input">
<label class="label" for="name">Name</label>
<input class="input" type="text" id="name" name="user_name">
</div>
<div class="contact-input">
<label class="label" for="mail">Email Address</label>
<input class="input" type="email" id="mail" name="user_email">
</div>
<div class="contact-input">
<label class="label" for="phone-number">Phone Number</label>
<input class="input" type="tel" id="phone-number" name="user_phone">
</div>
<div class="contact-input">
<label class="label" for="street">Street Address</label>
<input class="input" type="text" id="street" name="user_street">
</div>
<div class="contact-input">
<label class="label" for="city">City</label>
<input class="input" type="text" id="city" name="user_city">
</div>
<div class="contact-input">
<label class="label" for="state">State</label>
<select class="input" id="state" name="user_state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="contact-input zip">
<label class="label zip-label" for="zip">Zip Code</label>
<input class="input zip-input" type="text" id="zip" name="user_zipcode">
</div>
</fieldset>
<fieldset class="field">
<legend>Newsletter</legend>
<p>Select the newspaper you'd like to recieve:</p>
<div class="news-input">
<input type="checkbox" id="html-news" name="user_htm-news" checked></input>
<label for="html-news">HTML News</label>
</div>
<div class="news-input">
<input type="checkbox" id="css-news" name="user_css-news">
<label for="css-news">CSS News</label>
</div>
<div class="news-input">
<input type="checkbox" id="javascript-news" name="user_javascript-news">
<label for="javascript-news">Javascript News</label>
</div>
<p>Newsletter Format</p>
<div class="news-input">
<input type="radio" id="html" name="user_newsletter-format" checked>
<label for="html">HTML</label>
</div>
<div class="news-input">
<input type="radio" id="css-news" name="user_newsletter-format">
<label for="css-news">CSS News</label>
</div>
<p>Other topics you'd like to hear about</p>
<div class="textarea">
<textarea id="topics" name="user_topics"></textarea>
</div>
</fieldset>
<div class="button">
<button type="submit">Sign Up</button>
</div>
<div class="extra-info">
<p>Copyright the Code Review</p>
</div>
</form>
</body>
</html>
Form inputs have a default width that the user agent (browser) applies unless you override it.
The size IDL attribute is limited to only non-negative numbers greater than zero and has a default value of 20.
The container for your form inputs is 70% the width of the viewport, once the viewport is small enough, 70% becomes less than the default width of the form inputs. Thus the overflow.
At larger viewport sizes you're using flexbox properties which causes the inputs to stretch a particular width of their containing element.
Apply width: 100%; to your form inputs.
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
width: 100%;
background: #e8eeef;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
border: none;
border-radius: 5px;
padding: 12px 0;
}
This would be your best approach, no need for media query:
.form {
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 1024px; //insert your prefer value here;
}

How to increase width of select box arrow?

I want to increase the width of select box arrow like fa fa caret. i am not getting it how to do. I used img tag inside the each field and given position absolute and adjusted with left top properties but i think this is not proper way of doing this and even i click on the image arrow not select options are opening so i removed this. Please tell me proper solution for it.
.search-categories{
background: #E40444 !important;
color: #fff !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>
You can use the css triangle to make the arrow.
HTML
<div class="selectwrap">
<select>
<option>Option 1</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
CSS
select {
border: 1px solid #ccc;
height: 34px;
width: 250px;
padding: 6px 12px;
line-height: 1.42857143;
}
.selectwrap {
position: relative;
float: left;
}
.selectwrap:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000;
right: 4px;
top: 14px;
pointer-events: none;
}
It's very complicated to style form elements cross-browser because very browser has different look for form elements (especially checkbox, radio, select, progress).
I suggest using some plugin like select2 so you can easily style very element browser-independent.
$(document).ready(function() {
$('select').select2({
width: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" rel="stylesheet" />
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
<select>
<option>Op 1</option>
<option>Op 2</option>
<option>Op 3</option>
<option>Op 4</option>
</select>
better use some select element customisation plugin like select2, selectize. The appearance that these plugins create can be customised through css.
You cannot fully control the appearance of select element in cross browser manner with css alone.

Boostrap center inline inputs with no space between them

I removed the spacing between multiple input fields and the submit button using float:left.
But I dont know how to keep this hole block centered on the page.
Here is a Fiddle:https://jsfiddle.net/bb61c412/43/
And the code:
.form-control {
float: left;
border-radius: 0px;
}
.btn {
float: left;
border-radius: 0px;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Remove the floats and use flexbox instead.
JSfiddle Demo
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Otherwise you will have to review How to remove the space between inline-block elements?
Please try this:
Change:
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
to
<div style="margin: 0px auto; padding-top: 30px; width: 427px;">
It is best practice to have all your .js files or CDN(s) at the bottom of your HTML before the closing body tag.
You want to render your .js scripts last to help with your asset pipeline.

Can't input text into form or click search button

Any idea why this code stopped working? (Wordpress)
My site - The main search bar 'city' 'neighborhood' 'min price' etc isn't responding, I can't input text and have no clue what I've done to bung it up.
The code seems to be clean though when I input it in the codepen, something on my site is mucking this up!
<form id="sp_search_w" action="http://www.codytritter.com/listing/" method="get">
<input name="sp" type="hidden" value="s" />
<label for="sp_city">City</label>
<input id="sp_city" class="btn-block" name="sp_city" type="text" placeholder="City" />
<label for="sp_subdivision">Sub Division</label>
<input id="sp_subdivision" class="btn-block" name="sp_subdivision" type="text" placeholder="Neighborhood" />
<label for="sp_minprice">Min. Price</label>
<input name="sp_minprice" type="text" placeholder="Min Price" />
<!--
<select name="sp_minprice" id="sp_minprice" class="btn-block">
<option value="0">No Min</option>
<option value="25000">25,000</option>
<option value="50000">50,000</option>
<option value="75000">75,000</option>
</select>
-->
<label for="sp_maxprice">Max. Price</label>
<input name="sp_maxprice" type="text" placeholder="Max Price" />
<!--
<select name="sp_maxprice" id="sp_maxprice" class="btn-block">
<option value="50000000">No Max</option>
<option value="25000">25,000</option>
<option value="50000">50,000</option>
<option value="75000">75,000</option>
</select>
-->
<label for="sp_bedrooms">Bedrooms</label>
<input class="short" name="sp_bedrooms" type="text" placeholder="Beds" />
<!--
<select name="sp_bedrooms" id="sp_bedrooms" class="input-small btn-block">
<option value="">All</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4+</option>
</select>
-->
<label for="sp_bathrooms">Bathroom</label>
<input class="short" name="sp_bathrooms" type="text" placeholder="Baths" />
<!--
<select name="sp_bathrooms" id="sp_bathrooms" class="input-small btn-block">
<option value="">All</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4+</option>
</select>
-->
<div class="controls">
<input id="sp_search_submit" class="btn" type="submit" value="Search" />
</div>
</form>
CSS
form {
max-width: 100%;
margin: auto;
text-align: center;
}
input {
text-align: center;
padding: 1rem 1rem;
border-radius: .5rem;
border: 2px solid #ddd;
font-size: 1.3em;
max-width: 8em;
}
.controls { padding: 1em 0 0; }
#sp_search_submit {
background: #809eb6;
border: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: .2rem;
}
input:focus { outline: 0; }
.short { max-width: 4em; }
label { display: none; }
It's a CSS problem. There is a z-index of -1 on a parent element.
See this style
.post-489 .et_pb_section:nth-child(1) {
z-index: -1!important;
}
It's references in the head of your page
<!-- Start CSSHero.org Dynamic CSS & Fonts Loading -->
<link rel="stylesheet" type="text/css" media="all" href="http://www.codytritter.com?wpcss_action=show_css" data-apply-prefixfree />
<!-- End CSSHero.org Dynamic CSS & Fonts Loading -->

Bootstrap responsive and select boxes

I have a very simple form. The code below is a stripped down version with just one line os selects and all php code removed, but still shows my problem. When on a large screen, the label and the two select are nicely lined up. When on a small screen everything is placed vertically. There is ample room to keep thing next to each other, so there is no need to change the layout when moving to a small screen. Waht class should I override to keep things lined up? (I know I really don't need Bootstrap for this, but I consider this a learning experience).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alarmtijden ยท Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 250px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.control-label2 {
float: left;
width: 100px;
padding-top: 5px;
}
.controls2 {
*display: inline-block;
*padding-left: 0px;
margin-left: 0px;
margin-top: 10px;
*margin-left: 0;
}
.controls3 {
*display: inline-block;
*padding-left: 0px;
margin-left: 180px;
*margin-left: 0;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="form-signin">
<div class="row-fluid">
<form class="form-horizontal" action="alarms.php" method="post" id="alarms">
<fieldset>
<div id="legend">
<legend class=""> <h2>Alarmtijden</h2></legend>
</div>
<!-- Alarm1-->
<div class="control-group">
<label class="control-label2" for="password"><h4>Alarm 1 </h4></label>
<div class="controls2">
<select class="span3" name="t_uur1" id="t_uur1">
<option value="0">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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>
</select> :
<select class="span3" name="t_minuut1">
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
</div>
<!-- Submit -->
<div class="control-group">
<div class="controls3">
<button class="btn btn-primary" name="submit" id="submit" type="submit">Set</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
I also tried "form-inline" in stead of "form-horizontal" but that makes no difference.
If it wouldn't be vertical alignment on small screens then you would get horizontal scroll bar which is bad practice.
My advice is that you should use media queries and there you should float:left all your DIVs.
If that doesn't work then your select boxes are to wide for that resolution.