Hello I'm trying to show modal with jinja2 (if - else)
because I can't use javascript.
this is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>lidar - signup </title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/sign-in/">
<link href="../../static/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<!-- Custom styles for this template -->
<link href="../../static/css/signin.css" rel="stylesheet">
<link href="../../static/css/modals.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="text-center">
{%if ErrorTitle%}
<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header border-bottom-0">
<h5 class="modal-title">{{ErrorTitle}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label=Close></button>
</div>
<div class="modal-body py-0">
<p>{{ErrorMessage}}</p>
</div>
<div class="modal-footer flex-column border-top-0">
<button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
{%endif%}
<main class="form-signin w-100 m-auto">
<form method="POST" action="/register">
<img class="mb-4" src="../../static/image/hashtag.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">register</h1>
<div class="form-floating">
<input type="id" class="form-control" id="id" placeholder="name#example.com" required>
<label for="floatingInput">id</label>
</div>
<div class="form-floating">
<input type="usernick" class="form-control" id="usernick" placeholder="name" required>
<label for="floatingInput">nickname</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Password" required>
<label for="floatingPassword">비password</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="repassword" placeholder="Password" required>
<label for="floatingPassword">repassword</label>
</div>
<button class="w-100 btn btn-lg btn-primary" id="form_submit" type="submit">signup</button>
<p class="mt-5 mb-3 text-muted">© lidar</p>
</form>
</main>
</body>
</html>
this is error img.
modal popup is slides the existing page sideways.
https://i.stack.imgur.com/JR1Xu.png
if trigger modal, yes existing page is go away to sideways.
I used bootstrap example.
css also bootstrap example.
How can I fix it? thanks.
<div class="modal-dialog" role="document" style="margin-top:10%">
You can use in-line style to adjust the margin.
Related
I created a sign up page with HTML and Bootstrap 5. I made a Validation for this page with the help of Bootstrap. When the registration is complete, a Modal appears. However, there is a problem. Modal opens even if there is an empty space in the form section, that is, even if there is a Validation error. How can I prevent this?
I wrote a code like this:
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks for help.
I couldn't think of a solution.
Catch the show.bs.modal and test the validity again
Alternatively count if the number of .was-validated equals number of forms on the page
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
[...forms]
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
document.getElementById('exampleModal').addEventListener('show.bs.modal', function(e) {
const errors = [...forms].some(form => !form.checkValidity());
if (errors) e.preventDefault();
});
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Here is a version with only one form
(function() {
'use strict'
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', (e) => {
const thisForm = e.target;
if (!thisForm.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
thisForm.classList.add('was-validated')
});
document.getElementById('exampleModal').addEventListener('show.bs.modal', (e) => {
if (!form.checkValidity()) e.preventDefault();
});
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I am making a website for learning purposes in HTML with a sign-in form but, when I put an image near the form the form moved to the bottom. I tried padding-top, padding-bottom nothing is helping how do I resolve this issue? My website :
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="width: 600px;">
<img src="House real estate logo template.png" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
</div>
<div style="width: 600px; float: right;">
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
</div>
</body>
</html>
One solution can be :
Wrap the components that have to appear side-by-side into a div and apply flex CSS to the wrapper div
Add flex-grow CSS to the children according to the layout ratios.
Plus, add elements to the container div in right to left order, while using relative positioning.
The following solution does the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="https://joeschmoe.io/api/v1/random" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="display: flex">
<div style="width: 600px; flex-grow: 1">
<img src="https://joeschmoe.io/api/v1/random" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: relative; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;">
</div>
<div style="width: 600px; float: right; flex-grow: 1; margin-left: 50px; margin-top: 100px;">
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
</div>
</div>
</body>
</html>
float: right will move an element to the right and let content that follows it bubble up to its left.
The form is at the end of the page, so there is nothing that follows it.
When using floats for layout, you need to float the first element and not the last element.
That said, do not use floats for layout. They aren't designed for it even if they where the best thing CSS had for hacking a layout into a webpage 20 years ago.
We now have Flexbox (for organising rows of data) and Grid (for organising rows + columns of data).
Use those instead.
Since you have tagged this bootstrap-5, you might want to use its Flexbox based grid system (where it has some predefined styles for laying out content in a grid that you apply by adding classes to the elements).
Solution
I have added float: left; at tag where hope image is there
and added margin-top property .
<div style="width: 600px; float: left; ">
<img src="img.jpg" style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;" alt="Hope">
</div>
<div style="width: 600px; float: right; margin-top: 200px;" >
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
You Can Check My Output In Image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="width: 600px; float: left; ">
<img src="https://i.ibb.co/Vg1Jyfz/images.jpg" style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;" alt="Hope">
</div>
<div style="width: 600px; float: right; margin-top: 200px;" >
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
</div>
</body>
</html>
I'm using the Bootstrap v4.1 Signin Template (https://getbootstrap.com/docs/4.1/examples/sign-in/) for a simple login form - I need to add some alerts if the user's login was invalid. I've added an Alert after the login form but when this displays it has moved the login form to the left and the error message appears on the right - I'm trying to get this to appear below (or above) the signing form, but haven't used this template before.
Here's an example showing this:
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin">
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
<main role="main" class="container">
<div class="alert alert-danger">
<p class="text-center">Ther was an error with your login - please try again</p>
</div>
</main>
<!-- /.container -->
</body>
</html>
Not sure how to include Alerts with this Signin form so the form and the alert both display correctly?
You need to move your alert inside the form.
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin">
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<div class="alert alert-danger mt-2">
<p class="text-center">Ther was an error with your login - please try again</p>
</div>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
<!-- /.container -->
</form>
</body>
</html>
Doing a shallow testing, it seems that "display:flex" in css's body could be your problem.
I tried to link a bootstrap modal box to an image button. The modal box will be displayed when I click the image button. Anyone know how to make the background of the modal box transparent and full screen?
This is my html file
<!DOCTYPE html>
<html>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
min-height: 100%;
height: auto;
border-radius: 0;
}
</style>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Add an item</title>
</head>
<body onload="selectCategory()">
<div class="bar bar-header">
Back
<h1 class="title">Add Item</h1>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="padding" style="margin-top:75px;">
<label class="item-input">
<input name="photo1" id="photo1" type="image"
src="images/photo-icon.png"
onclick=""
width="20%"
data-toggle="modal" data-target="#myModal"/>
<input name="photo2" id="photo2" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo3" id="photo3" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo4" id="photo4" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo5" id="photo5" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
</label>
<label class="item-input">
<span class="input-label">Item Name</span>
<input type="text" placeholder="" id="itemName">
</label>
<label class="item-input">
<span class="input-label">Category</span>
<select id="select_category" name="select_category">
<option value="0">- Select -</option>
</select>
</label>
<label class="item-input">
<span class="input-label">Price</span>
<input type="number" placeholder="" id="price">
</label>
<label class="item-input">
<button class="button button-block button-positive" id="addProduct">Add item</button>
</label>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/addProduct.js"></script>
</body>
</html>
This is the output after I clicked the image
.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
If you want the outside area of the modal will become white.
Then Use this:
.modal-open .modal{
background: #fff !important;
}
I found the solution. Add this to css part
.fade.in {background-color: transparent;}
Just add the following code:
<style>
.modal-backdrop.in{
opacity: 0 !important;
}
</style>
I would suggest using this..
.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
I assume you are looking for a lightbox kind of effect in you modal. If so try here some links that can help you further..
https://bootsnipp.com/snippets/7XVM2
http://ashleydw.github.io/lightbox/
https://codepen.io/webcane/pen/bNEOXZ
I am using Bootstrap 3 in a responsive layout. I am trying to arrange a sign-up form with First and Last name on the same horizontal line. They should be around 45% of their normal width, and email and pass should be below at normal size (like the default Facebook home-page sign-up.)
I imagine an ideal CSS solution would set the width to about 48% each (so there is some space in the middle.) However when I try to define width in % in an external CSS, all forms stack vertically no matter what (regardless of zoom.)
I am now writing the width in em's. However, with Bootstrap's responsive layout, when I zoom in or out beyond a certain limit, the the form fields stack vertically, instead of being side-by-side. This happens at 67% an 110% in Chrome, but works very well in between those zooms.
I tried this link in the Bootstrap documentation, it's just the CSS giving me a bit of trouble - http://getbootstrap.com/css/#forms-inline
My HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Static Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-static-top.css" rel="stylesheet">
<link href="my-styles.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<!-- form starts here -->
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="container">
<div class="row jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="col-sm-7">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="bootstrap/components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
<div class="col-sm-1">
</div>
<form class="form-signin col-sm-4 well" role="form">
<h2 class="form-signin-heading">Sign Up</h2><hr>
<div class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address
</label>
<input class="form-control-md" type="text" id="exampleInputEmail2" placeholder="First Name">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password
</label>
<input class="form-control-md" type="text" id="exampleInputPassword2" placeholder="Last Name">
</div>
</div>
<p></p><p><input type="email" class="form-control" placeholder="Email address" required autofocus></p>
<p><input type="email" class="form-control" placeholder="Type email again" required autofocus></p>
<input type="password" class="form-control" placeholder="Password" required>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
my-styles.css
/* Layout
===========================*/
body {
/*padding-top: 10px; */
}
.container {
max-width: 1100px
}
.form-control-md {
display: block;
width: 10em;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control-md:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control-md:-moz-placeholder {
color: #999999;
}
.form-control-md::-moz-placeholder {
color: #999999;
opacity: 1;
}
.form-control-md:-ms-input-placeholder {
color: #999999;
}
.form-control-md::-webkit-input-placeholder {
color: #999999;
}
.form-control-md[disabled],
.form-control-md[readonly],
fieldset[disabled] .form-control-md {
cursor: not-allowed;
background-color: #eeeeee;
}
textarea.form-control-md {
height: auto;
}
/* Jumbotron
===========================
.jumbotron {
}
*/
<form class="navbar-form navbar-right form-inline" role="form">
<div class="form-group">
...
You need to have the class form-inline.
If you don't want to use that, you could try this (Option 2):
http://jsfiddle.net/snlacks/499yB/
Let me know if you need more clarification.