I am utilizing this syntax, but for some reason it makes my text look like it is a button. What I would like is for the text to just appear as text - black text with white background. How can this syntax be altered so that the text does not have the same outlining as a button?
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon">Date One:</span>
<input type="date" name="dateone" />
</div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon">Date Two:</span>
<input type="date" name="datetwo" />
<span class="input-group-btn">
<input type="submit" name="getthat" value="Show Me Info">
</span>
</div>
</div>
And here I also create bootstrap fiddle to show the visual:
https://jsfiddle.net/DTcHh/35702/
<style>
.input-group-addon_1 {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon_1 {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555;
text-align: center;
}
</style>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon_1">Date One:</span>
<input type="date" name="dateone" />
</div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon_1">Date Two:</span>
<input type="date" name="datetwo" />
<span class="input-group-btn">
<input type="submit" name="getthat" value="Show Me Info">
</span>
</div>
</div>
try this
.input-group-addon
{
background-color: #fff;
border: 0px solid #ccc;
border-radius: 0px;
}
add this class in your css file
OR
also use class for particular input-group
.col-md-2 > .input-group > .input-group-addon
{
background-color: #fff;
border: 0px solid #ccc;
border-radius: 0px;
}
Just change input-group-addon to input-group
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group">Date One:</span>
<input type="date" name="dateone" />
</div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group">Date Two:</span>
<input type="date" name="datetwo" />
<span class="input-group-btn">
<input type="submit" name="getthat" value="Show Me Info">
</span>
</div>
</div>
Working fiddle https://jsfiddle.net/9txv3rfz/
Related
I was going through the code given in this link, for adding input controls like textboxes, dropdown lists etc in my form.
but when i tried to modify, the code, with addition of new dropdownlists, am not getting the results properly. Alignment was wrong and label is not coming as expected.
here is my updated code
<div class="col-md-6">
<label> entity name </label>
</div>
<div class="col-md-4">
<label> Operator </label>
</div>
</div>
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0">
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_1"
placeholder="Enter entity name." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select Field Name--</option>
<option>--state1--</option>
<option>--state2--</option>
<option>--state3--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select attribute --</option>
<option>--attributes1--</option>
<option>--attributes2--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option> --Select entity -- </option>
<option> entity1 </option>
<option> entity2 </option>
</select>
</div>
my requirement is to add 3 more dropdown lists and 2 checkboxes.
but when I tried to add the dropdown lists/ label titles , am getting those in a unexpected results.
form-with-dynamic-controls
in order to get the correctly aligned form controls - with proper titles, etc
where n which tags i need to modify?
I think you didn't add cdn's in your code. You can also take the code from here
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(`
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}" class="form-control" >
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}" class="form-control" >
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer">
<button class="btn_round add_node_btn_frm_field" title="Copy or clone this row">
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
///======Clone method
$(document).ready(function(){
$("body").on("click", ".add_node_btn_frm_field", function (e) {
var index = $(e.target).closest(".form_field_outer").find(".form_field_outer_row").length + 1;
var cloned_el = $(e.target).closest(".form_field_outer_row").clone(true);
$(e.target).closest(".form_field_outer").last().append(cloned_el).find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
//change id
$(e.target).closest(".form_field_outer").find(".form_field_outer_row").last().find("input[type='text']").attr("id", "mobileb_no_"+index);
$(e.target).closest(".form_field_outer").find(".form_field_outer_row").last().find("select").attr("id", "no_type_"+index);
console.log(cloned_el);
//count++;
});
});
$(document).ready(function(){
//===== delete the form fieed row
$("body").on("click", ".remove_node_btn_frm_field", function () {
$(this).closest(".form_field_outer_row").remove();
console.log("success");
});
});
.btn_round {
width: 35px;
height: 35px;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 35px;
margin-left: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.btn_round:hover {
color: #fff;
background: #6b4acc;
border: 1px solid #6b4acc;
}
.btn_content_outer {
display: inline-block;
width: 85%;
}
.close_c_btn {
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: 0;
line-height: 30px;
border-radius: 50%;
background: #ededed;
border: 1px solid #ccc;
color: #ff5c5c;
text-align: center;
cursor: pointer;
}
.add_icon {
padding: 10px;
border: 1px dashed #aaa;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
}
.add_group_btn {
display: flex;
}
.add_group_btn i {
font-size: 32px;
display: inline-block;
margin-right: 10px;
}
.add_group_btn span {
margin-top: 8px;
}
.add_group_btn,
.clone_sub_task {
cursor: pointer;
}
.sub_task_append_area .custom_square {
cursor: move;
}
.del_btn_d {
display: inline-block;
position: absolute;
right: 20px;
border: 2px solid #ccc;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="static/css/AdminLTE.min.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<title>
Dynamically add or remove form input fields using jQuery -
bootstrapfriendly
</title>
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-md-12 form_sec_outer_task border">
<div class="row">
<div class="col-md-12 bg-light p-2 mb-3">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<h4 class="frm_section_n">Form Title</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label>Mobile No.</label>
</div>
<div class="col-md-4">
<label> Type </label>
</div>
</div>
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0">
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input
type="text"
class="form-control w_90"
name="mobileb_no[]"
id="mobileb_no_1"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-6">
<input
type="text"
class="form-control w_90"
name="mobileb_no[]"
id="mobileb_no_1"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer">
<button
class="btn_round add_node_btn_frm_field"
title="Copy or clone this row"
>
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</div>
</div>
</div>
</div>
</div>
<div class="row ml-0 bg-light mt-3 border py-3">
<div class="col-md-12">
<button class="btn btn-outline-lite py-0 add_new_frm_field_btn">
<i class="fas fa-plus add_icon"></i> Add New field row
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 pt-4"></div>
</div>
</div>
</body>
</html>
I'm struggling while trying to locate 2 buttons on the left of an input field.
I already tried several suggestions on the internet but I couldn't make it the way I want.
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search"
style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"><i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"></i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;"></i></label>
</div>
</div>
</div>
</div>
</div>
This is how it looks like :
Keep in mind, that label is an inline element similar to span, so you need to set its css to display: inline-block to behave like a div
once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.
here is my favorite flex-cheat-sheet
I have simplified your example and you can see how this works clicking below on Run code snippet.
.pull-right {
display: flex;
flex-wrap: nowrap;
}
.pull-right input{ border: 1px solid green;}
.pull-right label{ border: 1px solid red; display: inline-block;}
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text"
class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)"
ng-model="Search"
style="text-indent: 5px;" minlength="1"
ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search"
ng-click="localSearch = ''; vm.filterTable(localSearch)">
<i style="vertical-align: middle; top:4px; right:35px; position: absolute"
class="glyphicon glyphicon-remove"> </i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label>
</div>
</div>
I have a signup form in an express app. I am using bootstrap for the front-end. I am using the jQuery validation plugin to validate the name, email, phone number etc format but it is not working. Here is the HTML layout of the page.
$("#modalForm").validate({
rules: {
nameModal: {
required: true,
minlength: 8
},
emailModal: {
required: true,
minlength: 5
},
numberModal: {
required: true,
minlength: 12
},
},
messages: {
nameModal: {
required: "Please enter name",
minlength: "Your data must be at least 8 characters"
},
emailModal: {
required: "Please enter email",
minlength: "Your data must be at least 5 characters"
},
numberModal: {
required: "Please enter number",
minlength: "Number should be atleast 9 character"
},
}
});
body {
background-color: whitesmoke;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 1%;
}
.form-links {
text-align: center;
margin-bottom: 50px;
padding-bottom: 4px;
}
.form-links a {
color: #fff;
}
.formbtn{
background-color: #5d5d5d;
border-color: #d6d6c2;
font-size: 20px;
}
div.login{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
margin-bottom: 8%;
padding: 4%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.float-right a{
color: #5d5d5d;
}
.float-right a:hover {
color: white;
}
/* The signup modal code */
.signup{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.modalcolor{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
padding: 2%;
border-radius: 10px;
}
<head>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.0/dist/jquery.validate.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/myJs/login.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login">
<form method="POST">
<h3>Gramleys</h3>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" />
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" />
</div>
<br>
<button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button>
<button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button>
<br>
<div class="float-right">
Forgot password
</div>
</form>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modalcolor">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Signup</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form method="POST" role="form" id="modalForm">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/>
</div>
<div class="form-group">
<label for="InputName">Full Name</label>
<input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/>
</div>
<div class="form-group">
<label for="InputPassword">Select Password</label>
<input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" />
</div>
<div class="form-group">
<label for="InputNumber">Mobile Number</label>
<input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal">
</div>
<div class="row">
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Age</label>
<input style="display: block;"type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Weight(kg)</label>
<input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Height(cms)</label>
<input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary">Create</button>
</div>
</div>
</div>
</div>
Why is the jQuery validator not working? I have been trying to work it out a lot but it is not working please help me to sort out this problem. I have looked into other answers on stackoverflow but none seems to resolve this issue. Here is the answer from where i took the above js code How to correctly validate a modal form Is it because of express or node environment any help would be highly appreciated.
It works here but does not work on my local node server boostrap is installed using npm in the app.enter image description here No error message displaying as seen in the image.
The only problem you are having is that your button falls outside form which doesn't trigger the form submit event and hence your form is not validated against it.
You can put that button inside form or you can validate it by this
$(".createButton").click(function(e){
if(!$('#modalForm').valid()){
e.preventDefault()
}
})
$(".createButton").click(function(e) {
if (!$('#modalForm').valid()) {
e.preventDefault()
}
})
$("#modalForm").validate({
rules: {
nameModal: {
required: true,
minlength: 8
},
emailModal: {
required: true,
minlength: 5
},
numberModal: {
required: true,
minlength: 12
},
},
messages: {
nameModal: {
required: "Please enter name",
minlength: "Your data must be at least 8 characters"
},
emailModal: {
required: "Please enter email",
minlength: "Your data must be at least 5 characters"
},
numberModal: {
required: "Please enter number",
minlength: "Number should be atleast 9 character"
},
}
});
body {
background-color: whitesmoke;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 1%;
}
.form-links {
text-align: center;
margin-bottom: 50px;
padding-bottom: 4px;
}
.form-links a {
color: #fff;
}
.formbtn {
background-color: #5d5d5d;
border-color: #d6d6c2;
font-size: 20px;
}
div.login {
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
margin-bottom: 8%;
padding: 4%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.float-right a {
color: #5d5d5d;
}
.float-right a:hover {
color: white;
}
/* The signup modal code */
.signup {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.modalcolor {
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
padding: 2%;
border-radius: 10px;
}
<head>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.0/dist/jquery.validate.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/myJs/login.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login">
<form method="POST">
<h3>Gramleys</h3>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" />
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" />
</div>
<br>
<button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button>
<button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button>
<br>
<div class="float-right">
Forgot password
</div>
</form>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modalcolor">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Signup</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form method="POST" role="form" id="modalForm">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/>
</div>
<div class="form-group">
<label for="InputName">Full Name</label>
<input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/>
</div>
<div class="form-group">
<label for="InputPassword">Select Password</label>
<input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" />
</div>
<div class="form-group">
<label for="InputNumber">Mobile Number</label>
<input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal">
</div>
<div class="row">
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Age</label>
<input style="display: block;" type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Weight(kg)</label>
<input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Height(cms)</label>
<input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal">
</div>
</div>
</form>
</div>
</div>
<div>
<div class="modal-footer"> <button type="submit" class="createButton btn btn-secondary">Create</button></div>
</div>
</div>
</div>
</div>
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>