I have two textfields inside a div. In Chrome, Opera and Safari, the second textfield is positioned a little bit more left than upper one.
Hovewer in Safari and IE it is positioned just right.
Here is the codepen for you to try : http://codepen.io/anon/pen/PwoKZr
Here is a simple image that shows the problem:
Here is the relevant part:
<body style="
font-size: 14px;">
<div id="container" class="container_16">
<div id="mainSection" class="grid_16">
<div id="newUserBox" style="
text-align: center;
">
<input id="userEmail" type="text" style="
/* text-align: center; */
width: 300px;
padding: 8px 10px;
font-size: 18px;
" placeholder="E-Mail"><br>
<input id="userPass" type="text" style="
/* text-align: center; */
width: 300px;
/* margin-right: 5px; */
margin-top: 10px;
padding: 8px 10px;
font-size: 18px;
" placeholder="Password">
<br>
<button style="
width: 324px;
margin-top: 10px;
border-radius: 0px; clear: both;
padding: 8px 10px; border: none; background-color: #3FC66F;
font-size: 20px; color: #fff;
">Log In</button>
</div>
</div>
</div>
</body>
Try not to use br to position the textboxes
Remove the br and apply the following styles
#newUserBox{text-align: center;width: 300px; margin:0 auto;}
Side note: try not to use inline-styles
Related
Could someone please help with adding padding between the chips so they're not touching one another and removing the background color of the 'x'.
Here is the .css
.chip{
display: inline-block;
padding: 0 25px;
padding-bottom: 25px;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
background-color: #f1f1f1;
img{
float: right !important;
background-color: #f1f1f1 !important;
}
}
<div>
<ion-label>Activities</ion-label>
<input type="text" [(ngModel)]="addActivities" (keyup.enter)="addActivity()"
placeholder="Enter activity">
</div>
<div class="chip" *ngFor="let activity of activities">
<label> {{ activity }} </label>
<button (click)="deleteActivity(activity)">
<img src="assets/img/ic-small-close.png"/>
</button>
</div>
Use margin in chip class within .scss file.
You can set margin: 5px or just right margin margin-right: 5px. It would work.
.chip{
display: inline-block;
padding: 0 25px;
padding-bottom: 25px;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
background-color: #f1f1f1;
margin: 5px;
}
.chip img{
float: right !important;
background-color: #f1f1f1 !important;
}
<div class="chip">
<label>Activity 1</label>
<button (click)="deleteActivity(activity)">
<img src="assets/img/ic-small-close.png"/>
</button>
</div>
<div class="chip">
<label>Activity 2</label>
<button (click)="deleteActivity(activity)">
<img src="assets/img/ic-small-close.png"/>
</button>
</div>
Based off what I see you might be able to get the border style you want by adding margins
.chip{
display: inline-block;
margin-left: 20px;
margin-right: 20px;
padding: 0 25px;
padding-bottom: 25px;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
background-color: #f1f1f1;
Apply margins for your .chip class.
see: https://www.w3schools.com/css/css_margin.asp
To change color of your close button you should apply the rule on button, not on the image (img), see below:
.chip button{
float: right !important;
background-color: #ff0000 !important;
}
.chip{
display: inline-block;
padding: 0 25px;
padding-bottom: 25px;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
background-color: #f1f1f1;
margin: 0 2px; /* margin-left: 2px; margin-right: 2px; */
}
.chip button{
float: right !important;
background-color: #ff0000 !important;
}
<div>
<ion-label>Activities</ion-label>
<input type="text" placeholder="Enter activity">
</div>
<div class="chip" >
<label> chip 01 </label>
<button>
x
</button>
</div>
<div class="chip" >
<label> chip 02 </label>
<button>
x
</button>
</div>
<div class="chip" >
<label> chip 03 </label>
<button>
x
</button>
</div>
<div class="chip" >
<label> chip 04 </label>
<button>
x
</button>
</div>
I am trying to center a form inside a div and have another div on the right that is slightly indented but I can not get the elements to line up.
How do I do this with CSS?
Also, is it possible to align the right hand div in the center on a new line if the content doesn't fit on a page?
.lander-form {
margin: auto;
}
.lander-add {
float: right;
margin-right: 50px;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
What you need is float:left;. Your two divs that you want side-by-side are .lander-form and .lander-add. What you have is, .lander-add is set to float:right;. This is a common beginner mistake. Both halves of the page should be float:left, you would think it would make more sense to make one of them float:right, but this is not the case.
I made the width for .lander-form 65%, expanded on the margins, and made the width for .lander-add "auto". This should work the way you want it to, with the right half of the page appearing below the left, when the viewing area is small or resized. Notice the difference when you run my code snippet, between the result that appears below, and the full-size result page.
.lander-form {
margin: auto;
float:left;
width:65%;
margin-bottom:20px;
margin-right:15px;
}
.lander-add {
float: left;
min-width:20%;
width:auto;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
Using flex is often a great way to deal with layouts. Try this on your .container-lander div to align the items next to each other as well as having them vertically centered (additionally, this will also wrap the items when there's not enough space to place them next to each other):
CSS:
.container-lander {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
}
Here is a live example (JSFiddle).
So here is my box:
BOX
Ok, now I want to add box near the input of the BET box.
<div id="x2"></div> <!-- HTML --->
/* CSS */
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
}
The box after I add it:
BOX-AFTER
As you can see, it messed up the thin gray line and everything underneath it. I'm really not sure why.
HTML:
<div class="gamebox">
<div id="bet-and-chance-texts">
<p id="bettext">BET</p>
<p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p>
</div>
<div id="bet-and-chance-input-boxes">
<input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off">
<div id="x2">x2</div>
<input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off">
</div>
<br>
<div class="line-separator"></div>
<div id="button-texts">
<p id="roll">ROLL UNDER</p>
<p id="payout">PAYOUT</p>
<p id="chance">CHANCE</p>
</div>
<div id="buttons">
<input class="hidden-boxed-input-roll" value = "50.00"/>
<input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/>
<input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/>
</div>
<br>
<div id="rolldice-section">
<button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button>
</div>
</div>
CSS:
.gamebox {
height: auto;
padding: 20px;
width: 60%;
font-family: Helvetica Neue;
color: black;
margin-top: 20px;
margin-left: 20px;
background-color: white;
}
.line-separator{
height:.5px;
background: lightgray;
border-bottom:.5px solid lightgray;
}
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
float: left;
}
input[class="default"]{
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
text-align: center;
background-color: #E4ECF1;
display: inline-block;
}
p[id="roll"]{
display: inline-block;
float: left;
font-size: 13px;
}
p[id="payout"]{
display: inline-block;
margin-right: 25px;
font-size: 13px;
}
p[id="chance"]{
display: inline-block;
float: right;
font-size: 13px;
}
div[id=button-texts]{
text-align: center;
}
Why does everything below the thin gray line get messed up? How can I solve this?
Change this :
<div id="x2">x2</div>
to :
<span id="x2">x2</span>
since div have block display and you need to use span which is inline
then change your style, remove float and add some padding to #x2 :
#x2 {
padding: 13px;
width: 40px;
height: 40px;
background: cornflowerblue;
}
Hi I've created an angularJs partial. It's a form. However the black bottom bit(form wrapper footer) where the 'next' button is won't go to the bottom/stay at the bottom of the page. It leaves an awkward gap. I want it to mirror the top.
As you can see in the image attachment.
I've spent hours fiddling around and I can't get it to go to the bottom. Any help would be greatly appreciated thanks.
If I use :
position:absolute;
bottom: 0;
It works but it makes the bottom div go beyond the scope to the right.
.form-wrapperTitle {
width: 100%;
height: 15%;
padding-top: 13px;
padding-bottom: 13px;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
margin-bottom: 30px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
font-family: Arial;
}
.form-wrapper {
width: 80%;
height: 60%;
margin: 50px auto;
overflow: hidden;
background: #1e1e1e;
border-radius: 6px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .8);
color: #bfbfbf;
}
.form-wrapperFooter {
width: 100%;
height: 15%;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
/* margin-bottom: 30px;*/
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
font-family: Arial;
padding-top: 13px;
padding-bottom: 13px;
}
<section class="form-wrapper">
<div class="form-wrapperTitle">Name Your Goal</div>
<br>Here's where it all starts. Saving into your investments with Clear Finance is all about goals.
<br>Everyone saves for something - even if you're not quite sure what it is yet.
<br>
<br>
<form class="form-horizontal" role="form">
<div class=" form-group">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">Form Goal</label>
<div class="col-sm-8">
<input type="text" class="form-control" ng-model="formGoal" placeholder="What is your goal?">
<br>
<strong>Your Goal is:</strong>
<h5>{{formGoal}}</h5>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="form-wrapperFooter">
<button class="btn btn-primary" ng-click="goToNextState('form.goalamount')">Next</button>
</section>
</div>
This can help you:
.form-wrapperFooter{
position:absolute;
bottom:0px;
}
This will work for you if you have very less content on you page that does not take up the height of the whole page.
You were almost there, But you missed a vital piece of the puuzzle:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Make your parent relative, and your child Absolute (in terms of positioning).
so your form-wrapper class should include:
position: relative;
padding-bottom:30px;
and your form-wrapperFooter should include:
position:absolute;
bottom:0;
I have also corrected your markup in order for it to be correctly rendered in terms of browser compatibility.
You may want to play with the values, but I think this is the general jist of it:
See below for a working demo:
.form-wrapperTitle {
width: 100%;
height: 15%;
padding-top: 13px;
padding-bottom: 13px;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
margin-bottom: 30px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
font-family: Arial;
}
.form-wrapper {
width: 80%;
height: 65%;
margin: 50px auto;
overflow: hidden;
background: #1e1e1e;
border-radius: 6px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .8);
color: #bfbfbf;
padding-bottom:30px;
position:relative;
}
.form-wrapperFooter {
width: 100%;
height: 5%;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
/* margin-bottom: 30px;*/
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
font-family: Arial;
padding-top: 13px;
padding-bottom: 13px;
position:absolute;
bottom:0;
}
<section class="form-wrapper">
<div class="form-wrapperTitle">Name Your Goal</div>
<br>Here's where it all starts. Saving into your investments with Clear Finance is all about goals.
<br>Everyone saves for something - even if you're not quite sure what it is yet.
<br>
<br>
<form class="form-horizontal" role="form">
<div class=" form-group">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">Form Goal</label>
<div class="col-sm-8">
<input type="text" class="form-control" ng-model="formGoal" placeholder="What is your goal?">
<br>
<strong>Your Goal is:</strong>
<h5>{{formGoal}}</h5>
</div>
</div>
</div>
</div>
</form>
<div class="form-wrapperFooter">
<button class="btn btn-primary" ng-click="goToNextState('form.goalamount')">Next</button>
</div>
</section>
Try below code:
Align bottom of the page - Add position: relative; to wrapper of the .form-wrapperFooter.
.form-wrapperFooter{
position:absolute;
bottom:0px;
}
Align bottom of the browser
.form-wrapperFooter{
position: fixed;
bottom: 0;
}
The
position: absolute;
bottom: 0;
worked...but the Div went beyond to the right.
so I changed the percentage from 100% to 80%
This is odd considering I wanted the div to fill 100% of the inside div. Changing it to 80% seems to have corrected it. No idea how it worked. Thanks for the input.
I have been trying to play with line-height, formatting input for all browsers, padding, vertical-align and so forth but my placeholder still is in the middle of the box. Any suggestions?
I tried testing my code within jsfiddle to see if maybe it's just my css file, however; the results are the same.
http://jsfiddle.net/f0o4bcnv/
#postdoc {
background-color: gray;
width: 780px;
height: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid black;
margin-top: 30px;
margin-left: 30px;
padding-top: 30px;
float: right;
}
#postdoc label {
float: left;
width: 200px;
text-align: right;
margin-right: 10px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-size: 25px;
margin-bottom: 30px;
margin-left: 20px;
}
#postdoc input[type="text"] {
margin-bottom: 30px;
height: 300px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black;
vertical-align: top;
/*padding-top: 0;*/
/*line-height: normal;*/
/*line-height: none;*/
/*vertical-align: top;*/
/*-webkit-input-placeholder: line-height: 1.5em;
-moz-placeholder: line-height: 1.5em;
-moz-placeholder: line-height: 1.5em;
-ms-input-placeholder: line-height: 1.5em;*/
}
#postdoc input[type="file"] {
margin-bottom: 30px;
height: 50px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black
}
#postdoc input[type="submit"] {
margin-bottom: 30px;
height: 45px;
width: 250px;
font-size: 30px;
margin-right: 100px;
float: right;
background-color: #4EA24E;
color: blue;
border-radius: 5px;
text-shadow: 0 0 10px yellow;
box-shadow: 0 0 10px black;
font-family: Rockwell, 'Courier Bold', serif;
}
#postdoc input[type="submit"]:hover {
color: gold;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prostylesheet.css" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<body>
<h1 class="name"><font color = "#3399FF"> Prog-Assist | </font><font size = "12" font color = "#4EA24E"> Programs Deployed</font></h1>
<div id="header">
<div id="gradient">
<div class="nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class="container-fluid">
<ul id="nav1" class="text-left">
<li><strong>Home
</li>
<li>Technologies
</li>
<li>Programs
</li>
<li>Blog</strong>
</li>
</ul>
<ul id="nav2" class="text-right">
<li><strong>Sign In
</li>
<li>Contact</strong>
</li>
</ul>
</div>
<!-- end container-fluid-->
</div>
<!--end nav-->
</div>
</div>
<!-- end header -->
<form id="postdoc" action="upload.php" method="POST" enctype="multipart/form-data">
<label>Comment:</label>
<input type="text" name="comment" placeholder="Comments">
<br>
<label>Text Document:</label>
<input type="file" name="documentfile" />
<br>
<input type="submit" name="submit" value="Post comment" class="button">
</form>
</body>
</html>
For this cases (multiline) you should use textarea:
<textarea style="height: 500px; width: 100%;">
Comments
</textarea>
Note: Input element only support single line.
I don't have an actual explanation for this. My guess would be the height distibutes evenly from top to bottom so the text sits in the middle. A solution would be to use padding instead:
#postdoc input[type="text"] {
margin-bottom: 30px;
/*height: 300px*/ //remove
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black;
padding: 0 0 50px; //add
}
FIDDLE
But if this is not for cosmetics and you're looking to let a user type a block of text, you should use <textarea></textarea> instead of <input/>.
You should use textarea instead of input.
Look this fiddle:
<textarea name="comment" placeholder="Comments"></textarea>
http://jsfiddle.net/f0o4bcnv/4/
To style the placeholder you can also use this css code:
::-webkit-input-placeholder { /* WebKit browsers */
color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
}
Note that only works on newer browsers.