Modal box issue - twitter-bootstrap-3

so I am designing a survey form that will not appear until 'take Survey' link in the page is clicked. However I have not been successful in getting the modal box to appear on that same page for further styling. I have done everything required as stated in W3schools'bootstarp modal box but so far no solution. here is my code:
:root{
--headcolor: rgba(45, 45, 45, 0.2);
}
.heading{
border: 2px solid green;
margin-top: 5px;
}
#content{
margin: auto;
}
.tree {
position: relative;
top: 250px;
left: 10px;
color: #000;
text-decoration: none;
cursor: pointer;
width: 135px;
}
.tree:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.tree:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#title{
margin: 40px auto;
text-align: center;
padding: 40px 200px;
background: var(--headcolor);
}
#description{
text-align: center;
}
label{
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Survey Form</title>
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h3 class="tree" id="content" data-toggle="modal" data-target="#myModal">Take Survey</h3>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<!-- <button type="button" class="close" data-dismiss="modal">×</button> -->
<!-- <h4 class="modal-title">Modal Header</h4> -->
<h1 id="title">Customer Feedback Survey</h1>
</div>
<div class="modal-body">
<!-- <p>Some text in the modal.</p> -->
<p id="description">How can we improve our services? We Value your feedback so thank you for taking your time.</p><br>
<!-- <h6>We Value your feedback so thank you for taking your time</h6><br>
<br> -->
<p>Parts marked with '*' are compulsory!</p>
<form action="" id="survey-form">
<fieldset>
<legend>Biodata:</legend>
<label for="salutation">Salutation :</label>
<select id="dropdown">
<option>Mr</option>
<option>Miss</option>
<option>Mrs</option>
<option>Dr</option>
<option>Prof</option>
<option>Engr</option>
<option>Surv</option>
<option>Chief</option>
</select>
<label for="name">*Name :</label>
<input type="text" id="name" name="name" value="First name Last name">
<label for="email">*Email :</label>
<input type="text" id="email" name="email" value="example#example.com">
<label for="age"> Age :</label>
<input type="number" id="number" name="age">
</fieldset><br><br>
<!-- Level of satisfaction -->
<fieldset>
<legend>On a scale of 1 to 5 how are you likely to recommend us :</legend>
<input id="vs" type="radio" name="levels" value="vs">
<label for="vs">Very Satisfied</label><br>
<input id="ss" type="radio" name="levels" value="ss">
<label for="ss">Somewhat Satisfied</label><br>
<input id="ud" type="radio" name="levels" value="ud">
<label for="ud">Undecided</label><br>
<input id="us" type="radio" name="levels" value="us">
<label for="us">Unsatisfied</label><br>
<input id="vu" type="radio" name="levels" value="vu">
<label for="vu">Very Unsatisfied</label>
</fieldset><br>
<fieldset>
<legend>Which services would you like us to improve on?</legend>
<input id="newbie" type="checkbox" name="levels" value="newbie">
<label for="newbie">Car Wash</label><br>
<input id="intermediate" type="checkbox" name="levels" value="intermediate">
<label for="intermediate">Laundry</label><br>
<input id="master" type="checkbox" name="levels" value="master">
<label for="master">Upholstery Wash</label><br>
<input id="guru" type="checkbox" name="levels" value="guru">
<label for="guru">Dish Wash</label><br>
<input id="guru" type="checkbox" name="levels" value="guru">
<label for="guru">Toy Wash</label>
</fieldset>
<br>
<fieldset>
<legend>Comments/Suggestions</legend>
<textarea name="message" rows="5" cols="45">
</textarea>
</fieldset>
<br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
</div>
</div>
<!-- Modal content ends -->
</div>
</div>
<!-- Modal ends -->
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>


Bootstrap.js needs jquery to work.
Your code works here: https://codepen.io/anon/pen/ERbGWJ
I used the same code as your question and loaded jquery before bootstrap.js
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

Related

change input style of upload

i am trying to design a upload form which looks like this
this is what i have so far but i can not make it the way i want to
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Upload">Upload Your CV here</label>
</div>
here is a fiddle of what i have so far:
https://jsfiddle.net/kunz/6sr9wfxn/

You'll need to change the font around to get that one but I think this should get you going in the right direction
.custom-file-label[data-browse]::after {
border-radius: 25px;
background-color: orange;
color: white;
width: 8em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<h3>
Careers
</h3>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label text-center" for="customFileLangHTML" data-browse="Upload">Upload Your CV here</label>
</div>

How to vertically align text field with it's label and button

I'm basically trying to have this kind of layout:
Label TextField Button
So e.g:
Number of copies [5 ] [Add]
Thought that would be really simple to do. But I've struggled for a few hours now, and this is the closest I've come, which is absolutely terrible:
Here's my code:
<div class="row col-md-12">
<form class="form-inline pull-right">
<div class="form-group">
<label for="numberOfCopies">Number of copies</label>
<input size="1" type="text" class="form-control" id="numberOfCopies">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>

At first some Bootstrap-Basics:
your 'row-div' should be wrapped by a 'container-div'
row and col-xx-x classes need to be on their own div-tags
as you can see at the example below, you could easily get this done using css.
With display: flex; we get all elements of the form-group side by side.
With white-space: nowrap we 'tell' the label to be shown as one-line only.
Using the margin-tags we will get the elements to the right position.
To learn more take a look at the documentations of display, white-space and margin.
I think the usage of input-groups could be interesting, too. Feel free to ask per comment, if anything is unclear.
.form-group.flex {
display: flex;
}
.form-group.flex label {
white-space: nowrap;
margin-top: 7px;
}
.form-group.flex input {
margin: 0 7px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline pull-right">
<div class="form-group flex">
<label for="numberOfCopies">Number of copies</label>
<input size="1" type="text" class="form-control" id="numberOfCopies">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>

Input group addon alignment

Why dont I see the input group addon just beside the textbox ?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
</head>
<style>
input
{
max-width: 280px;
}
</style>
<body>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
<span class="input-group-addon" id="basic-addon1">#</span>
</div>
</body>
</html>
What do I need to do to display the content of the span after the textbox adjacent to it without any gap.

Your problem is the max-width you are putting on the input. try putting it on the input-group instead like:
.input-group {
max-width: 280px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">#</span>
</div>

Overlay bootstrap div row

I'm using Bootstrap, I have a registration form. When register button is clicked, I call ajax to send the form. While remote page is executing, I'd like to overlay the form with a div with a message like "Please wait" How can I overlay the row with exact size.
This is my form:
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Adresse email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Mot de passe" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirmer" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
</form>
</div>
http://jsfiddle.net/stjyjgmb/

you set "please-wait" class in your ajax.
CSS Code
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
display:none;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
Js Code
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').show();
}, 3000);
});
[
// A $( document ).ready() block.
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').hide();
}, 3000);
});
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirm" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
<div class="please-wait"><div class="please-wait-text">
Please Wait...
</div></div>
</form>
</div>
</div>
Demo

