View height is not coming right when open dev tools in browser - javascript

The background height is coming right but when we open the console the background shifts upwards leaving white space. I have tried both height: 100% AND height:100vh. Still it's not fixed
enter image description here
.main {
width: 100%;
height: 100vh;
float: left;
background: rgb(63, 63, 63);
background: radial-gradient(circle, rgba(63, 63, 63, 1) 0%, rgba(0, 0, 0, 1) 97%);
padding: 100px 0px 100px 0px;
}
<template>
<section class="main">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img :src="logo" width="100%"><br><br></div>
<div class="col-md-4"></div>
</div>
<div class="disclaimer font-weight-light animated-text">
<vue-typed-js
class="d-block"
:loop="true"
:strings="disclaimer"
>
<span class="typing"></span>
</vue-typed-js>
</div>
<div class="row mt-4 pt-4">
<div class="col-md-4"></div>
<div class="col-md-4">
<form autocomplete="off" #submit.prevent="submitNewsletter">
<input type="email" name="email" id="email" v-model='enteredEmail' ref='enteredEmail' placeholder="Enter Your Email" class="sub-feild">
<center>
<div class="mt-2">
<p class="error-message">{{errorMessage}}</p>
</div>
</center>
<center><button type="submit" class="cross_line">Subscribe</button></center>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
</template>


Apply height 100% on parent of main div like body,html etc.

Related

How can i make the row visible in small devices?

I have changed the margin in the row in the CSS file but it wont applied in small devices
<body style="background-color: #353839;">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="text-center mt-2" style="color: white;">Cyber Cloud</h1>
</div>
</div>
<div class="row r1 " style="background-color: black; ">
<div class="col-12 ">
<h3 class="text-center" style="color: white;">Join Now</h3>
<p class="text-center" style="color: white;">And Start Buying Games</p>
</div>
<div class="row ">
<div class="col-12 r2">
<input type="text" placeholder="Email"/>
</div>
</div>
</div>
</div>
My CSS:
.r1{
margin-left: 500px;
margin-right: 500px;
}
I have tried to apply bootstrap responsive CSS(added d-none d-lg-block) yet it doesn't work .

try to use media queries in css and set the display width of a device, use developer tools to change display width to simulate a device
#media only screen and (max-width: 600px){
.r1{
margin-left: 500px;
margin-right: 500px;
}
}
hope this works

Try this code.
Bootstrap 4 and 5 give you the ability to display or not to display an element.
I added d-md-none in that row you want to show in the small device, and it will not show on the wide devices.
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="text-center mt-2" style="color: black;">Cyber Cloud</h1>
</div>
</div>
<div class="row d-md-none" style="background-color: black; ">
<div class="col-12 ">
<h3 class="text-center" style="color: white;">Join Now</h3>
<p class="text-center" style="color: white;">And Start Buying Games</p>
</div>
<div class="row ">
<div class="col-12 r2">
<input type="text" placeholder="Email"/>
</div>
</div>
</div>
</div>

I cannot get the image to be responsive for a login split screen bootstrap design with image reload

I am working on a login split screen, and had it perfectly aligned with bootstrap:
It has been requested that the left side image change when the page reloads. I have found a way to do this with JavaScript, and worked it into my code, but it has made the images wonky. There is a space on the left side, an unnecessary scroll bar because the height is off as well, and the image is no longer responsive. Obviously I had to change the code to get the js to run, and the js runs perfectly, but now the layout is screwed up:
The css has stayed the same for both examples, but I feel I should share it anyways:
I have gotten so close, I just can't seem to figure out a way to fix the image. Any help would be greatly appreciated.
Here is the full code:
html:
<div class="container-fluid">
<div class="row no-gutter">
<!-- The image half -->
<div class="col-md-7 d-none d-md-flex bg-image">
<img id="myPicture" class="w-100">
</div>
<!-- The content half -->
<div class="col-md-5">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-7 mx-auto">
<h3 class="display-4">Student Login</h3>
<form action="index.html">
<div class="form-group mb-4">
<input id="inputStudentID" type="studentID" placeholder="Student ID"
required="required" autofocus=""class="form-control border-3 shadow-sm px-6">
</div>
<div class="form-group mb-4">
<input id="inputPassword" type="password" placeholder="Password"
required="required" class="form-control border-3 shadow-sm px-6">
</div>
<div class="custom-control custom-checkbox mb-4">
<input id="customCheck1" type="checkbox" checked class="custom-control-
input">
<label for="customCheck1" class="custom-control-label">Remember Me</label>
</div>
<button type="submit" style="margin-left: 1px"
class="btn btn-block text-uppercase mb-3 border-3 shadow-sm">Sign In</button>
<div class="text-center d-flex justify-content-between">
<p>Forgot Password?</p>
</div>
<div class="text-center d-flex justify-content-between">
<p>Need to <a href="https://my.ntc.edu/psp/csprod/?cmd=login">
Create Student Account?</a></p></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.login,
.image {
min-height: 100vh;
color: #999999;
font-family: "Roboto", sans-serif;
}
.bg-image {
background-size: cover;
background-position: center center;
}
p {
color: #999999;
}
a {
color: #4285f4;
}
a:hover {
text-decoration: none;
color: #0f459b;
}
.display-4 {
font-size: 40px;
color: #999999;
}
#inputStudentID,
#inputPassword {
padding: 25px 0 25px 12px;
}
.btn {
background-color: #4285f4;
color: white;
}
.btn:hover {
background-color: #0f459b;
color: white;
}
.has-error input[type="text"],
.has-error input[type="email"],
.has-error select {
border: 1px solid #a94442;
}
js:
<script type="text/javascript">
window.onload = choosePic;
var myPix = new Array("images/girls.png", "images/group.png",
"images/studentbw.png", "images/stairs.png",
"images/purple.png", "images/portrait.png");
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
}
</script>

