I am aware this is very basic but I have been trying so many ways of removing the white space on the right side of my page yet still it's been a little problem for me as a learner. The sign_in and paratext are inline as shown but when I used set the margins and paddings to 0 to remove the white space from the right side of my page, the sign in (which is the login form) moves below the paratext instead of staying inline.
Here you go. Hope this helps you.
body {
margin: 0;
padding: 0;
}
.sign_in {
display: inline-block;
width: 55%;
font-size: 3vw;
margin-left: 30px;
}
.paratext {
display: inline-block;
font-size: 3vw;
width: 35%;
color: #008B8B;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure. </p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1 style="color:#008B8B; font-weight: 900; font-size: 40px;" > <b>Sign In </b></h1><br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me" >
<label >Remember Me </label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<p class="text-right"><span class="forgot-password"><a style=" color:#008B8B;" href="#">Forgot password?</a></span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<button class="button" type="submit" style="font-weight: 900; background-color:#008B8B;" ><span>Login </span></button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<p class="text-right">
<span><a style="color:#008B8B;" href="#">Already a member?</a></span></p>
</div>
</div>
</div>
</form>
</div>
</body>
<html>
I have refactored your code by removing irrelevant row classes and inline styles. You also specified sign_in{width:70%}, but haven't specified what is 100%, so I added body{width:100%}. In addition to that, I commented out certain paddings and margins you can see that in the example below.
body{width: 100%;}
.paratext, h1, a{color:#008B8B;}
h1{
font-weight: 900;
font-size: 40px;
}
.form-group button{
font-weight: 900;
background-color:#008B8B;
}
.sign_in {
width: 70%;
/*margin-right: -30%;*/
}
.paratext {
display: inline-block;
/*padding-top: 250px;*/
font-size: 16px;
word-wrap: break-word;
/*width: 600px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure.</p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1>Sign In</h1>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me">
<label>Remember Me</label>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right forgot-password">Forgot password?</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="button" type="submit">Login</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right">Already a member?</p>
</div>
</div>
</div>
</form>
</div>
</body>
Try this code example in your project and see if the problem remains. If you still have a problem then you need to update you question with the rest of the codebase you have.
Related
Here is the code of a login form on which I'm working on:
<main>
<div class="container-fluid">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-6">
<h3 class="display-3">Sign In<h3>
<form class="justify-content-md-center">
<div class="col-md-auto">
<input type="text" required placeholder=" Username"
style="font-family:Arial, FontAwesome">
</div>
<div class="col-md-auto">
<input class="margin-25px" type="password" requires
placeholder=" Password"
style="font-family:Arial, FontAwesome">
</div>
<div class="container-fluid row justify-content-md-center">
<div class="col-sm">
<img class="icon" src="images/check-box.svg"
alt="check-box">
</div>
<div class="col-auto">
<p>Forgot your password?</p>
</div>
</div>
<button class="login__button btn btn-primary" type="submit">
LOGIN
</button>
</form>
</div>
</div>
</div>
</main>
I tried to do the layout with bootstrap grid, but can't find how to nest these two object, which are image with the class icon and the paragraph.
how it looks in chrome
You may use the following lines:
#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 600px;
height: 320px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="Login">
</div>
<div id="register-link" class="text-right">
Forgot your password ?
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I already found it in the codepen and I can't remember the author's name to mention here.
I have a form, I have in this two fields inline because they are in a form-inline div, I want to put the label of these above the fields and not next to them. How to remove form-inline from them without affecting the fields?
Here is a CodePen
<main id="contact_part">
<article class="mb-5 row">
<h1>Nous Contacter</h1>
<div class="col-md-12">
<form action="" method="post" id="contact_form">
<div class="form-inline">
<label class="" for="name_contact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name_contact" placeholder="Nom" required>
<label class="" for="lastNameContact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="lastName_contact" placeholder="Prénom" required>
</div>
<div class="form-group">
<label class="" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="E-Mail" required>
</div>
<div class="form-group">
<label class="" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" required></textarea>
</div>
</form>
</div>
</article>
</main>
#contact_part article {
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
#contact_part .row {
display: block;
}
#contact_part h1 {
font-size: 1.7rem;
text-transform: uppercase;
margin-bottom: 3rem;
text-decoration: underline;
text-align: center;
}
#contact_form {
width: 50%;
margin: 0 auto;
}
#contact_form .form-inline label {
}
#contact_form input, #contact_form textarea {
border: none;
border-bottom: 1px solid #C6C6C6;
background-color: #FFF989;
}
If I understand correctly you no need to use form-inline class instead use like below code. Your form will look good.
<main id="contact_part">
<div class="container">
<article class="mb-5 row">
<div class="col-12">
<h1>Nous Contacter</h1>
</div>
<div class="col-12">
<form action="" method="post" id="contact_form">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="name_contact">First Name</label>
<input type="text" class="form-control" id="name_contact" placeholder="First Name" required>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="lastNameContact">Last Name</label>
<input type="text" class="form-control" id="lastName_contact" placeholder="Last Name" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="example#example.com" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" rows="5" required></textarea>
</div>
</div>
</div>
</form>
</div>
</article>
</div>
</main>
Code Pen.
Use col-12 instead of col-md-12 class for better performance. Don't use row without container or container-fluid. If you use only row it give you horizontal scroll bar. Your code will look like this.
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
Or
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
</div>
Fluid view or 100% Browser width
<div class="container-fluid">
<div class="row">
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
</div>
</div>
Hope this help!
Here you go, let me know if this works: https://codepen.io/luke-richter/pen/XWJVqWO
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#contact_part{
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<main id="contact_part">
<div class="container ">
<div class="row">
<h2>Inline form with heading above inputs</h2>
</div>
<form action="#">
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-sm">
<label for="firstname" class="control-label">Firstname1</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name2</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name3</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-3"><br>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
Try this,
.form-inline label
{
margin-bottom:3em;
}
Or You can move the label outside the<div class="form-inline">
I want to make a html page with three sections and inside each section divide it to left and right. In each section I have three boxes and I want to put two boxes on the left and one box on the right following is the css and html code:
.leftbox {
width: 50%;
padding: 5px;
float: left;
}
.rightbox {
width: 50%;
padding: 5px;
float: right;
}
<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">
<h2 class="popup-header">Rotation Forms</h2>
<div class="newRotation-sections">
<h3>Details</h3>
<div class="newRotation-section-1" style="margin-top: 10px;">
<div class="leftbox">
<span>Mob</span> <br />
<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />
<span>Paddock</span> <br />
<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Date</span> <br />
<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />
</div>
</div>
<h3>Fencing options</h3>
<div class="newRotation-section-2" style="margin-top: 10px;">
<div class="leftbox">
<span>Available Today</span> <br />
<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />
<span>Paddock Allocation %</span> <br />
<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Required Result</span> <br />
<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />
</div>
</div>
<h3>Assign As Task</h3>
</div>
</div>
</div>
I receive the below result, I don't know why the fencing options jump to the right side.
Here is the image of my work:
I wrote up this using the Bootstrap Framework. It matches your image exactly.
There's a Codepen if you want to fork and play around with it. It's responsive, too.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>
<h4 class="mb-3 mt-3">Details</h4>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="mob">Mob</label>
<input type="text" class="form-control" id="mob" placeholder="Enter Mob">
</div>
<div class="form-group">
<label for="paddock">Paddock</label>
<input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Enter Date">
</div>
<h4 class="mb-3 mt-3">Fencing Options</h4>
<div class="form-group">
<label for="avail">Available Today</label>
<input type="text" class="form-control" id="avail" placeholder="NaN">
</div>
<div class="form-group">
<label for="allocation">Paddock Allocation %</label>
<input type="number" class="form-control" id="allocation" placeholder="100">
</div>
<div class="form-group">
<label for="result">Required Result</label>
<input type="text" class="form-control" id="result" placeholder="NaN">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<h4 class="mb-3 mt-3">Assign As Task</h4>
<div class="form-group">
<label for="assign">Assign to</label><br>
<button type="submit" class="btn btn-success btn-md" id="assign">Add</button>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checked">
<label class="form-check-label" for="checked">I want to see this too.</label>
</div>
<button type="button" class="btn btn-success btn-md">Save</button>
<button type="button" class="btn btn-success btn-md">Cancel</button>
</div>
</div>
</div>
With the below code, the summary and it's text box are aligned inline.But the text box for description is appearing below the label 'description'. How can I make it align inline? Please help me in resolving this.
.left {
width: 30%;
float: left;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
float: left;
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
Try like this: Demo
If you need multi line text box, use textarea instead of input type text
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
<div class="col-md-6 col-sm-12">
<input type="text" class="form-control" name="Summary" size="50">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
<div class="col-md-6 col-sm-12">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>
Edit:
As you mentioned, its not form-control class, its form-control-label.. You can get more info here
Updated Demo: To change the height, try chnaging the value of rows="8" for <textarea>
If you're using Bootstrap (as the classes on your code suggest). I would recommend using their form layout options. Sounds like you want a Horizontal Form:
Docs
For Example:
<form class="form-horizontal">
<div class="form-group">
<label for="summary" class="col-sm-2 control-label">Summary</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="summary" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" style="height:100px;width:400px" />
</div>
</div>
</form>
<input class="right" type="text" name="Description" style="height:100px;width:400px;">
Remove width from input of description, also please change to textarea, instead of input.
You have already used bootstrap framework.so that there is no need to write extra css for inline forms. follow the following code
<div class="form-group">
<label class="col-lg-3 control-label ">City</label>
<div class="col-lg-9">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="city">City</label>
<input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
</div>
</div>
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="county">County</label>
<input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
</div>
</div>
</div>
</div>
</div>
Like this?
https://jsfiddle.net/d6tscd18/
.left {
width: 30%;
display: inline-block;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
display: inline-block;
}
try this:
<html>
<head>
<title>sample</title>
<style type="text/css">
.left {
width: 30%;
display: inline-block;
text-align: right
}
.right {
margin-left: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font- size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
If you have trouble getting it in place you can also force a table layout without using tables:
.login-form {
display: table;
}
.login-form>div {
display: table-row;
}
.cell {
display:table-cell;
vertical-align: top;
}
...
Adding a div around the inputs and a "cell" class (and shouldn't it be a textarea?):
...
<form action="post" class="login-form">
<div>
<label class="left cell">Summary:</label>
<div class="cell">
<input class="right" type="text" name="Summary" size="50">
</div>
</div>
<div>
<label class="left cell">Description:</label>
<div class="cell">
<textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
</div>
</div>
</form>
...
Check it here
Remove the style attribute from the description input type, it will then appear as the summary input box.
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description">
I'm building a form using Bootstrap in which I need to place many inputs on one line like if it where a Spreadsheet. So using the regular Bootstrap grid system I did this (snippet):
<div class="col-sm-1">
<div class="form-group">
<textarea placeholder="Description" class="form-control" rows="1" required></textarea>
</div>
</div>
<div class="col-sm-1">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
etc.
which results in:
Obviously that looks horrible. For this specific form I need to place the inputs closer to eachother so that they (almost) touch eachother.
Does anybody know how I can style this better? All tips are welcome!
You could override the padding on the col-sm-* with a class like this
.inputItem {
padding-left: 2px;
padding-right: 2px;
}
This might be useful.
You can adjust your column padding by media queries in the event you want the form to stack on smaller devices so the padding returns to normal.
#media (min-width: 768px) {
form .form-gutter >[class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
}
form .form-control,
form .input-group-addon {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form">
<div class="container-fluid">
<h1>Form </h1>
<div class="row form-gutter">
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<input placeholder="Contract rental" class="form-control" type="text">
<div class="input-group-addon">€</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Some</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Thing</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</form>