Align buttons up and down using CSS

Align buttons up and down using CSS - javascript

Im trying to make a panel with buttons that have the next arrangement side by side in columns:
But I don't know how to this.
Here is my code
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
color: white;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin: 0 auto;
display: inline-block;
}
input[type=submit]:hover {
background-color: #45a049;
display: block;
margin: 0 auto;
}
.container {
border-radius: 5px;
background-color: #23364B;
padding: 20px;
display:inline-block;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* this is for when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
body {
background-color:#23364B;
color: white;
text-align: center;
}
a:link, a:visited {
background-color: #4CAF50;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
float: right;
border: none;
border-radius: 4px;
}
a:hover, a:active {
background-color: #4CAF50;
}
<body>
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="row">
<input type="submit" value="action 1">
</div>
<div class="row">
<input type="submit" value="action 2">
</div>
<div class="row">
<input type="submit" value="action 3">
</div>
<div class="row">
<input type="submit" value="action 4">
</div>
<div class="row">
<input type="submit" value="action 5">
</div>
<div class="row">
<input type="submit" value="action 6">
</div>
</form>
</div>
1
</body>
Im guessing that #media screen, the .col-25 and .col-75 statements on css are messing in, but at the same time I dont see how, since this only acts (I think) in the space assignation inside the text areas,labels and buttons, but not outside this elements.
UPDATE
The statements mentioned in the css has nothing to do.

A div is a block level element, placing a element inside a div will normally move it to next line. In your case , you can use css grid system. and define how many columns you will like to have
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="button-container">
<input type="submit" value="action 1">
<input type="submit" value="action 2">
<input type="submit" value="action 3">
<input type="submit" value="action 4">
<input type="submit" value="action 5">
<input type="submit" value="action 6">
</div>
</form>
</div>
1

Related

Issue while displaying div contents that changes on navbar selection

By referring to Navbar that changes div contents all in one page I was trying to make user information page (with the help of xampp, mysql, html & php) using the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<style>
.header {
width:100%;
height:auto;
padding-bottom: 0px;
background-color: #ADD8E6;
overflow: hidden;
/*overflow: scroll;*/
text-overflow: ellipsis;;
}
#img1
{
float:left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 3px;
width:auto;
height:100px;
}
#img2
{
float:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 3px;
width:auto;
height:100px;
margin-left:5px;
}
#img3
{
position: absolute;
top: 6px;
right: 16px;
width:180px;
height:90px;
}
#header_text_1 {
padding-top: 10px;
padding-right: 200px;
text-align: center;
font-size:20px;
font-weight: bolder;
}
#header_text_2 {
padding-top: 2px;
padding-right: 200px;
font-size:20px;
text-align: center;
font-weight: bolder;
}
#header_text_3 {
padding-top: 2px;
padding-right: 200px;
font-size:20px;
text-align: center;
font-weight: bolder;
}
.header p { margin:0;
}
#media screen and (max-width: 750px) {
#img1 #img2 {
float: none;
display: block;
}
#img3 {
float: none;
}
#header_text_1 {
margin-top: 105px;
font-size: 2.8vw;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#header_text_2 {
font-size: 2.8vw;
text-align: left;
}
#header_text_3 {
font-size: 2.8vw;
text-align: left;
}
}
.topnav {
overflow: hidden;
background-color: #ADD8E6;
padding-top: 5px;
}
.topnav a {
float: left;
display: block;
color: #000000;
font-weight: bolder;
text-align: center;
padding: 5px 16px;
text-decoration: none;
font-size: 17px;
}
/*.active {
background-color: #04AA6D;
color: white;
}*/
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
font-weight: bolder;
border: none;
outline: none;
color: black;
padding: 5px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 10px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: yellow;
color: black;
}
.dropdown-content a:hover {
background-color: #90EE90;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
#userid:hover {
background-color: none;
}
main div {
display: none;
padding: 20px;
}
.active {
display: block;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
width: 100px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
table, th, td {
border: 1px solid #000 !important;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=text], select, input[type=number], input[type=email] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-size: larger;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: large;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body style="margin: 0; font-family: Arial, Helvetica, sans-serif;">
<div class="header">
<img id="img1" src="images/img1.png" />
<img id="img2" src="images/img2.png" />
<div>
<p id="header_text_1">AAAAAAAAAAA</p>
<p id="header_text_2">BBBBBBBBBBB</p>
<p id="header_text_3">CCCCCCCCCCC</p>
</div>
<img id="img3" src="images/img3.png" />
</div>
<div class="topnav" id="myTopnav">
<a id="home" data-id="1" style="font-size: 18px; color: black;" href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Information1<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 2
Content 3
Content 4
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information2<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 5
Content 6
Content 7
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information3<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 8
Content 9
Content 10
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information4<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 11
Content 12
</div>
</div>
<a id="logout" style="font-size: 18px; color: red;" href="test.html">LOGOUT</a>
<a href="javascript:void(0);" class="icon" onclick="resp_navbar()">
☰
</a>
</div>
<main>
<div class='active' style="padding-left: 20px; padding-right: 20px;">
<p style="font-size: 20px; font-weight: bolder">Welcome <a id="userid" style="font-weight: bolder; font-size: 20px; color: blue;"></a></p>
</div>
<div id="viewprof" style="overflow-x: auto; padding-left: 50px; padding-right: 50px; padding-top: 50px;">
<table id="tblProducts" border="1px" style="width:100%; line-height:20px;">
<tbody id="myTable">
</tbody>
</table>
</div>
<div id="updtprof">
<h2 style="padding-left: 20px; color: green; padding-bottom: 15px; text-align: center"><u>Update Profile</u></h2>
<div class="container">
<form id="formdata" action="signup_submit.php" method="post" onsubmit="return checkall();">
<div class="row">
<div class="col-25">
<label for="compname"><b>Company Name *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="compname" name="compname" placeholder="Your Company Name.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="compprof"><b>Company Profile *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="compprof" name="compprof" placeholder="Your Company Profile.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="cpname"><b>Contact Person Name *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="cpname" name="cpname" placeholder="Contact Person Name.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="cpdesig"><b>Contact Person Designation *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="cpdesig" name="cpdesig" placeholder="Contact Person Designation.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl1"><b>Address Line 1 *</b></label>
</div>
<div class="col-75">
<input type="text" id="addl1" name="addl1" placeholder="Enter Address.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl2"><b>Address Line 2</b></label>
</div>
<div class="col-75">
<input type="text" id="addl2" name="addl2" placeholder="Enter Address....">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl3"><b>Address Line 3</b></label>
</div>
<div class="col-75">
<input type="text" id="addl3" name="addl3" placeholder="Enter Address..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl4"><b>Address Line 4</b></label>
</div>
<div class="col-75">
<input type="text" id="addl4" name="addl4" placeholder="Enter Address..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country"><b>Country *</b></label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="India">India</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="state"><b>State *</b></label>
</div>
<div class="col-75">
<select id="state" name="state">
<option value="">Select State</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="city"><b>City *</b></label>
</div>
<div class="col-75">
<select id="city" name="city">
<option value="">Select City</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="pincode"><b>Pincode *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Pincode" name="pincode" id="pincode" onKeyPress="if(this.value.length==6) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="phone"><b>Phone No. (With STD Code) *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Phone Number" name="phone" id="phone" onKeyPress="if(this.value.length==15) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="mobile"><b>Mobile No. *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Mobile Number" name="mobile" id="mobile" onKeyPress="if(this.value.length==10) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fax"><b>Fax No. *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Fax Number" name="fax" id="fax" onKeyPress="if(this.value.length==15) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email"><b>Email *</b></label>
</div>
<div class="col-75">
<input type="email" placeholder="Enter Email" name="email" id="email" onkeyup="checkemail();" required>
<span id="email_status" style="color: red; font-weight: bolder"></span>
</div>
</div>
<div class="row" style="padding-top: 10px">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div>Item 4 Content</div>
<div>Item 5 Content</div>
<div>Item 6 Content</div>
<div>Item 7 Content</div>
<div>Item 8 Content</div>
<div>Item 9 Content</div>
<div>Item 10 Content</div>
<div>Item 11 Content</div>
<div>Item 12 Content</div>
</main>
<script>
function showpwd() {
var x = document.getElementById("psw");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
$(document).ready(function(){
load_json_data('state');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('state_city.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'state')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
///////////////////////////////////////////////////////
document.querySelectorAll('.topnav a')
.forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))
function change(n) {
if(n == 2){
$('#tblProducts tbody').empty();
var username = document.getElementById("userid").innerHTML;
$.ajax({
type: 'post',
url: 'viewprof.php',
dataType: "json",
data: {
user_name:username,
},
cache:false,
success:function(data){
buildTable(data);
},
});
}
if(n == 3){
document.getElementById("formdata").reset();
var username = document.getElementById("userid").innerHTML;
$.ajax({
type: 'post',
url: 'viewprof.php',
dataType: "json",
data: {
user_name:username,
},
cache:false,
success:function(data){
formfill(data);
},
});
}
let panels = document.querySelectorAll('main div');
panels.forEach(p => p.classList.remove('active'));
panels[n - 1].classList.add('active');
}
function formfill(data){
for (var i = 0; i < data.length; i++){
document.getElementById('compname').value = data[i].CompName;
document.getElementById('compprof').value = data[i].CompProf;
document.getElementById('cpname').value = data[i].ContPerName;
document.getElementById('cpdesig').value = data[i].ContPersDesig;
document.getElementById('addl1').value = data[i].Address;
document.getElementById('addl2').value = data[i].Address;
document.getElementById('addl3').value = data[i].Address;
document.getElementById('addl4').value = data[i].Address;
document.getElementById('country').value = data[i].Country;
document.getElementById('state').value = data[i].State;
document.getElementById('city').value = data[i].City;
document.getElementById('pincode').value = data[i].Pincode;
document.getElementById('phone').value = data[i].PhoneNum;
document.getElementById('mobile').value = data[i].MobileNum;
document.getElementById('fax').value = data[i].FaxNum;
document.getElementById('email').value = data[i].Email;
}
}
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td colspan="2"><h2 style="color: green; text-align: center"><u>Personal Information</u></h2></td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Company Name</td>
<td>${data[i].CompName}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Company Profile</td>
<td>${data[i].CompProf}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Contact Person Name</td>
<td>${data[i].ContPerName}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Contact Person Designation</td>
<td>${data[i].ContPersDesig}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Address</td>
<td>${data[i].Address}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Country</td>
<td>${data[i].Country}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">State</td>
<td>${data[i].State}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">City</td>
<td>${data[i].City}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Pincode</td>
<td>${data[i].Pincode}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Phone Number</td>
<td>${data[i].PhoneNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Mobile Number</td>
<td>${data[i].MobileNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Fax Number</td>
<td>${data[i].FaxNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Email ID</td>
<td>${data[i].Email}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Date Modified</td>
<td>${data[i].ModifiedDate}</td>
</tr>`
table.innerHTML += row
}
}
$(document).ready(function() {
var url = window.location.href;
var id = url.slice(url.indexOf('=') + 1, url.lastIndexOf('#'),);
document.getElementById("userid").innerHTML = id;
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
function resp_navbar() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
The above code was working fine till the time I have not inserted the 'container' having 'form' inside the div having "id='updtprof'". Post insertion of this container inside the div (bearing "id='updtprof'"), when I am clicking on 'Home', 'Content2' & 'LOGOUT' the code is working fine and displaying the correct corresponding divs. But when I am clicking on other content's (i.e. content 4 to 12) of the navbar, the above code doesn't throw any error and is also not displaying the respective divs. Also when I am clicking on Content3 of navbar only header is being displayed but not the form.
Can someone tell me how to resolve this issue.

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

What is the error in my form email input . It always returns false while submitting

I think the problem is in the jQuery. Whenever some value is entered in the Email input and try to submit the form It shows false weather the value is correct or not. Please help me. My whole code is down please go through it and please check the jQUERY SECTION thoroughly as I think the problem is not in HTML it is in the jQuery
Responses will be appreciated.
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$("#submit").click(function() {
alert(isEmail($("#email").val()));
});
body{
font-family: Lato;
font-size: 200%
}
input{
height: 40px;
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px solid grey;
width: 320px;
}
label{
position: relative;
top: 5px;
float: left;
width: 275px;
}
#wrapper{
width: 625px;
margin: 0 auto;
}
.elements{
margin-bottom: 10px;
}
#submit{
width: 130px;
margin-left: 275px;
text-align: center;
background-color: lightgrey;
height: 55px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>jQuery</title>
</head>
<body>
<div id="wrapper">
<div class="elements">
<label for="Email">Email</label>
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
</div>
<div class="elements">
<label for="Phone">Phone No</label>
<input type="text" name="Phone" id="Phone No" placeholder="eg:1234567890">
</div>
<div class="elements">
<label for="Password">Password</label>
<input type="password" name="Password" id="Password">
</div>
<div class="elements">
<label for="confirmPassword">ConfirmPassword</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</div>
<div class="elements">
<input type="submit" id="submit" value="Sign Up">
</div>
</div>
</body>
</html>

#Nitish, If you aware then javascript is case sensitive your tag ID= "Email" whereas your click contains small e.
So replace
alert(isEmail($("#email").val()))
with
alert(isEmail($("#Email").val()))
and everything works!!

Your alert statement is incorrect. Try this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>jQuery</title>
<style type="text/css">
body{
font-family: Lato;
font-size: 200%
}
input{
height: 40px;
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px solid grey;
width: 320px;
}
label{
position: relative;
top: 5px;
float: left;
width: 275px;
}
#wrapper{
width: 625px;
margin: 0 auto;
}
.elements{
margin-bottom: 10px;
}
#submit{
width: 130px;
margin-left: 275px;
text-align: center;
background-color: lightgrey;
height: 55px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="elements">
<label for="Email">Email</label>
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
</div>
<div class="elements">
<label for="Phone">Phone No</label>
<input type="text" name="Phone" id="Phone No" placeholder="eg:1234567890">
</div>
<div class="elements">
<label for="Password">Password</label>
<input type="password" name="Password" id="Password">
</div>
<div class="elements">
<label for="confirmPassword">ConfirmPassword</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</div>
<div class="elements">
<input type="submit" id="submit" value="Sign Up">
</div>
</div>
<script type="text/javascript">
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$("#submit").click(function()
{
alert($("#Email").val());
});
</script>
</body>
</html>

jQuery are case sensitive.
You have :
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
So you must use:
$("#submit").click(function() {
alert(isEmail($("#Email").val()));
});

you have mismatched the id for email. try changinbg id from #email to #Email in the jQuery and it will work
$("#submit").click(function() {
console.log($("#Email").val());
alert(isEmail($("#Email").val()));
});
function isEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
body{
font-family: Lato;
font-size: 200%
}
input{
height: 40px;
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px solid grey;
width: 320px;
}
label{
position: relative;
top: 5px;
float: left;
width: 275px;
}
#wrapper{
width: 625px;
margin: 0 auto;
}
.elements{
margin-bottom: 10px;
}
#submit{
width: 130px;
margin-left: 275px;
text-align: center;
background-color: lightgrey;
height: 55px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="elements">
<label for="Email">Email</label>
<input type="text" name="Email" id="Email" placeholder="eg:yourname#gmail.com">
</div>
<div class="elements">
<label for="Phone">Phone No</label>
<input type="text" name="Phone" id="Phone No" placeholder="eg:1234567890">
</div>
<div class="elements">
<label for="Password">Password</label>
<input type="password" name="Password" id="Password">
</div>
<div class="elements">
<label for="confirmPassword">ConfirmPassword</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</div>
<div class="elements">
<input type="submit" id="submit" value="Sign Up">
</div>
</div>

Hide and Display the div after selecting the radio button

I have a form with cheque and cash radio button and cheque radio is default checked. I also set, If the cheque is checked than displaying the input field. If cash is checked then hide the input field.
I check in the inspect elements, Event is working when selecting the cash but input fields are not hiding when cash is selected.
My issue got resolved using Nisarg Shah answer. Now I tried to submit the form but I am getting the value of cheque radio button but I am not getting the value of cash. Getting errorUndefined index: mode_of_payment
if (isset($_POST['submit'])) {
$status=$_POST['mode_of_payment'];
echo $status;
}
would you help me out in this?
$('label.mode_of_payment').click(function(){
$('input[type=radio]').attr('checked',null);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().attr('checked',"checked");
$(this).addClass("checked");
})
$('#subject_section').change(function() {
if ($('#display_cheque').attr('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

You can't bind to the change event on the entire form, and you don't need to. Since you have already defined a click event to handle checking-unchecking of the radio buttons, you can hide/show the inputs along with them. Your modified event handler could be like this:
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
.radio-border {
border: 1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half {
width: 75px;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked+label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms;
}
#display_cheque_field {
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

You can use below code. Here I have added click event on div of radio button and handled radio button change functionality there itself
$(document).on('click', '.radio-width-half',function() {
debugger;
$("input[name=mode_of_payment]",this).prop("checked",true);
//console.log("radio name = "+$("input[name=mode_of_payment]",this).attr('id'));
if($('#display_cheque').is(":checked"))
{
$('#display_cheque_field').show();
}
else{
$('#display_cheque_field').hide();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none" id="display_cash">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

Try this. I have added this css for custom radio not require to use jQuery for this and also added jQuery for show and hide display_cheque_field.
.radio-width-half{
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
$("input[type=radio]").click(function () {
if($('#display_cheque')[0].checked) {
$("#display_cheque_field").css('display' ,'block');
}
else{
$("#display_cheque_field").css('display' ,'none');
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

How to put buttons on the leaflet map

I am using leaflet map in my application & using bootstrap for responsiveness.
I have some buttons bellow that map.
It looks something like this.
But I want to overlap buttons on map like this
Here is my HTML
<div class="span9" style="height:100%">
<div id="map"></div>
<div style="padding-left: 10px;padding-right: 10px">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
</div>
My css for map
html, body, #map, .row-fluid{
height: 100%;
}
#map {
width: 100%;
}
.btnStyle {
background-color: #4D90FE;
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
border: 1px solid #3079ED;
color: #FFFFFF;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width:100%
}
.lblStyle {
color: red;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width: 100%;
font-weight: bold;
}

Leaflet.js provides the following classes:
leaflet-bottom
leaflet-top
leaflet-left
leaflet-right
Generic HTML example:
<div id="divmap"> <!--leaflet map wrapper div -->
<div id="map" > <!--leaflet map div -->
<div class="leaflet-bottom leaflet-left">
<div id="marker-legend"> <!-- here the legend -->
</div>
</div>
</div>
</div>
Adapting the previous HTML to your particular question:
<div class="span9" style="height:100%">
<div id="map">
<div class="leaflet-bottom leaflet-left">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3 leaflet-control" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3 leaflet-control" />
<span id="studentsCount" class="lblStyle span3 leaflet-control"> Ikke rutesat: </span>
</div>
</div>
</div>

I hope i understood you right and it helps.
Here is the fiddle: http://jsfiddle.net/g3JrG/4/
HTML:
<div class="span9" style="height:100%">
<div id="map-wrapper">
<div id="map"></div>
<div id="button-wrapper">
<input type="button" id="Btn1" value="Btn1" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" class="btnStyle span3" />
</div>
</div>
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
CSS:
#map-wrapper {
width: 100%;
height: 500px;
position: relative;
border: 1px solid black;
}
#map {
width: 100%;
height: 100%;
background-color: green;
}
#button-wrapper {
position: absolute;
bottom: 10px;
width: 100%;
border: 1px solid red;
}
TJL

I hope i understood your question right. You want to show three buttons inside the map and map should have rounded corners as well as the buttons should also have rounded corners.
Hope this helps.
Try this:
HTML:
<div class="span9" style="height:100%">
<div id="map">
<div style="padding-left: 10px;padding-right: 10px; position:absolute; bottom:-10px; width:100%;">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
</div>
</div>
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
CSS:
html, body, #map, .row-fluid{
height: 100%;
}
#map {
width: 100%;
border-radius: 15px;
border:solid 1px black;
}
.btnStyle {
cursor:pointer;
background-color: #4D90FE;
border-radius: 15px;
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
border: 1px solid #3079ED;
color: #FFFFFF;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width:28%
}
.lblStyle {
color: red;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width: 100%;
font-weight: bold;
}
Fiddle

We Keep Coding

JavaScript is the programming language of the Web.

Align buttons up and down using CSS - javascript

Related

Issue while displaying div contents that changes on navbar selection

Why is my hide() and show() not working even without error in JQuery? [duplicate]

What is the error in my form email input . It always returns false while submitting

Hide and Display the div after selecting the radio button

How to put buttons on the leaflet map

Categories

Resources