I am trying to get a blur behind my register form (class "login-form") described in the image below. However the animated background (javascript file) only blurs when i use the css attribute filter: blur(5px); in my body tag. But obviously everything including the register form is blured then.
My php file uses bootstrap as well.
My CSS:
<style>
body {
margin: 0;
overflow: hidden;
background: #191919;
}
.centertry {
position: absolute;
width: 500px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<!-- BACKGROUND ANIMATION -->
<script id="wave" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
<script src="js/wave.js"></script>
<!-- BACKGROUND ANIMATION -->
<div class="centertry">
<div class="form-input-content">
<div class="card login-form mb-0">
<div class="card-body pt-5">
<a class="text-center" href="index.html"> <h4>Aterion</h4></a>
<form method="post" class="mt-5 mb-5 login-input">
<div class="form-group">
<input id="username" name="username" type="text" class="form-control" placeholder="Username" required>
</div>
<div class="form-group">
<input id="email" name="email" type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input id="password" name="password" type="password" class="form-control" placeholder="Password" required>
</div>
<div class="form-group">
<input id="confirmpassword" name="confirmpassword" type="password" class="form-control" placeholder="Confirm Password" required>
</div>
<button name="signup" class="btn login-form__btn submit w-100">Sign up</button>
</form>
<p class="mt-5 login-form__footer">Already have an account? Login here</p>
</p>
</div>
</div>
</div>
</div>
</body>
register form image
I found the correct answer:
Use backdrop-filter: blur(10px); instead of filter: blur(10px);
Related
I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) {
document.getElementById("editcontact").innerHTML =
`
<form class="form">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
editContact(1);
.form{
padding: 0 30px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="editcontact">
</div>
</body>
</html>
Notice, I added .form class, and adding to it.
Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Testing the third iteration of my professional website
I've created a bootstrap modal over a parallax feature that won't allow me to open the contact form in the modal without resorting to a transparent background. Any help fixing this is greatly appreciated! Visit my website and see for yourself, this is a tough one to figure out! PS: You're looking for the Book Now! buttons.
HTML code: <div class="bgimg-2 img-responsive">
<div class="container">
<span class="border btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Book Now!</span>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Form</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p class="lead">Hourly Consulting Rate: $40 - $120/h</p>
<form id="contact-form" method="post" action="contact.php" role="form"
data-toggle="validator">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Your firstname! *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Your lastname! *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Your email! *" required="required" data-error="Valid email is required."
pattern="[a-z0-9!#$%&'*+/=?^_`{|}~.-]+#[a-z0-9-]+(\.[a-z0-9-]+)*">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Your phone number!">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
img.headshot {
margin-right: auto;
margin-left: auto;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("images/building1.gif");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/cityscape1.gif");
min-height: 400px;
}
.bgimg-3 {
background-image: url("images/TheBay.gif");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
div.bgimg-2-still {
background-image: url("images/building1.jpg");
width: 100%;
height: auto
}
$(window).load($('#myModal').appendTo('body'))
will take your modal from where you placed it and append it to <body>, where it should have been placed in the first place.
As a side note, you have several JavaScript errors on your website due to improper loading of scripts. You should have a professional look at your "professional website".
I'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:
-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form. I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.
-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form. I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.
See code below:
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
Any help would be much appreciated :)
Thanks in advance
As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I have two modal menus on the same page: for registration and for login. When appears first, second should be disappeared from the page and not overlap the first one. How could I do this using bootstrap or bootstrap & jQuery?
The first menu:
<div id="dialog-sign-in" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Login</h1>
<ul id="socail-media-sign-in" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="https://site.ru/wp-login.php" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkAjaxLogin" id="form_login" autocomplete="off" novalidate="novalidate">
<input type="hidden" id="sign-in-return" name="sign-in-return" value="%2F">
<div class="form-group">
<input class="form-control needed" type="email" name="log" id="login_user_email" placeholder="E-mail" data-rule-required="true" data-rule-email="true" aria-required="true">
</div>
<div class="form-group">
<input class="form-control needed" type="password" name="pwd" id="login_user_password" placeholder="Password" data-rule-required="true" aria-required="true">
</div>
<div class="form-group">
<input type="submit" value="Войти" name="dd" class="btn btn-primary btn-block">
</div>
</form>
<p class="text-center"><a rel="nofollow" href="#dialog-password-reset-toggler" id="dialog-password-reset-toggler" class="text-muted" title="Сбросить забытый пароль"><small>Забыли пароль?</small></a></p>
<p class="text-center"><a rel="nofollow" href="#dialog-sign-up" class="underline" id="dialog-sign-up-toggler">Зарегистрироваться</a></p>
<p class="text-muted text-center" style="margin-bottom: 0;">Говорят, Усейн Болт регистрируется <br>за 4,5 секунды</p>
</div>
</div>
</div>
</div>
The second one:
<div id="dialog-sign-up" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Sign up</h1>
<ul id="socail-media-sign-up" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="/registration" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkRegistration" id="form_register" novalidate="novalidate">
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-email="true" type="email" name="user_login" id="user_email" placeholder="E-mail" aria-required="true">
</div>
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-minlength="6" type="password" name="user_password" id="pass1" placeholder="Password" aria-required="true">
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_firstname" id="first_name" placeholder="First name" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_lastname" id="last_name" placeholder="Last name" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input readonly="readonly" class="form-control datetime" data-rule-required="true" data-view-mode="2" type="text" name="user_birthday" id="user_birthday" placeholder="Год рождения" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<div class="select2-container form-control select2" id="s2id_user_sex"> <span class="select2-chosen" id="select2-chosen-1">Sex</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span><label for="s2id_autogen1" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1"><div class="select2-drop select2-display-none"> <div class="select2-search select2-search-hidden select2-offscreen"> <label for="s2id_autogen1_search" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder=""> </div> <ul class="select2-results" role="listbox" id="select2-results-1"> </ul></div></div><select class="form-control select2 select2-offscreen" data-rule-required="true" data-rule-min="1" data-placeholder="Пол" name="user_sex" id="user_sex" data-minimum-results-for-search="-1" tabindex="-1" title="" aria-required="true">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="wp-submit" value="Sign up" class="btn btn-primary btn-block" disabled="">
</div>
<p class="text-center" style="margin-bottom: 0;"><a rel="nofollow" href="#dialog-sign-in" class="underline" id="dialog-sign-in-toggler">Login</a></p>
<div style="color: #ccc; padding-top: 10px;" class="text-center">
By signing up you agree with our Terms&Conditions
</div>
</form>
</div>
</div>
</div>
</div>
Update:
I wrote a jQuery snippet for this but it stopped working correctly (has no reaction on clicking).
URL links:
<div onclick="location.href='#dialog-sign-in';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_login.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 15px; padding-top: 12px;">
Login
</div>
</div>
<div onclick="location.href='#dialog-sign-up';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_reg.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; margin-right: 20px; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 25px; padding-top: 12px;">
Sign up
</div>
</div>
jQuery code:
<script>
jQuery(function( $ ) {
var $dialogSignIn = jQuery('#dialog-sign-in'),
$dialogSignUp = jQuery('#dialog-sign-up'),
$dialogPasswordReset = jQuery('#dialog-password-reset'),
$dialogSignUpToggler = jQuery('#dialog-sign-up-toggler'),
$dialogSignInToggler = jQuery('#dialog-sign-in-toggler'),
$dialogPasswordResetToggler = jQuery('#dialog-password-reset-toggler');
$dialogSignUpToggler.click(function( event ) {
event.preventDefault();
$dialogSignIn.modal('hide');
$dialogSignUp.modal('show');
});
$dialogSignInToggler.click(function( event ) {
event.preventDefault();
$dialogSignUp.modal('hide');
$dialogSignIn.modal('show');
});
});
</script>
Seems that the code is correct. Why it doesn't work?
$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');
However you need to write a bit o javascript for it to work properly but it basically goes down to this methods.
The Bootstrap input form isn't centring even though I have it setup to be.
Here's what it looks like:
Form Not Centering:
Proper Form
The red is the problem and the green is what I want. Here is the code.
CSS:
.form-control {
height: 50px;
width: 330px;
padding-left: 5px;
font-size: 20px;
font-family: 'Lato', sans-serif;
}
HTML:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address">
</div>
<div class="form-group">
<button type="submit" class="btn">Early Access</button>
</div>
</form>
All help would be amazing, thank you.
Does this fix your problem?
Just added a wrapper around it:
#wrapper {
text-align:center;
}
.form-control {
margin: 0 auto;
}
How about something along those lines:
Wrap your stuff with a <div class="container">, centering everything.
Add an id to that same div and set the width to whatever you want.
Set the width of your button to 100%.
html:
<div class="container" id="myContainer">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address" />
</div>
<br>
<div class="form-group">
<button id="earlyAccessBtn" type="submit" class="btn">Early Access</button>
</div>
</form>
</div>
css:
#myContainer {
width: 350px;
}
#earlyAccessBtn {
width: 100%;
}
DEMO