Here's the landing page: https://selfbrowser.github.io/self/
I want to show a popup automatically when someone lands of webpage. But only half on popup is window is visible. I'm confused how to positon that popup on webpage.
popup.css
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.popup{
background-color: #0f72e5;
width: 450px;
padding: 30px 40px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
border-radius: 8px;
font-family: "Poppins",sans-serif;
display: none;
text-align: center;
z-index: 1;
opacity: 1;
}
index.html
<div class="container">
<!--POP UP FORM -->
<div class="popup">
<button id="close">×</button>
<h2>Get Free Discounts, Offer Coupon in your inbox!</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui, commodi minima magni ullam aliquam dignissimos?
</p>
<form
method="POST"
action="https://script.google.com/macros/s/AKfycbyaUEskqvVM1oehXSA2ClQ7ZPeCOLwNluev9GpPFGKCTkFgPYjEC7jrf8Vr5leHoWC2HA/exec">
<input name="Email" type="email" placeholder="Email" required>
<input name="Name" type="text" placeholder="Name" required>
<button type="submit">Submit</button>
</form>
</div>
</div>
Can someone please fix & position the code at right place so that full popup window loads.
Related
I got a problem when I make a text area, the text inside is centered vertically and not taking the whole space.
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
}
<section class="row get-in-touch-row">
<div
class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
>
<h2>get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input
class="input-area1"
type="text"
placeholder="Your Name"
required
/>
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea
name=""
id="input-area2"
cols="10"
rows="10"
placeholder="Message"
></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
As you can try it only takes online to enter text but I want to use the whole space.
How can I prevent it?
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
}
<section class="row get-in-touch-row">
<div
class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
>
<h2>get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input
class="input-area1"
type="text"
placeholder="Your Name"
required
/>
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea
name=""
id="input-area2"
cols="10"
rows="10"
placeholder="Message"
></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
If I understand you correctly you want the <textarea> element to not be in the center of the page.
By default textareas, inputs, and buttons are inline elements meaning that they will all happily line up in a row unless they are too long for the page and in that case they will wrap around.
Most modern one page forms elements are not inline but lined up in a column. Hence, when I am styling forms I will often make all input elements display as blocks like this.
input, textarea, button, label {
display: block;
}
Here is your original code with the new changes to the css.
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
}
input, textarea, button, label {
display: block;
}
<section class="row get-in-touch-row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info">
<h2>Get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input class="input-area1" type="text" placeholder="Your Name" required />
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea name="" id="input-area2" cols="10" rows="10" placeholder="Message"></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
I have a page where Header is position: sticky element and body scrolls. Whenever I scroll the body, everything behaves as they should — the content scrolls, header remains sticky to the viewport.
But the problem occurs in iPhone. When I focus on the text-box of a select dropdown . Virtual keyboard opens. Everything looks fine till now. However, when I scroll the content, The Header loses its stickiness and start scrolling with the content. Weren’t they position: sticky?
Is this because the device doesn’t honor any position: fixed/sticky elements, when the virtual keyboard is open?
PS: In my case I have tried using -webkit-position: sticky as many have suggested. Yet position: fixed element behaves like position: static when the native keyboard is open.
In these links you can find a demonstration of the problem
when keyboard is not opened
and
when select dropdown is open
when keyboard is open
you can see the header has gone above the viewport when the virtual keyboard is open... i have also reproduced the bug in the snippet below...
#import url('httpss://fonts.googleapis.com/css?family=Roboto');
body {
margin: 0;
padding:0;
box-sizing: border-box
}
.text{
padding: 10px
}
.signup-form {
font-family: "Roboto", sans-serif;
margin:30px auto;
background:linear-gradient(to right, #ffffff 0%, #fafafa 50%, #ffffff 99%);
}
.form-header {
background-color: #EFF0F1;
position: sticky;
top: 0;
}
.form-header h1 {
font-size: 30px;
text-align:center;
color:#666;
padding:20px 0;
border-bottom:1px solid #cccccc;
}
/*---------------------------------------*/
/* Form Body */
/*---------------------------------------*/
select{
width: 100%;
}
.form-body {
padding:10px 40px;
color:#666;
}
.form-group{
margin-bottom:20px;
}
.form-body .label-title {
color:#1BBA93;
font-size: 17px;
font-weight: bold;
}
.form-body .form-input {
font-size: 17px;
box-sizing: border-box;
width: 100%;
height: 34px;
padding-left: 10px;
padding-right: 10px;
color: #333333;
text-align: left;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.horizontal-group .left{
width: 100%;
}
.horizontal-group .right{
width: 100%;
}
input{
outline: none;
cursor:pointer;
}
#range-label {
width:15%;
padding:5px;
background-color: #1BBA93;
color:white;
border-radius: 5px;
font-size: 17px;
position: relative;
top:-8px;
}
::-webkit-input-placeholder {
color:#d9d9d9;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.form-footer {
clear:both;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.signup-form .form-footer {
background-color: #EFF0F1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:10px 40px;
text-align: right;
border-top: 1px solid #cccccc;
}
.form-footer span {
float:left;
margin-top: 10px;
color:#999;
font-style: italic;
font-weight: thin;
}
.btn {
display:inline-block;
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
.btn:hover {
background-color: #169c7b;
color:white;
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
.form-header {
position: -webkit-sticky;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky header</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="form-header">
<h1>Sticky Header</h1>
</div>
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum et modi explicabo porro laboriosam
reprehenderit facere natus ipsa iure. Consequatur, minima? Cupiditate facere tempora molestias earum
praesentium consectetur quae consequuntur?
</div>
</header>
<main class="container">
<form class="signup-form" action="/register" method="post">
<div class="form-header">
<h1>Create Account</h1>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="firstname" class="label-title">First name *</label>
<input type="text" id="firstname" class="form-input" placeholder="enter your first name"
required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Last name</label>
<input type="text" id="lastname" class="form-input" placeholder="enter your last name" />
</div>
<div class="form-group">
<label for="lastname" class="label-title">age*</label>
<select class="form-input">
<option value="20-30">20-30</option>
<option value="30-40">30-40</option>
<option value="40-50">40-50</option>
</select>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="enter your email"
required="required">
</div>
<!-- Passwrod and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password"
required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password"
placeholder="enter your password again" required="required">
</div>
</div>
<!-- Gender and Hobbies -->
<div class="horizontal-group">
<div class="form-group left">
<label class="label-title">Gender:</label>
<div class="input-group">
<label for="male">
<input type="radio" name="gender" value="male" id="male"> Male</label>
<label for="female">
<input type="radio" name="gender" value="female" id="female"> Female</label>
</div>
</div>
<div class="form-group right">
<label class="label-title">Hobbies</label>
<div>
<label>
<input type="checkbox" value="Web">Music</label>
<label>
<input type="checkbox" value="iOS">Sports</label>
<label>
<input type="checkbox" value="Andriod">Travel</label>
<label>
<input type="checkbox" value="Game">Movies</label>
</div>
</div>
</div>
<!-- Source of Income and Income Amount -->
</div>
<div class="form-footer">
<span>* required</span>
<button type="submit" class="btn">Create</button>
</div>
<div class="form-header">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veniam tempora, sit exercitationem
voluptatum cupiditate odio aut iste deleniti inventore iure delectus ipsa eligendi rem minima beatae
molestias ullam corporis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veniam tempora, sit exercitationem
voluptatum cupiditate odio aut iste deleniti inventore iure delectus ipsa eligendi rem minima beatae
molestias ullam corporis.
</div>
</form>
</main>
</body>
</html>
I have some troubles with my html and css structure for this layout on the picture below.
Can you give me some suggestions how to accomplish it properly ? How to separate left section and right section with the form because I want to be able to create this full height black transparent background ?
Here is my code until now.
.enroll-bg { background: linear-gradient( rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0 230px 0; width: 100%; }
.form-container { position: relative; }
.form-wrapper { position: absolute; bottom: -230px; right: 0; left: 50%; background: red; width: 539px; height: 520px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
<div class="enroll-bg">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="enroll-logo">
<div class="logo">
logo
</div>
<!-- logo -->
</div>
<!-- enroll-logo -->
<div class="enroll-content">
<h1>Enroll today and <span>save money & time</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- enroll-content -->
</div>
<!-- col-md-6 -->
</div>
<!-- row -->
<div class="form-container">
<form action="#" class="form-wrapper">
<div class="form-content">
<p>
<input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
</p>
<p>
<input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
</p>
<p>
<input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
</p>
<p>
<input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
</p>
<p>
<input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
</p>
<div class="form-actions">
<button type="button" class="btn btn-danger">enroll today</button>
</div>
<!-- form-actions -->
</div>
<!-- form-content -->
</form>
<!-- form-wrapper -->
</div>
<!-- form-container -->
</div>
<!-- container -->
</div>
<!-- enroll-bg -->
</header>
<!-- header -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I've made some minor tweaks to both HTML and CSS - see jsfiddle here.
I've removed position: absolute from the .form-wrapper, wrapped the form in a .col-xs-6, and put in the same .row so that it sits alongside the enroll content.
Each .row can contain any combination of .col-xx-xx or .col-xx-offset-xx, as long as the sum of the numbers is no more than 12. You can read more about this here.
HTML:
<div class="enroll-bg">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="enroll-logo">
<div class="logo">
logo
</div>
</div>
<div class="enroll-content">
<h1>Enroll today and <span>save money & time</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="col-xs-6 form-container">
<div class="">
<form action="#" class="form-wrapper">
<div class="form-content">
<p>
<input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
</p>
<p>
<input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
</p>
<p>
<input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
</p>
<p>
<input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
</p>
<p>
<input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
</p>
<div class="form-actions">
<button type="button" class="btn btn-danger">enroll today</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS:
.enroll-bg { background: linear-gradient( rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat;
background-size: cover;
width: 100%; }
.form-container {
height: 100vh;
background: red;
}
Your form must be in the same row as the left column, and in another col-md-6.
if it is for a single page you may not need to use boostrap (class and structure) and relay on the flex model with a few mediaqueries to allow font-size resizing and eventually break into 1 column:
header,
main {
width: 30vw;
min-width: 360px;
height: 100vh;
}
html,
header,
form {
display: flex;
flex-flow: column;
min-height: 100vh;
}
body {
min-height: 100vh;
margin:0;
display: flex;
justify-content: center;
flex-wrap: wrap;
background: linear-gradient(to bottom, #55707B, #677B82, #484926, #685125);
background-size:100% 100%;
color: white;
}
header img {
min-height: 40px;
margin: 1em auto 1em 1em;
}
header h1 {
flex: 1;
display: flex;
flex-flow: column;
justify-content: center;
font-size: 3.5em;
margin: 0;
}
header h1 b {
display: block;
color: #A7FE2B
}
main form {
justify-content: space-around;
align-items: center;
padding: 5vh 3vw;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.25)
}
main form label {
font-size: 5vh;
width: 100%;
position: relative;
}
main form label input:not([type="submit"]) {
width: 100%;
padding-left: 1.5em;
box-sizing: border-box;
}
label:not(:last-of-type):before {
font-family: FontAwesome;
content: "\f007";
position: absolute;
z-index: 1;
left: 0.2em;
top: 0.25em;
color: gray;
}
label:nth-child(2):before {
content: "\f10b";
/* etc ..*/
}
label:last-of-type input {
padding: 0.25em;
color: white;
background: turquoise;
border: none;
}
#media only screen and (max-height: 500px) {
header h1 {
font-size: 20px;
}
main form label {
font-size: 20px;
}
body,
main,
header,
form {
height: auto;
min-height: 100vh
}
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<img src="http://dummyimage.com/150x40&text=\LOGO/" alt="logo" />
<h1>HTML Ipsum Vestibulum &<b> test me full page too</b></h1>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</header>
<main>
<form>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input type="submit" value="tempus lacus" />
</label>
</form>
</main>
http://codepen.io/gc-nomade/pen/MbBNaO
I am trying to make a search bar where a green div would be in the middle of the grey one(see http://codepen.io/anon/pen/LRBEvq?editors=1100), and checkboxes, select drop menu, and input field all inline with two buttons - so everything in the same row. I am using Bootstrap to make it responsive but got stuck and can't figure it out.. thank you for all the help!
Here's my html:
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
Use display: inline-block; for your wrapper divs to behave like inline elements without losing their block properties:
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
If you also want the buttons to be in the same row, use a <div class="col-md-12"> for the whole content.
To center your menu bar horizontally, use margin: 0 auto;; to center it vertically, position it, apply a top: 50%; and translate it back the half of its size in negative y-direction (up):
.formContainer {
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0,-50%);
}
To make the input text field as long as the remaining space, just set the width of the input the same as its wrapper div:
.mainContent .choice-input input {
width: inherit;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
.mainContent .choice-input input {
width: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-12">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
Horizontal centering:
For horizontal centering, we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.
Vertical centering:
The essential rules are:
Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
Make the element itself absolutely positioned.
Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
So your code may seem like this
.main {
background-color: grey;
width: 1202px;
height: 156px;
position: relative;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
I hope you solved all the other problems.
Try modifying these rules:
.checkbox, .radio {
position: relative;
display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
margin-top: 10px;
margin-bottom: 10px;
}
.choice-select {
width: 173px;
display: inline-block; // added inline-block
}
.choice-input {
width: 176px; // reduced width.
display: inline-block; // added inline-block
}
Check the code below, i have put the html controls in separate divs with bootstrap grid classes to make them inline and added margin: 0 auto in .formContainer class
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="col-md-4">
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
</div>
<div class="col-md-4">
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
You should be able to do what you want with only bootstrap markup. I've forked your pen and modified it a little:
http://codepen.io/ugreen/pen/XjBpqX
<div class="container">
<div class="row">
<div class="col-md-3 text">
Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="col-md-5">
<div class="form-inline">
<div class="form-group">
<input type="checkbox" value="" checked>
<label>Lorem</label>
<input type="checkbox" value="">
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control choice-select">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Placeholder text">
</div>
</div>
</div>
<div class="col-md-4">
<div class="button-group">
<button class="btn btn-default">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
</div>
But it might be even better to do something like in the bootstrap docs about navbars:
http://getbootstrap.com/components/#navbar
I have this HTML code:
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "exampel#something.com"</span>
</div>
I've configured 'text-align: center' on the div but unfortunately span text is also centered (see the image below).
I need span to be near it and not centered.
You probably should center your parent element, and not div inside form:
.center-form {
text-align: center;
}
.center-form form {
display: inline-block;
text-align: left;
}
<div class="center-form">
<form action="">
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "exampel#something.com"</span>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<button>Submit</button>
</form>
</div>
Or if you want span not to affect form position, use position: absolute:
.center-form {
text-align: center;
}
.center-form form {
display: inline-block;
text-align: left;
}
.center-form form div {
position: relative;
}
.center-form form div span {
position: absolute;
left: 100%;
top: 0;
/* for demo */
white-space: nowrap;
}
<div class="center-form">
<form action="">
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "exampel#something.com"</span>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<button>Submit</button>
</form>
</div>
You should apply 'text-align: center;' on the input#cemail, not on the div.
What about a nice -
position: absolute
You get a free relative with the div. Then the error will never get in the way of the input box as its absolutely positioned.
Of course you will need to fix the top, left, right, bottom to conform to your design.
You can also do something like this, to allow wrapping of text.
body {
font-family: sans-serif;
}
input {
width: 160px;
position: relative;
left: 50%;
margin-left: -80px;
box-sizing: border-box;
}
p {
clear: right;
}
.legend {
float: right;
width: 50%;
}
.legend small {
background: #ccc;
display: block;
margin-left: 80px;
word-wrap: break-word;
padding: 0.5em;
}
<form>
<p>
<input type="text" placeholder="Your Last Name">
<span class="legend">
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur libero magna, ultrices vehicula dui hendrerit ut. Mauris dictum urna nec justo tristique, id rutrum sapien blandit. Ut pellentesque, augue ornare pellentesque dictum, sem lectus hendrerit massa, nec gravida elit mauris sit amet lorem.</small>
</span>
</p>
<p>
<input type="text" placeholder="Your User Name">
</p>
<p>
<input type="email" placeholder="Your Email">
<span class="legend">
<small>Proper format "exampel#something.com"</small>
</span>
</p>
<p>
<input type="text" placeholder="Your Password">
</p>
<p>
<input type="submit" value="Add Me Now">
</p>
</form>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span class="float-right">Proper format "exampel#something.com"</span>
</div>