CSS3 box shadows and Bootstrap 3

I am developing a site using Bootstrap 3 and everything seems to work except when i try to use CSS3 box shadows.
What I want to achieve is have box shadows on the left and right of the whole content div. this works fine. i also want a box shadow on some of the content items such as divs in the sidebar but if I have box shadows on the main content container, it doesn't work for the others. If I remove the box shadow class on the main content container, the rest all work.
If i remove this div <div class="box outer">, all the other box shadows work but if this is in, then they don't show.
Any help on identifying why I can't use both box shadows at once would be appreciated
UPDATE:
Got a demo on Bootply http://www.bootply.com/ULX2kATkT8 of what it looks like, I just added a width to .outer given it a width of 1000px and I can see that both all shadows are visible but it looks like the .outer shadow overwrites the others
Here is my template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design</title>
<!-- Include bootstrap CSS -->
<link href="http://localhost/app/public/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/app/public/css/custom.css" rel="stylesheet">
<link href="css/media.css" rel="stylesheet">
</head>
<body>
<div class="box outer">
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<img class="img-responsive" src="logo.png">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</header>
<!-- Site banner -->
<div class="banner">
<div class="container">
<div class="box contentimg">
<img class="img-responsive" src="http://localhost/app/public/images/layout/index.png" alt="">
</div>
</div>
</div>
<!-- Middle content section -->
<div class="middle">
<div class="container">
<!-- Main Content section -->
<div class="col-md-8 content">
</div>
<!-- End Main Content section -->
<!-- Sidebar Content section -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="box sidebar_item">
<div class="sidebar_item_head"><h3>Events Planner</h3></div>
<div class="sidebar_item_main">
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<div class="bottom">
<div class="container">
<div class="col-md-4">
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<p>Content for the third footer section.</p>
</div>
</div>
</div>
</div>
<!-- Include jQuery and bootstrap JS plugins -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://localhost/app/public/js/bootstrap.min.js"></script>
<script src="http://localhost/app/public/js/bootbox.min.js"></script>
</body>
</html>
followed by my css
.box {
position:relative;
background:#f1f1f1;
margin:0 10px;
}
.box:before, .box:after {
position:absolute;
z-index:-1;
content:"";
}
.outer {
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
}
.contentimg {
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
width: 100%;
}
.sidebar_item {
margin: 40px auto;
width: 310px;
}
.outer:before,
.outer:after {
top:0;
width:100%;
height: 100%;
border-radius:2%/100%;
-moz-border-radius:2%/100%;
-webkit-border-radius:2%/100%;
box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:-10px 0 7px rgba(0,0,0, 0.3);
}
.outer:before{
box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:10px 0 7px rgba(0,0,0, 0.3);
}
.sidebar_item:before,
.sidebar_item:after,
.contentimg:before,
.contentimg:after {
bottom:12px;
left:5px;
width:50%;
top:80%;
max-width:300px;
-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.sidebar_item:after,
.contentimg:after {
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
right:5px;
left:auto;
}

I knew z-index had something to do with it as I could see the box shadow if i gave the .outer div a width.
I fixed it by adding this to my css
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12,
.col-lg-12 {
z-index: 0;
}