Fix div position in a form - javascript

I am using the same form on two different pages. On the first one every div is tidy in the desired position. On the second page, there is a select that only appears after a change (jquery trigger), which causes the div below it to appear first on the right but after the trigger it moves on the left. I'd like the div which contains radio buttons to be on the left side at all times, just like it is on the first page. The part that I'd like to fix is #center-add-new-event-form .container-field input[type=radio].
This is the css.
#center-add-new-event-form,
#center-add-new-event-form * {
box-sizing: border-box;
}
#center-add-new-event-form {
padding: 20px 10px 0px;
}
#center-add-new-event-form .container-field {
width: 50%;
float: left;
padding: 0 10px;
margin-bottom: 20px;
vertical-align: top;
}
#center-add-new-event-form .container-field label {
display: block;
font-weight: 600;
margin-bottom: 5px;
}
#center-add-new-event-form .container-field input[type=text],
#center-add-new-event-form .container-field select {
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .center-error-message {
font-size: 0.9em;
color: darkred;
display: block;
margin-left: 1px;
}
.center-event-actions {
border-top: 1px solid #ddd;
padding: 20px 20px 15px;
text-align: right;
}
.clearfix:before,.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
#media screen and (max-width: 767px) {
#center-add-new-event-form .container-field {
float: none;
width: 100%;
}
}
<form id="center-add-new-event-form" class="clearfix">
<div class="container-field" style="width: 100%">
<label></label>
<div id="center-request-details">
</div>
</div>
<div class="container-field">
<label for="teaching-requests"></label>
<select id="input-teaching-requests" name="teaching-requests" class="create-request-event ui-widget-content ui-corner-all">
<option value=""></option>
<option value=""></option>
</select>
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="request-date"></label>
<input type="text" name='request-date' class="create-request-event event-datepicker ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
</div>
<div class="container-field">
<label for="teaching-start-time"></label>
<input type="text" name="teaching-start-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<span class="clearfix"></span>
<div class="container-field">
<label for="teaching-end-time"></label>
<input type="text" name="teaching-end-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="teaching-teacher"></label>
<div id='contanier-teacher-selection'>
</div>
<span class="center-error-message"></span>
</div>
<div class="container-field pull-left" align="left">
<label for="recursive-events" align="left">
<input type="radio" align="left" name="recursive" value="daily"/>Daily
<input type="radio" align="left" name="recursive" value="weekly"/>Weekly
<input type="radio" align="left" name="recursive" value="monthly"/>Monthly
</label>
</div>
<span class="center-error-message"></span>
</form>
<div class="center-event-actions">
<button id="cancel-add-new-event" class='button' data-izimodal-close="" data-izimodal-transitionout="bounceOutDown"></button>
<button id="add-new-event" class='button button-primary'></button>
</div>
Before
After

It looks like it is caused by container-field <= width: 50% and float
so when this div appears it appears next to last one
the solution add
<span class="clearfix"></span>
before the the element with radio buttons

This might work:
#center-add-new-event-form .container-field input[type=radio]:before
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]:after
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
float: right;
}

Related

Problems with legend tag when I am unhiding and re-hiding it in a fieldset

