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.
Related
I am trying to see how the page looks like on a 1366x768 laptop.
In Inspect device it looks perfectly fine:
But on the actual laptop, it looks like this:
So way off! :-/ It is very frustrating as I work on a big screen, and I cannot check it on the small laptop screen every minute.
How comes the page fits perfectly fine in the 1366x768's chrome device inspect but horribly on the actual 1366x768 screen?
Any tip what may be going on?
CSS:
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
}
/* Control the right side */
.right {
right: 0;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
color:black;
max-width: 560px;
min-width: 500px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border-color: #eee;
border-width: 1px;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.Forgot-Password {
font-family: "Roboto";
font-size: 17px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
margin-top:15px;
text-align: center;
color: #555556;
}
.form button {
font-family: "Roboto", sans-serif;
outline: 0;
background:#009bf7;
width: 100%;
border: 0;
padding: 15px;
font-size: 17px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
color:white;
}
.form button:hover,.form button:active,.form button:focus {
background:#0c6ea7
}
.form button:disabled {
background: #dddddd;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
The HTML markup:
<div class="split left">
<div class="centered">
<div style="margin-bottom:60px">
<img class="img-responsive" src="images/fineon.png" alt="Fineon"> </div>
<style>
.navbar {
display: none;
}
.navbar-primary {
display: none;
}
</style>
<div ng-controller="login-controller" ng-init="initLoginPage()">
<div align="center">{{message}}</div>
<form class="login-form form">
<p class="form-login-title" dir="{{pageInfo.direction}}">{{gs("signIn", "Sign in")}}</p>
<hr style="margin-right:370px;border: 1px solid black;" width="15%">
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.email">
<label for="first_name">{{gs("emailAddress", "Email Address")}}</label>
</div>
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.password">
<label for="first_name">{{gs("password", "Password")}}</label>
</div>
<button ng-disabled="crisperSessionId == undefined" dir="{{pageInfo.direction}}" ng-click="login()"
type="submit">{{gs("signInButton", "Sign in")}}</button>
<p class="Forgot-Password"><a class="Forgot-Password" href="#/loginForgot">Forgot my password</a></p>
</form>
</div>
</div>
<div class="split right ">
<div class="centered">
<h4 class="Fineon-Exchange">Fineon</h4> <br>
<p class="Export-Receivable-Finance-Marketplace" >Trade Finance & Marketplace</p>
<div style="width:70px; margin-top:50px">
<hr style="border: 1px solid white;">
</div>
</div>
</div>
</div>
Although I am not a hard core programer or any expert, but I think I know what might be wrong. The Inspect Element of your browser shows your page in a 1366x768 resolution. Whereas on the laptop, you are actually viewing the page in 1366-(top and bottom toolbars pixels) x 768-(scroll bar width pixels) resolution. So, the laptop has resolution of 1366x768 but actual displayable resolution is lesser than that and, in my opinion, is the problem.
Now you can either get the actual displayable resolution from the laptop and set as custom resolution in your chrome inspect tool or press f11 on your laptop to see the page in actual 1366x768 resolution.
I am trying to position the search bar on a background image. I am also trying to position a button at the bottom and center of the image. Following that, I will have containers.
What I am trying to achieve.
But what I am stuck and confused with positioning. The glyphicon is not working as well?
My Code
<style>
.card {
border: 0px solid;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius: 0px;
}
.container-fluid {
width: auto
}
.container-fluid.drop-shadow {
margin-top: 2%;
margin-left: 5%;
margin-right: 5%
}
.img-fluid {
height: 200px;
}
#child {
width: 100%;
height: 20px;
margin: auto;
text-align: center;
bottom: 0px;
position: absolute;
}
.btn-checkin {
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
</style>
</head>
<body id="page-top">
<div class="card">
<img class="img-fluid" src="img/1847p.png" alt="Card image cap">
<div class="col-md-5">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" style="height:30px;position:absolute" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
</div>
<div id="child">
<button class="btn-checkin">Check in</button>
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
</div>
Problems to target :
Get the search bar on the background pic
Set the background pic always on top of the screen with full width but with certain height. I currently hard coded the height to 200px. Is there a way that it can be responsive?
I am also stuck with the glyphycon issue, why is it not displayed?
How do I position the button at the bottom of the image and in the
center?
Use margin-top with negative value to make the form goes on the image.
Glyphicons look to be working great simply here.
* {
box-sizing: border-box;
}
img {
width: 100%;
}
div#form-box {
margin-top: -95px;
text-align: center;
}
div#input-group {
width: 80%;
margin: 0 auto 20px;
position: relative;
background-color: #fff;
border: none;
border-radius: 5px;
}
input#email, label[for="email"] {
display:inline-block;
vertical-align: middle;
}
input#email {
width: calc(100% - 40px);
padding: 10px;
border: none;
}
label[for="email"] {
width: 40px;
line-height: 40px;
}
button#btn-checkin {
display: inline-block;
padding: 6px 10px;
border: none;
border-radius: 5px;
background-color: #EC008c;
color: #fff;
text-align: center;
text-transform: uppercase;
}
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>
<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />
<div id="form-box">
<form>
<div id="input-group">
<label for="email" class="glyphicon glyphicon-search"></label><!--
--><input type="text" placeholder="Search Class" id="email">
</div>
<br/>
<button id="btn-checkin">Check-in</button>
</form>
</div>
<br/>
<br/>
<br/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
.img-fluid {
height: 200px;
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body id="page-top">
<div class="card" >
<!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
<button class="btn-checkin">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
Try this code...If you need any help, let me know.
Ok so you want to position the search bar inside a image.
Make a div with the image as background
background: image_source;
background-size: contain;
position: relative; //must to write
width: 100%;
height: 100px; //as much as you want
Then the css for search bar
position: absolute;
then use top, left,etc to position the search bar
I have a case I am not sure how to figure it out.
I am trying to do a design to put a button over a textbox, to make my layout looks nice, but when users start typing information in textbox, it hides behind the button. I know I have 1 of 2 solutions, but I don't know how to do it:
1- either to find another way to do the layout.
2- limit the number of lines for the user to enter, but this way I am going to have a restriction for long data.
Below is my HTML and CSS:
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
}
.nl-btn-main .nl-btn{
border-radius: 5px;
background: blue;
color: white;
left: -50px;
position: relative;
}
.nl-txt-main .nl-txt {
width: 200px;
border-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I want the button to be like part of the textbox itself, When you try to run the code, and write a long sentence in the textbox, it will hide under the button. How do I solve it?
Thank you.
Remove left:-50px; from you button
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
margin:0;
}
.nl-btn-main .nl-btn{
background: blue;
color: white;
left: -4px;
position: relative;
border-bottom-right-radius: 5px;
margin:0;
border-top-right-radius: 5px;
}
.nl-txt-main .nl-txt {
width: 200px;
border-bottom-left-radius: 5px;
margin:0;
border-top-left-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I'm using bootstrap and I want to have an embedded video and div side by side with same height. Tried different solutions posted here on SO, but couldn't get any of them to work.
HTML & CSS is like this:
header {
background: url("../img/header.jpg");
background-size: cover;
min-height: 595px;
font-family: Myriad Pro;
color: #FFF;
text-align: center;
font-weight: bold;
padding-top: 60px;
}
.headerForm {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
margin-top: 25px;
padding: 25px;
text-align: left;
height: 100%;
}
.form {
color: #fff;
text-align: center;
width: 100%;
}
.form input {
color: #a5a5a5;
margin-right: 5px;
margin-top: 10px;
}
.headerVideo {
border: 10px #FFF solid;
border-radius: 8px;
margin-top: 25px;
margin-bottom: 25px;
}
<div class="container-fluid">
<div class="row">
<div>
<header>
<h2>Title</h2>
<small>Slogan</small>
<br>
<div class="col-sm-6">
<div class="headerForm">
<h3>
Be contacted by a and receive
updates about the new .
</h3>
<small class="form">
Sign up for information about , events,
demonstrations and more.
</small>
<form action="#" class="form">
<input type="text" name="firstname" value="Etunimi">
<input type="text" name="lastname" value="Sukunimi">
<input type="email" name="email" value="Sähköposti">
<input type="phone" name="phone" value="Puhelinnumero">
<input type="text" name="address" value="Osoite">
<input type="text" name="postal" value="Postinumero">
<br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="col-md-6">
<div class="headerVideo embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gkTb9GP9lVI" allowfullscreen></iframe>
</div>
</div>
</header>
</div>
</div>
</div>
Here is how it shows up in browser:
That red rectangle there shows how left div is not having the same height as right div. I want them to be same height, always. Any help is appreciated!
You have padding: 25px; in .headerform but margin-bottom: 25px; in .headerVideo.
try do the same for both
.headerForm {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
margin-top: 25px;
margin-bottom: 25px;
text-align: left;
height: 100%;
}
Answer for this was obvious. Added fixed heights for both .headerVideo and .headerForm and fixed margins.
.headerVideo {
border: 10px #FFF solid;
border-radius: 8px;
margin-top: 25px;
margin-bottom: 25px;
height: 300px;
}
.headerForm {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
margin-bottom: 25px;
padding: 25px;
text-align: left;
height: 300px;
}
I have problem with google re-Captcha. It happens rarely, but still, sometimes the image is not displayed correctly. It misses some parts. Here is the image:
http://bit.ly/1olZoih
Here is my Html:
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Error: Invalid code, please try again</div>
<div class="recaptcha_only_if_image">Please enter the code from the image above:</div>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div><img id = "restart-button" src="/images/restart.png" width = "20px" height = "20px"></div>
</div>
And I apply only this css to it:
#recaptcha_widget{
margin-top: 10px;
width:508px;
}
.recaptcha_only_if_image{
margin-left: 3px;
margin-bottom:7px;
line-height: 20px;
color: #747474;
font-size:13px;
}
#recaptcha_response_field{
width: 233px;
height: 21px;
padding-left: 7px;
border: 1px solid #dadada;
border-radius: 2px;
color: #4d4d4d;
float:left;
}
#recaptcha_response_field:focus{
outline:rgb(184, 167, 130) auto 2px;
}
#restart-button{
margin-top: 2px;
margin-left: 10px;
}
#recaptcha_image{
margin-bottom: 10px;
}
#recaptcha_challenge_image{
border: solid 1px #e2e2e2;
border-radius: 5px;
}
I'm not resizing the picture and it comes 300x57 px.
Thanks in advance :)
Try giving width to the Captcha div.
Width: ;