How do you move the move the button to the bottom of the page? I tried and its not working. I have tried margin-bottom: 0px; but the button still not move the bottom
<form tag="Create Logon">
<div id="layer">
</div>
<div class="left">
Fistname *:
</div>
<div class="right">
<input type="firstname" name="firstname" style="width: 300px; font-size: 14pt; margin-left: 40px;" />
</div>
<div class="right">
<input type="Username" name="username" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<div class="left">
Password *:
</div>
<div class="right">
<input type="password" name="password" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!</p>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
alert("Thank you for registering with GreenB!");
}
</script>
</div>
Use absolute positioning:
button {
position:absolute;
bottom:0;
}
jsFiddle example
button {position: absolute; bottom: 0}
Related
UPDATES: I tried the suggestions below but they did not work.
I want to contain the calendar within the white div with a dark grey border (class = "profileEdit"), and only have its overflow viewable by scrolling. Right now, it's spilling onto profileEdit's parent divs.
SELECTED HTML
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>
DATEPICKER JQUERY
$(function () {
$("#datepicker").datepicker();
});
DATEPICKER CSS
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
overflow-y: scroll;
position: relative;
}
#ui-datepicker-div {
position: absolute;
width: 280px;
font-family: frutigerLight;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
UPDATE: Solution works, but messes up spacing: The space between the "Starts" toggles on and off as well.
You can use an inline datepicker and control its visibility with JavaScript:
$(function() {
$('.dateParent').datepicker({ inline: true, altField: '#datepicker' });
$('#datepicker').focus(function(event) {
event.preventDefault();
$('.ui-datepicker').addClass('shown');
return false;
});
$(document).click(function(event) {
if(!$(event.target).is('.dateParent *'))
$('.ui-datepicker').removeClass('shown');;
});
});
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
position: relative;
}
.ui-datepicker {
visibility: hidden;
height: 0;
margin: 1rem auto;
}
.ui-datepicker.shown {
visibility: visible;
height: initial;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" type="text/css">
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>
Try to remove height attr from calendar element. If it doesnt work check this jQuery UI inline Datepicker auto-resize to parent container
As a UX designer I'd think that you want to either make the containing DIV larger (personally think a popup like the calendar shouldn't extend outside it's container) or possibly change the direction that the calendar control opens in relative to the mouse position. If your trigger control is at the bottom of it's container you have the calendar pop upwards instead of down.
This is a my jQuery and HTML code.
my goal is when I click on the current box1, box2 or box3 , I want to display current sub box.
For example : when I click on current box1 should be open current sub_box_1, and so. I did some jQuery code but I can't get result.
Thanks!
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).$('#sub_box_1').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>
Try using this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).children('.sub_box').show();
});
});
jsfiddle example: https://jsfiddle.net/d6zf0n1b/
When you are using $(this).$('#sub_box_1'). you are trying to execute the $ function of the return of $(this). There is no $ function of $(this). Hence you are getting an error.
The other problem is that you are trying to access by the "#" accessor which matches the id not the class.
So this is why Andre's answer works. He is starting from the box that was clicked and looking for immediate children that have the class "sub_box".
One thing to keep in mind is that the children method will only search one level down from the parent. If the box could be deeper down, you should use the 'find' method.
You can use the jQuery find method (https://api.jquery.com/find/), which will find elements inside the the element matching the selector you use, try this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).find('.sub_box').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>
My check box will alert when it is by itself but when I contain it in a title pane then content pane nothing happens:
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding: 0;">
<div style="position: absolute; left: 2px; bottom: 2px; z-Index: 999;">
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Options', closable:false, open:true">
<div data-dojo-type="dijit.layout.ContentPane" style="width: 230px; height: 275px; overflow: auto;">
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="validate()/>
</div>
</div>
</div>
</div>
<script>
function validate(){
var remember = document.getElementById('army');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.");
}
}
</script>
You have missed the id attribute on <input type="checkbox">:
<input type="checkbox" id="army" name="checkbox" value="check" />
and also close the attributes:
onclick="validate()"/>
//-----------------^
sorry for the question but i have problem with FadeIn() (and so with Jquery):
I have:
<div style="height:50px;width:700px">
<div id="Ipo" style="width: 100px;display:block; float: left; text-align:center; background-color:#ff0000; margin-left: 20%">
<input id="ipo" type="radio" name="eq" />
</div>
<div id="Time" style="width: 100px;display:block; float: left; text-align:center; background-color:#ffff00; margin-left: 31%">
<input id="time" type="radio" name="eq" />
</div>
with a form, i start a function in javascript, and in this function i would like to put this code:
$('#Ipo').hide().fadeIn(5000);
$('#Time').hide().fadeIn(5000);
but doesn't work :(
Thanks
i solved in this way:
This is html dom of buttons:
the first button (it is a button that i said in the first post is for form)
<div style="text-align:center">
<input id="ca" type="radio" onClick="start()"/>
</div>
And now the div that contains two div (with two buttons):
<div style="height:50px;width:700px">
<div id="Ipo" style="width: 100px;display:none; float: left; text-align:center; background-color:#ff0000; margin-left: 20%">
<input id="ipo" type="radio" name="eq" />
</div>
<div id="Time" style="width: 100px;display:none; float: left; text-align:center; background-color:#ffff00; margin-left: 31%">
<input id="time" type="radio" name="eq" />
</div>
</div>
And now the code:
$("#ca").click(start);
function start(){
$('#Ipo').fadeIn(2000);
$('#Time').fadeIn(2000);
}
In my first post there where two problems:
1) there was display:block;
2) i add in the code this line $("#ca").click(start);
Bye and thanks for the help ;)
The Bootstrap input form isn't centring even though I have it setup to be.
Here's what it looks like:
Form Not Centering:
Proper Form
The red is the problem and the green is what I want. Here is the code.
CSS:
.form-control {
height: 50px;
width: 330px;
padding-left: 5px;
font-size: 20px;
font-family: 'Lato', sans-serif;
}
HTML:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address">
</div>
<div class="form-group">
<button type="submit" class="btn">Early Access</button>
</div>
</form>
All help would be amazing, thank you.
Does this fix your problem?
Just added a wrapper around it:
#wrapper {
text-align:center;
}
.form-control {
margin: 0 auto;
}
How about something along those lines:
Wrap your stuff with a <div class="container">, centering everything.
Add an id to that same div and set the width to whatever you want.
Set the width of your button to 100%.
html:
<div class="container" id="myContainer">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address" />
</div>
<br>
<div class="form-group">
<button id="earlyAccessBtn" type="submit" class="btn">Early Access</button>
</div>
</form>
</div>
css:
#myContainer {
width: 350px;
}
#earlyAccessBtn {
width: 100%;
}
DEMO