So I am trying to do this thing where a legend tag shows when the input box is being clicked. The idea is there is that the input box is inside a fieldset and the legend as a hidden class first. If the input box is on focus or clicked, the hidden class will be removed and it will show like this
I also added a part wherein if was left blank the legend tag will disappear by re-adding the removed
hidden class. However, it also leaves awkward whitespace in a place where it is formerly was like this
Did I do something wrong? Is there something I must do first?
The code is here:
$(function() {
$(".next").click(function() {
var div = $(this).closest('.wrapper');
var next = $(this).closest('.wrapper').next();
div.addClass('hidden');
next.removeClass('hidden');
})
})
$(function() {
$('input').click(function() {
$('input').each(function(index) {
const legend = $(this).closest('fieldset').children('legend');
if (($(this).val() == "" || $(this).val() == " ") && $(this).is(":focus") == false) {
if (legend.hasClass('hidden') == false) {
legend.addClass('hidden');
$(this).css("margin-top", "10px");
}
} else {
legend.removeClass('hidden');
$(this).css("margin-top", "-150%");
}
})
})
})
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap');
html {
font-family: "Poppins", sans-serif;
margin: 0px;
padding: 0px;
background: #EDE9E8;
}
.cover {
width: 100%;
height: 100%;
position: absolute;
}
form {
/*border: 3px solid red;/**/
width: 57%;
height: 100%;
margin: 0 auto;
}
.child {
width: 50%;
}
.wrapper {
background: white;
width: 95%;
height: 65%;
padding: 3%;
margin-top: 8%;
border-radius: 50px;
display: flex;
}
.border_none {
border: none;
}
.border_black {
border: 2px solid black;
}
.with_image {
text-align: center;
margin-top: 15%;
}
.with_image img {
width: 40%;
}
.input_box {
height: 40px;
width: 70%;
}
.wrapper h1 {
margin-top: 10%;
}
.wrapper label {
font-size: 150%;
}
legend {
font-size: 12px;
/*border: 2px solid black;/**/
}
.wrapper fieldset input[type="text"],
.wrapper fieldset input[type="email"],
.wrapper input[type="password"],
input[type="number"] {
width: 100 %;
height: 100 %;
margin - top: 10 px;
border: none;
/**/
}
.wrapper fieldset input[type="text"]: focus,
.wrapper input[type="email"]: focus,
.wrapper input[type="password"]: focus,
input[type="number"]: focus {
outline: none;
}
.child fieldset {
overflow: hidden;
border - radius: 20 px;
}
.wrapper select {
margin - left: 14 %;
height: 40 px;
}
.wrapper.next {
background: #2c54db;
width: 15%;
height: 8%;
border: white;
color: white;
float: right;
border-radius: 40px;
font-weight: bold;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cover">
<form method="post" action="">
<fieldset class="wrapper border_none">
<div class="child">
<h1>Identity</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">First Name</legend>
<input class="input_inner" type="text" name="fname" placeholder="First Name">
</fieldset><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Last Name</legend>
<input class="input_inner" type="text" name="lname" placeholder="Last Name">
</fieldset><br>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Email</legend><input type="email" name="email" placeholder="Email">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
<div class="child with_image">
<img src="../images/registration/user_folder_125px.png">
</div>
</fieldset>
<fieldset class="wrapper hidden">
<div class="child">
<h1>Password</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Password</legend>
<input type="password" name="password" placeholder="Password">
</fieldset>
<br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Confirm Password</legend>
<input type="password" name="cpassword" placeholder="Confirm Password">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
</div>
<div class="child">
</fieldset>
</form>
</div>
Thank you in advance!

Vertical nav bar is overlapping main body when i resize?

I'm fairly new to coding less than 6 months and am working on my first paid website and I've run into an issue i'm really not sure how to fix. thanks for the help. I've already tried setting margins but CSS is tricky so maybe i'm not doing enough i'm really not sure how to fix
This is what the page looks like when down sized
This is what the page looks like at regular size
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
<body>
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>
You can make it clear:both for login div in mobile mode. It is due to div .login-page where you gave margin:auto to make it centralized.
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
#media(max-width:767px){
.login-page{
clear: both;
}
}
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>

Width automatically changes when JavaScript function occurs?

