Is it possible to have the 3 buttons below spaced to fit any size page? I want to keep the same button size, just making the space between the buttons larger or smaller depending on the screen size. Anything, helps.
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Form</h3>
<h4>Contact us</h4>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Sub-Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
Yes, you can use this below in .fieldset
display: flex;
justify-content: space-between;
Snippet
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width: 125px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Form</h3>
<h4>Contact us</h4>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Sub-Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
Just modify these declarations :
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
border: none;
cursor: pointer;
display:block;
margin: 0 auto;
}
.dropdown {
position: relative;
/*display: inline-block;*/
display:block;
width:33.333333%;
float:left;
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
border: none;
cursor: pointer;
display:block;
margin: 0 auto;
}
.dropdown {
position: relative;
/*display: inline-block;*/
display:block;
width:33.333333%;
float:left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Form</h3>
<h4>Contact us</h4>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Sub-Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
You can do like this in your CSS:
#media only screen and (max-width: 500px) {
input {
width:100%
}
}
Related
I am trying to create some label text on a contact form that when the contact form is the :focus or it is :valid, the text moves above the input box and stays there.
Everything works fine on my local machine (Using brackets live preview), however, whenever I put the code onto my website for some reason the textarea label doesn't move anymore?
Has anybody got any idea why this is?
Here is the full code:
<div class="section">
<div class="wrapper">
<div class="content">
<h2>Contact Me</h2>
<form action="contactme.php" method="post" class="contact-form">
<div class="input-field">
<input type="text" name="name" required="">
<label for="">Full Name</label>
</div>
<div class="input-field">
<input type="text" name="cname" required="">
<label for="">Company Name</label>
</div>
<div class="input-field">
<input type="text" name="website" required="">
<label for="">Current Website (N/A if None)</label>
</div>
<div class="input-field">
<input type="email" name="mail" required="">
<label for="">E-Mail</label>
</div>
<div class="input-field">
<textarea name="message" rows="5" required=""></textarea>
<label for="">Message</label>
</div>
<input type="submit" name="submit" value="Submit Message" class="btn">
</form>
</div>
</div>
</div>
-
body {
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, rgba(0, 142, 204, 5) 50%, rgba(253, 165, 15, 5) 50%);
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 40px;
box-sizing: border-box;
background: #FFF;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
animation: fadeIn 2s 0s linear;
}
.wrapper h2 {
color: #666;
margin: 0;
padding: 0;
text-align: center;
font-size: 30px;
text-transform: uppercase;
}
.input-field {
position: relative;
width: 100%;
margin-top: 50px;
}
.input-field input,
.input-field textarea {
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
padding: 5px 0;
box-sizing: border-box;
background: transparent;
border: none;
outline: none;
border-bottom: 2px solid #666;
font-size: 16px;
color: #666;
font-weight: 700;
text-transform: uppercase;
resize: none;
}
.input-field label {
position: absolute;
top: 0;
left: 0;
padding: 5px 0;
pointer-events: none;
font-size: 16px;
color: #666;
font-weight: 700;
transition: .5s;
}
.input-field input:focus + label,
.input-field textarea:focus + label,
.input-field input:valid + label,
.input-field textarea:valid + label {
top: -25px;
font-size: 14px;
padding: 2px 5px;
background: #FF006A;
color: #FFF;
border-radius: 4px;
}
.btn {
font-family: 'Roboto Condensed', sans-serif;
margin-top: 20px;
background: linear-gradient(to right, #ff9966, #ff5e62);
color: #FFF;
padding: 15px 30px;
border: none;
outline: none;
border-radius: 30px;
font-size: 16px;
float: right;
transition: all .5s;
}
.btn:hover {
cursor: pointer;
}
#media(max-width: 580px) {
.wrapper {
width: 250px;
padding: 20px;
}
.wrapper h2 {
font-size: 15px;
}
.input-field input,
.input-field textarea {
font-size: 12px;
}
.input-field label {
font-size: 12px;
}
.btn {
font-size: 12px;
}
}
So I've been messing around with a form in a project I'm working on - and have discovered that on Microsoft Edge, the top border of the label on my form fields disappears (I assume the label is being set to width: 100%; and covering it up) and so far I can not recreate this in any other browser or figure out where the CSS that's doing this is.
Below is a code snippet and a link to the CodePen as well (so you can see it full-screen on Edge).
Image: Form input comparison: Chrome Vs. Edge
CodePen: https://codepen.io/B-Lovegrove/pen/NadBVe
Note: For best results, use full-screen on code snippet
html {
overflow-x: hidden;
max-width: 100%;
width: 100%;
height: 100%;
background: #363740 url("../media/bg.jpg") repeat scroll;
}
body {
margin: 0px;
padding: 0px;
min-height: 100%;
width: 100%;
}
a {
color: #4b8ddb;
text-decoration: none;
}
table.top_pattern {
width: 100%;
border-collapse: collapse;
}
table.top_pattern tbody tr td {
display: table-cell;
padding: 0;
width: 14%;
height: 5px;
}
table.top_pattern tbody tr td.tc_1 {
background: #7c8bc5;
}
table.top_pattern tbody tr td.tc_2 {
background: #799c0c;
}
table.top_pattern tbody tr td.tc_3 {
background: #2e4795;
}
.radio {
margin: 0.5rem;
}
.radio label {
font-size: 1.2em;
}
.radio input[type="radio"] {
position: absolute;
opacity: 0;
}
.radio input[type="radio"]+.radio-label:before {
position: relative;
display: inline-block;
margin-right: .8em;
width: 1em;
height: 1em;
border: 1px solid #415086;
border-radius: 100%;
background: white;
content: '';
vertical-align: top;
text-align: center;
cursor: pointer;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.radio input[type="radio"]:checked+.radio-label:before {
background-color: #4b8ddb;
-webkit-box-shadow: inset 0 0 0 4px white;
box-shadow: inset 0 0 0 4px white;
font-size: 1.2em;
}
.radio input[type="radio"]:focus+.radio-label:before {
outline: none;
border-color: #4b8ddb;
}
.radio input[type="radio"]+.radio-label:empty:before {
margin-right: 0;
}
.Important {
padding: 10px;
border-bottom: solid 1px black;
background: rgba(139, 168, 46, 0.81);
text-align: center;
font-size: 1.2em;
font-family: "Lato", sans-serif;
}
h1.Important {
margin-top: 0em;
margin-bottom: 0;
border-top: solid 1px black;
background: rgba(209, 209, 209, 0.7);
font-weight: 500;
font-size: 2.1em;
font-family: "Roboto", sans-serif;
}
p,
ul {
color: white;
font-size: 1.3em;
font-family: "Tahoma", sans-serif;
line-height: 1.3em;
}
ul {
margin: 1em 0;
}
h2 {
color: white;
font-size: 1.4em;
font-family: "Roboto", sans-serif;
}
.Container {
padding-bottom: 2.8em;
}
.Container .Content {
margin: 1.7em 3em 0em 3em;
padding: 1.5em;
border: 1px solid #45464f;
background: #363740;
}
.StaticForm {
padding: 2em 1em 1em 1em;
min-height: 70px;
width: calc(100% - 32px);
border: 1px solid #45464f;
background: #2f3038;
font-family: "Century Gothic", sans-serif;
}
.StaticForm ul {
margin: 0;
padding: 0;
list-style: none;
}
.StaticForm .FormField {
display: block;
margin-bottom: 30px;
padding: 9px;
border: 1px solid #45464f;
}
.StaticForm .FormField:last-child {
margin-bottom: 0px;
border: none;
text-align: center;
}
.StaticForm .FormField>label:first-child {
display: block;
overflow: hidden;
margin-top: -28px;
padding: 5px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: #2f3038;
color: #4b8ddb;
font-size: 1.4em;
font-family: "Lato", sans-serif;
}
.StaticForm .FormField input::-webkit-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}
.StaticForm .FormField input:-ms-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}
.StaticForm .FormField input::placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}
.StaticForm .FormField.Split {
display: inline-block;
float: right;
min-height: 41px;
width: calc(50% - 27px);
}
.StaticForm .FormField.Split button {
min-height: 41px;
background-color: #4b8ddb;
cursor: pointer;
}
.StaticForm .FormField.Split button:hover {
background-color: #3680d7;
}
.StaticForm .FormField.Split:nth-child(odd) {
float: left;
}
.StaticForm .FormField.Full {
display: inline-block;
float: left;
width: calc(100% - 18px);
}
.StaticForm .FormField.Red,
.StaticForm .FormField.Blue {
padding-top: 0;
padding-bottom: 0;
border: none;
}
.StaticForm .FormField.Red button,
.StaticForm .FormField.Blue button {
min-height: 61px;
border: none;
border-bottom: 3px solid #b22c2c;
border-radius: 3px;
background: #ce3939;
color: white;
}
.StaticForm .FormField.Red button:hover,
.StaticForm .FormField.Blue button:hover {
background: #c23030;
color: #f2f2f2;
cursor: pointer;
}
.StaticForm .FormField.Blue button {
border-bottom: 3px solid #374d94;
background: #415bae;
}
.StaticForm .FormField.Blue button:hover {
background: #3a519b;
}
.StaticForm input,
.StaticForm textarea,
.StaticForm button,
.StaticForm select {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
width: 100%;
outline: none;
border: none;
background-color: #2f3038;
color: white;
font-size: 1.3em;
font-family: "Roboto", sans-serif;
resize: none;
}
.StaticForm .FormSubmit input,
.StaticForm .FormSubmit button,
.StaticForm .FormSubmit select {
padding: 10px;
border: none;
border-bottom: 3px solid #1b3669;
background: #415bae;
color: white;
}
.StaticForm .FormSubmit input:hover,
.StaticForm .FormSubmit button:hover,
.StaticForm .FormSubmit select:hover {
background: #3a519b;
color: #f2f2f2;
cursor: pointer;
}
<div class="Accounts Container">
<div class="Content">
<form id="TeacherForm" class="StaticForm" enctype="multipart/form-data" autocomplete="off" onkeypress="return event.keyCode != 13;">
<ul>
<li class="FormField Split">
<label for="teacher_code">Teacher code</label>
<input id="TeacherCode" type="text" name="teacher_code" maxlength="4" placeholder="Type teachers code" autofocus>
</li>
<li class="FormField Split">
<label for="name">Teacher name</label>
<input id="TeacherName" type="text" name="name" maxlength="255" placeholder="Type teachers name">
</li>
<li class="FormField Split">
<label for="email">Teacher email</label>
<input id="TeacherEmail" type="email" name="email" maxlength="255" placeholder="Type teachers email">
</li>
<li class="FormField Split">
<label for="password">Teacher password</label>
<input id="TeacherPassword" onfocus="RunOnce();" type="text" name="password" maxlength="255" placeholder="Type teachers password">
</li>
<li class="FormField Split">
<label for="department_id">Teacher department</label>
<input id="TeacherDepartment" type="text" name="department_id" maxlength="255" placeholder="Type teachers department">
</li>
<li class="FormField Split">
<label>Teacher subject</label>
<input id="TeacherSubject" type="text" name="subject_id" maxlength="255" placeholder="Type teachers subject">
</li>
<li class="FormField Full">
<label for="elevation">Teacher elevation</label>
<div class="radio">
<input id="teacher" class="TeacherElevation" name="elevation" type="radio" value=0 checked>
<label for="teacher" class="radio-label">Teacher</label>
</div>
<div class="radio">
<input id="tic" class="TeacherElevation" name="elevation" type="radio" value=1>
<label for="tic" class="radio-label">Teacher in charge</label>
</div>
<div class="radio">
<input id="hol" class="TeacherElevation" name="elevation" type="radio" value=2>
<label for="hol" class="radio-label">Head of learning</label>
</div>
<div class="radio">
<input id="sysadmin" class="TeacherElevation" name="elevation" type="radio" value=3>
<label for="sysadmin" class="radio-label">Systems admin</label>
</div>
</li>
<li class="FormSubmit">
<button id="TeacherSubmit">Register teacher</button>
</li>
</ul>
</form>
</div>
</div>
html {
overflow-x: hidden;
max-width: 100%;
width: 100%;
height: 100%;
background: #363740 url("../media/bg.jpg") repeat scroll;
}
body {
margin: 0px;
padding: 0px;
min-height: 100%;
width: 100%;
}
a {
color: #4b8ddb;
text-decoration: none;
}
table.top_pattern {
width: 100%;
border-collapse: collapse;
}
table.top_pattern tbody tr td {
display: table-cell;
padding: 0;
width: 14%;
height: 5px;
}
table.top_pattern tbody tr td.tc_1 {
background: #7c8bc5;
}
table.top_pattern tbody tr td.tc_2 {
background: #799c0c;
}
table.top_pattern tbody tr td.tc_3 {
background: #2e4795;
}
.radio {
margin: 0.5rem;
}
.radio label {
font-size: 1.2em;
}
.radio input[type="radio"] {
position: absolute;
opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
position: relative;
display: inline-block;
margin-right: .8em;
width: 1em;
height: 1em;
border: 1px solid #415086;
border-radius: 100%;
background: white;
content: '';
vertical-align: top;
text-align: center;
cursor: pointer;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
background-color: #4b8ddb;
-webkit-box-shadow: inset 0 0 0 4px white;
box-shadow: inset 0 0 0 4px white;
font-size: 1.2em;
}
.radio input[type="radio"]:focus + .radio-label:before {
outline: none;
border-color: #4b8ddb;
}
.radio input[type="radio"] + .radio-label:empty:before {
margin-right: 0;
}
.Important {
padding: 10px;
border-bottom: solid 1px black;
background: rgba(139, 168, 46, 0.81);
text-align: center;
font-size: 1.2em;
font-family: "Lato", sans-serif;
}
h1.Important {
margin-top: 0em;
margin-bottom: 0;
border-top: solid 1px black;
background: rgba(209, 209, 209, 0.7);
font-weight: 500;
font-size: 2.1em;
font-family: "Roboto", sans-serif;
}
p, ul {
color: white;
font-size: 1.3em;
font-family: "Tahoma", sans-serif;
line-height: 1.3em;
}
ul {
margin: 1em 0;
}
h2 {
color: white;
font-size: 1.4em;
font-family: "Roboto", sans-serif;
}
.Container {
padding-bottom: 2.8em;
}
.Container .Content {
margin: 1.7em 3em 0em 3em;
padding: 1.5em;
border: 1px solid #45464f;
background: #363740;
}
.StaticForm {
padding: 2em 1em 1em 1em;
min-height: 70px;
width: calc(100% - 32px);
border: 1px solid #45464f;
background: #2f3038;
font-family: "Century Gothic", sans-serif;
}
.StaticForm ul {
margin: 0;
padding: 0;
list-style: none;
}
.StaticForm .FormField {
display: block;
margin-bottom: 30px;
padding: 9px;
border: 1px solid #45464f;
}
.StaticForm .FormField:last-child {
margin-bottom: 0px;
border: none;
text-align: center;
}
.StaticForm .FormField > label:first-child {
display: inline-block;
overflow: hidden;
margin-top: -28px;
padding: 5px;
width: -webkit-fit-content;
width: -moz-fit-content;
width:-ms-fit-content;
width: fit-content;
background: #2f3038;
color: #4b8ddb;
font-size: 1.4em;
font-family: "Lato", sans-serif;
}
.StaticForm .FormField input::-webkit-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}
.StaticForm .FormField input:-ms-input-placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}
.StaticForm .FormField input::placeholder {
border: none;
background: #2f3038;
color: #adadad;
font-weight: lighter;
font-family: "Roboto", sans-serif;
}
.StaticForm .FormField.Split {
display: inline-block;
float: right;
min-height: 41px;
width: calc(50% - 27px);
}
.StaticForm .FormField.Split button {
min-height: 41px;
background-color: #4b8ddb;
cursor: pointer;
}
.StaticForm .FormField.Split button:hover {
background-color: #3680d7;
}
.StaticForm .FormField.Split:nth-child(odd) {
float: left;
}
.StaticForm .FormField.Full {
display: inline-block;
float: left;
width: calc(100% - 18px);
}
.StaticForm .FormField.Red, .StaticForm .FormField.Blue {
padding-top: 0;
padding-bottom: 0;
border: none;
}
.StaticForm .FormField.Red button, .StaticForm .FormField.Blue button {
min-height: 61px;
border: none;
border-bottom: 3px solid #b22c2c;
border-radius: 3px;
background: #ce3939;
color: white;
}
.StaticForm .FormField.Red button:hover,
.StaticForm .FormField.Blue button:hover {
background: #c23030;
color: #f2f2f2;
cursor: pointer;
}
.StaticForm .FormField.Blue button {
border-bottom: 3px solid #374d94;
background: #415bae;
}
.StaticForm .FormField.Blue button:hover {
background: #3a519b;
}
.StaticForm input,
.StaticForm textarea,
.StaticForm button,
.StaticForm select {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
width: 100%;
outline: none;
border: none;
background-color: #2f3038;
color: white;
font-size: 1.3em;
font-family: "Roboto", sans-serif;
resize: none;
}
.StaticForm .FormSubmit input,
.StaticForm .FormSubmit button,
.StaticForm .FormSubmit select {
padding: 10px;
border: none;
border-bottom: 3px solid #1b3669;
background: #415bae;
color: white;
}
.StaticForm .FormSubmit input:hover,
.StaticForm .FormSubmit button:hover,
.StaticForm .FormSubmit select:hover {
background: #3a519b;
color: #f2f2f2;
cursor: pointer;
}
<html lang=en>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Brandon Lovegrove" />
<meta charset="UTF-8" />
<title>Options Selection - demo</title>
<link rel="icon" type="image/x-icon" href="./media/favicon.ico" />
<link rel="stylesheet" href="./css/complete.css" />
</head>
<body>
<table class="top_pattern">
<tbody>
<tr>
<td class="tc_1"></td>
<td class="tc_2"></td>
<td class="tc_3"></td>
<td class="tc_1"></td>
<td class="tc_2"></td>
<td class="tc_3"></td>
<td class="tc_1"></td>
</tr>
</tbody>
</table>
<div class="Canvas">
<div class="Accounts Container">
<div class="Content">
<form id="TeacherForm" class="StaticForm" enctype="multipart/form-data" autocomplete="off" onkeypress="return event.keyCode != 13;">
<ul>
<li class="FormField Split">
<label for="teacher_code">Teacher code</label>
<input id="TeacherCode" type="text" name="teacher_code" maxlength="4" placeholder="Type teachers code" autofocus>
</li>
<li class="FormField Split">
<label for="name">Teacher name</label>
<input id="TeacherName" type="text" name="name" maxlength="255" placeholder="Type teachers name">
</li>
<li class="FormField Split">
<label for="email" >Teacher email</label>
<input id="TeacherEmail" type="email" name="email" maxlength="255" placeholder="Type teachers email">
</li>
<li class="FormField Split">
<label for="password">Teacher password</label>
<input id="TeacherPassword" type="password" name="password" maxlength="255" placeholder="Type teachers password">
</li>
<li class="FormField Split">
<label for="department_id">Teacher department</label>
<input id="TeacherDepartment" type="text" name="department_id" maxlength="255" placeholder="Type teachers department">
</li>
<li class="FormField Split">
<label>Teacher subject</label>
<input id="TeacherSubject" type="text" name="subject_id" maxlength="255" placeholder="Type teachers subject">
</li>
<li class="FormField Full">
<label for="elevation">Teacher elevation</label>
<div class="radio">
<input id="teacher" class="TeacherElevation" name="elevation" type="radio" value=0 checked>
<label for="teacher" class="radio-label">Teacher</label>
</div>
<div class="radio">
<input id="tic" class="TeacherElevation" name="elevation" type="radio" value=1>
<label for="tic" class="radio-label">Teacher in charge</label>
</div>
<div class="radio">
<input id="hol" class="TeacherElevation" name="elevation" type="radio" value=2>
<label for="hol" class="radio-label">Head of learning</label>
</div>
<div class="radio">
<input id="sysadmin" class="TeacherElevation" name="elevation" type="radio" value=3>
<label for="sysadmin" class="radio-label">Systems admin</label>
</div>
</li>
<li class="FormSubmit">
<button id="TeacherSubmit">Register teacher</button>
</li>
</ul>
</form>
</div>
</div>
</div>
</body>
</html>
I have code below for a contact form I have created. When you click preview, a second page view comes up. Is it possible to get the "Submit" button in the same position as the "Preview" button? Anything helps, cheers.
function openNav() {
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
padding-left:25px;
font-family:Verdana;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelName{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>
So here's the full code -
add "collapsed" class to the html div id=myNav
toggle this class on the 2 clickHandlers (openNav and closeNav)
give the anchor tag X close a z-index: 100;
give the "collapsed" class the relevant css.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
padding-left:25px;
font-family:Verdana;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelName{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
</style>
</head>
<body>
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>
<script>
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
</script>
</body>
</html>
Messing around quickly here;
Take percentage margins off .overlay-content and add padding to .overlay in the same manner as the previous screen (25px). Commented out previous code
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
padding: 25px;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
Then fill .container to 100% height and push the last fieldset down;
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
Though be careful as a general rule using absolute positioning.
The responsive contact form is working properly for textarea but not for input type=text fields on smaller screens. I tried adding media queries.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.contact-form {
line-height: 1.4;
width: 50%;
margin: 0 auto;
}
.form-group {
background: #F6DDCE;
margin-bottom: 1em;
padding: 10px;
}
.form-group ul {
list-style: none;
margin: 0 0 2em;
padding: 0;
}
.form-group li {
margin-bottom: 0.5em;
}
.form-group h3 {
margin-bottom: 1em;
}
.form-fields input[type="text"],
.form-fields input[type="email"]{
box-sizing: border-box;
padding: 0.6em 0.8em;
color: #999;
background: #f7f7f7;
border: 1px solid #e1e1e1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9em;
text-decoration: none;
line-height: normal;
max-height: 3em;
}
.form-fields input[type="text"]:focus,
.form-fields input[type="email"]:focus,
.form-fields textarea:focus {
color: #333;
border: 1px solid #C17CCF;
outline: none;
background: #f2f2f2;
}
.form-fields textarea {
display: block;
box-sizing: border-box;
font: 0.9em Lato, Helvetica, sans-serif;
width: 100%;
height: 6em;
overflow: auto;
padding: 0.6em 0.8em;
color: #999;
background: #f7f7f7;
border: 1px solid #e1e1e1;
line-height: normal;
}
.form-fields label{
text-align: left;
}
.send-btn {
border-radius: 0px 2px 2px 0px;
box-sizing: content-box;
background: #8B798C;
font-weight: 300;
text-transform: uppercase;
color: white;
padding: 0.35em 0.75em;
border: none;
font-size: 1.1em;
text-decoration: none;
cursor: pointer;
}
.send-btn:hover, .send-btn:focus {
background: #C17CCF;
}
/*flex it*/
.send-form {
display: flex;
flex-wrap: wrap;
}
.form-group {
flex: 1 0 300px;
}
.form-submit {
flex: 0 0 100%;
}
.form-fields li {
display: flex;
flex-wrap: wrap;
}
.form-fields input[type="text"],
.form-fields input[type="email"]{
flex: 1 0 230px;
}
.form-fields label {
flex: 1 0 90px;
}
/* Adding media queries*/
#media (max-width: 400px) {
body {
width: 100%;
margin: 0;
padding: 0 0 2em;
}
header, .form-submit {
padding: 2% 5%;
}
}
</style>
</head>
<body>
<header>
</header>
<form class="contact-form">
<section class="form-group">
<h3>Contact Us</h3>
<ul class="form-fields">
<li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li>
<li><label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="subject" class="text-input"></li>
<li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li>
<li><label for="comments">Comments:</label><textarea id="comments" name="comments" class="text-area">comments</textarea> </li>
</ul>
</section>
<section class="form-submit">
<button type="submit" class="send-btn">Send</button>
</section>
</form>
</body>
</html>
It's because of the flex property flex: 1 0 230px; for input fields. Override it with max-width: 100%; in media query breakpoints.
Here's the fiddle:
.form-fields input[type="text"],
.form-fields input[type="email"] {
max-width: 100%;
}
I have a problem with a contact form I'm making. There are two left floating columns with "name" and "email" in one, then "message" in the other. I want my button to be below the two columns and be centered within the form.
My problem is that, when it's less then 50%, the button sticks to the "message". Even though its parent is the form, the button wants to style itself with the "message" column.
Here is a link to my problem in jsfiddle.
Here's my HTML:
<form id="ajax-contact" method="post" action="mailer.php">
<div class="column">
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<label for="email">email address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="column">
<label for="message">message</label>
<textarea id="message" required></textarea>
</div>
<button id="bottom-button" type="submit">Send</button>
</form>
And my CSS:
form {
padding: 0 5% 0 5%; }
form .column {
width: 100%; }
form label {
display: block;
font-family: "Lato", sans-serif;
font-weight: 400;
color: #553445;
font-size: 1.5em;
line-height: 1em;
padding: 0 5px 5px 2px;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 1px; }
form input, form textarea {
display: block;
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: 1.5em;
line-height: 1em;
padding: 5px 10px;
color: #553445;
width: 100%;
background: rgba(85, 52, 69, 0.1);
border: none;
border-bottom: 3px solid rgba(85, 52, 69, 0.4);
outline: none; }
form input:active, form input:focus, form textarea:active, form textarea:focus {
border-bottom: 3px solid #fff; }
form input {
margin-bottom: 40px; }
form textarea {
min-height: 200px;
resize: none; }
button {
background: #e85657;
color: #fff;
padding: 0.5em;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 1.5em;
padding-left: 1.05em;
padding-right: 1.05em;
cursor: pointer;
margin-bottom: 3em;
border-radius: 3px;
border: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
button:hover {
background: #fff;
color: #e85657; }
button:focus {
outline: none; }
button a {
color: inherit; }
#bottom-button {
width: 100%;
border-radius: 0 0 3px 3px; }
#media screen and (min-width: 30em) {
#ajax-contact .column {
float: left;
width: 50%; }
#ajax-contact textarea {
min-height: 146px; }
#ajax-contact #bottom-button {
border-radius: 3px;
width: auto; } }
Your button wasn't part of the styled div, <div class="column">.
See updated JSFiddle here: http://jsfiddle.net/b9rp3Ls4/6/
EDIT: Based on the comment, I've centered it using this resource from the W3C, available here: http://www.w3.org/Style/Examples/007/center.en.html
The new JS Fiddle: http://jsfiddle.net/b9rp3Ls4/7/
It's better to use the same parent if you're trying to center within. Use the margins to put it right in the middle.