Kindly use class="img-responsive" in image tag...
Kindly use class="img-responsive" in image tag...
<img id="myPicture" class="img-responsive" />
This change is enough for your issue....
This change is enough for your issue....

Align div to bottom of Bootstrap4 card-body

I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

why Html form is not displaying over image

I have designed one form below the image. Now, I want to display full responsive image in a background of the form.
I tried to code but the image is displaying inside the form rather than displaying a form on full width and height image.
Where is my mistake?
HTML
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">To</label>
<input type="text" name="f1-last-name" placeholder="To..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.formhold {
background: url(images/334.jpg);
background-size: cover;
}
form {
display: block;
margin: 0 auto;
}

You almost have the right idea.
I drew up a really quick code-pen mock up you can take a look at:
http://codepen.io/zsawaf/pen/vKRLAP
In summary your mistake was that you needed another container outside of the bootstrap columns that spans the entire page and holds a background image.
HTML:
<div class="container-fluid cover-img">
<div class="row">
<!-- whatever you want your form container to span -->
<div class="col-xs-offset-3 col-xs-6">
<div class="form-container">
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
</div>
</div>
</div>
</div>
SCSS:
.cover-img {
background-image: url(http://previews.123rf.com/images/9nong/9nong1404/9nong140400110/27534018-wood-chip-and-saw-dust-background-compressed-Stock-Photo.jpg);
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
.form-container {
margin-top: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
form {
margin: 20px 0;
input {
margin: 5px 0;
width: 100%;
height: 40px;
}
}
}

Like Sinan said, you need to give the form a width and height to match the image size.
I think you can take Sinan's code and combine it with this to expand the form's width and height to match the image size.
Let's say your image size is 1024x768, then:
form {
display: block;
margin: 0 auto;
width: 1024px;
height:768px;
}

You can do it like:
.formhold {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(images/334.jpg)
background-color: rgba(0, 0, 0, 0);
background-size: inherit;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 9999;
}

So i'm not sure if that worked for you but the last example was. Adding a wrapper div around the form with the container-fluid class and applying the background to that:
.wrapper {
background: url(images/334.jpg) no-repeat;
background-position: top center;
background-size: 100% auto;
}
And the HTML:
<div class="wrapper container-fluid">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
</div>
Here is the link to the latest jsFiddle.

Stop vertical line from scrolling

We have a modal window (div) which is separated to two sections with a vertical border - <div class="border"></div> with the following CSS:
.modal-body {
padding: 0px 15px;
}
.modal-body-left,
.modal-body-right {
float: left;
width: 381px;
padding: 0px 0px 15px;
}
.border {
border-left: 3px solid black;
position: absolute;
top: 0px;
bottom: 0px;
width: 0px;
left: 396px;
}
.modal-body-right {
margin-left: 15px;
}
The vertical line fits well into the parent div, but the problem is - if the parent div is very high and there is a vertical scroll bar, the vertical line scrolls with the scroll bar. How do we prevent it from scrolling (or change it's height to the full height of the parent div)? We don't want to put a border to the right or left sections, because they may not be the same height and we want the vertical border to cover the full height of its parent div.
Edit: this is the HTML (The contents are dynamic):
<div class="modal hide fade" id="...">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form method="post" id="...">
<div class="modal-body-left">
<h4>...</h4>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
</div>
<div class="border"></div>
<div class="modal-body-right">
<h4>...</h4>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
...
</div>
</div>

You might be interested in CSS overflow. For example, choosing the value: auto will only show the scrollbar when the content is too large.

Use CSS overflow property
.modal-body{
height:300px;//your prefered value
width:300px;//your prefered value
overflow:auto;
}
DEMO

Categories

Resources