I'm currently experiencing something rather strange. I'm building a website for a client which includes a horizontal nav bar that dynamically changes the page content without reloading via javascript. Three of the four tabs function correctly, however when I select the last tab, the side bar dramatically increases in width, pushing my service form out of it's background and off the page - even though the javascript shouldn't be affecting that element at all. I've been playing with it all day and cannot figure out what's causing this.
My JavaScript is:
var jsOverview = document.getElementById('overview');
var jsQuote = document.getElementById('quote');
function changeTextQuote() {
if (jsOverview.style.display === 'none') {
jsOverview.style.display = 'block';
jsQuote.style.display = 'none';
} else {
jsOverview.style.display = 'none';
jsQuote.style.display = 'block';
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
/*Service Pages CSS*/
.services {
display: grid;
width: 100%;
margin: 0 600px;
margin-bottom: 10px;
}
.side-bar {
grid-column: 1;
grid-row: 1;
background: black;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 100%;
height: 258px;
margin: 30px 0;
margin-right: 25px;
}
ul.side-bar-list {
text-align: left;
padding: 0;
width: 100%;
}
.side-bar-list li {
margin-bottom: 10px;
margin-top: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width: 100%;
}
.side-bar-list li:hover {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar-list li:focus {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar ul {
list-style-type: none;
}
.side-bar-item {
color: white;
text-align: left;
text-decoration: none;
}
.side-bar-item:hover {
color: white;
text-decoration: none;
}
.side-bar-item:focus {
color: white;
text-decoration: none;
}
.services-content {
grid-column: 2;
grid-row: 1;
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
padding-left: 10px;
width: 30%;
margin-bottom: 5px;
}
.serviceForm {
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
grid-column: 2;
grid-row: 1;
display: grid;
grid-column-gap: 20px;
width: 30%;
margin: 20px auto;
padding: 10px;
padding-left: 20px;
}
.col-left {
grid-column: 1;
grid-row: 1;
}
.col-right {
grid-column: 3;
grid-row: 1;
}
.commentText {
grid-column-start: 1;
grid-column-end: 4;
}
label {
color: black;
}
span {
color: white;
}
textarea[name=comments] {
resize: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 520px;
height: 150px;
}
HTML:
<body>
<div class="services">
<div class="side-bar">
<ul class="side-bar-list">
<li><a class="side-bar-item" href="#" onclick="changeTextOverview(); return false;">Overview</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextInterior(); return false;">Interior Lighting</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextExterior(); return false;">Exterior Lighitng</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextQuote(); return false;">Request a Quote</a></li>
</ul>
</div>
<div class="services-content">
<div id="overview">
<h1>Lighting Service:</h1><br />
<p>Text removed for sake of business entity.</p>
</div>
<div id="quote" style="display: none;" <h1>Request a Quote</h1>
<form class="serviceForm" action="mailto:companyemail" method="post" enctype="text/plain">
<div class="col-left">
<label>
<span>* Name:</span><br />
<input type="text" name="LightingRequestName" required />
</label><br />
<label>
<span>* Email:</span><br />
<input type="text" name="LightingRequestEmail" required />
</label><br />
<label>
<span>Company:</span><br />
<input type="text" name="LightingRequestCompany" />
</label><br />
<label>
<span>Address:</span><br />
<input type="text" name="LightingRequestAddress" />
</label><br />
</div>
<div class="col-right">
<label>
<span>City:</span><br />
<input type="text" name="LightingRequestCity" />
</label><br />
<label>
<span>State:</span><br />
<input type="text" name="LightingRequestState" />
</label><br />
<label>
<span>Zip Code:</span><br />
<input type="text" name="LightingRequestZip" />
</label><br />
<label>
<span>Phone Number:</span><br />
<input type="text" name="LightingRequestNumber" />
</label><br />
</div>
<label class="commentText">
<span>Comments:</span><br />
<textarea name="comments"></textarea><br />
</label>
<div class="formSubmitButton">
<input type="submit" value="Submit" /><br />
<br />
</div>
</form>
</div>
</div>
</div>
<script src="~/Content/LightingPageText.js"></script>
<script src="~/Content/ServicesQuote.js"></script>
</body>
I'm sure it's probably something really stupid I overlooked, but any help is appreciated!
EDIT: I was looking around in the inspect window on chrome, whenever I click the button to display the form, the actual grid column the side bar is in expands, pushing the rest of the content off of the screen. Not sure why this is happening. I'm still playing with it, but hopefully this revelation will help lead to some answers.
If this is a direct copy-paste from your source, you forgot the closing angle bracket on #quote.
Yours: <div id="quote" style="display: none;" <h1>Request a Quote</h1>
Updated: <div id="quote" style="display: none;"> <h1>Request a Quote</h1>
Note the > before opening <h1>.

CSS checkbox styling not working

I have my checkboxes and I am trying to style it with the following CSS.
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
The checkboxes are inside my form.
This does not work when I click my checkbox. I am new to styling and let me know where the error is.
You have spaces around the name in the for attribute, remove them.
Working demo:
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
/*added this to show the behavior here on SO*/
background-color: #000
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for="id_contract_name">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for="id_is_ceo">
<span></span> CEO?
</label>
</div>
You have to mention id or class in CSS.
And if you want to add css dynamically then you have to use javascript or jquery.
#id_contract_name{
display: none;
border: none !important;
box-shadow: none !important;
}
#id_is_ceo {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<html>
<body>
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
</body>
</html>

Displaying form elements inline

I am following the tutorial from http://www.sitepoint.com/building-list-jquery-local-storage/
to build a todo list and I want to display for elements in the same line. At the moment form elements are stacked over each other and displayed vertically but I want them to be displayed vertically. I ultimately want to achieve a result that looks like this:
Here is the CSS Code
.task-list{
width: 250px;
float: left;
margin: 0 5px;
background-color: #e3e3e3;
min-height: 240px;
border-radius: 10px;
padding-bottom: 15px;
}
.task-list input, .task-list textarea{
width: 240px;
margin: 1px 5px;
}
.task-list input{
height: 30px;
}
.todo-task{
border-radius: 5px;
background-color: #fff;
width: 230px;
margin: 5px;
padding: 5px;
}
.task-list input[type="button"]{
width: 100px;
margin: 5px;
}
.todo-task > .task-header{
font-weight: bold;
}
.todo-task > .task-date{
font-size: small;
font-style: italic;
}
.todo-task > .task-description{
font-size: smaller;
}
Here is the html code
<div class="task-list">
<h3>Add a task</h3>
<form id="todo-form">
<input type="text" placeholder="Task Name" />
<textarea placeholder="Description"></textarea>
<input type="text" id="datepicker" placeholder="Due (dd/mm/yyyy)" />
<input type="button" class="btn btn-primary" value="Add Task" onclick="todo.add();" />
</form>
<input type="button" class="btn btn-primary" value="Clear Data" onclick="todo.clear();" />
<div id="delete-div">
Drag Here to Delete
</div>
</div>
<div class="task-list task-container" id="pending">
<h3>Pending</h3>
<!--<div class="todo-task">
<div class="task-header">Sample Header</div>
<div class="task-date">25/06/1992</div>
<div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
</div>-->
</div>
You just need to change
.task-list {
width: 250px;
(found at the very top of your css)
to something like
.task-list {
width: 850px;
this would then give all the elements within the space room to stand side by side...

Categories

Resources