I have looked at all the other questions on the same topic but none seem to be working. Consider the code-
.River {
height: 100px;
width: 100%;
margin-top: 30px;
background-color: #00BFFF
}
.switch {
position: relative;
width: 60px;
height: 34px;
float: left;
text-align: center;
}
<div class="River">
<p>River</p>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
I am trying to position the switch directly in front of the River label. This would look something like
RIVER - 'SWITCH'
Any ideas on how I can achieve this
I think u have useless tags and css... Make it simple deleting all the css for switch checkbox and wrap it all on form control div
.River {
height: 100px;
width: 100%;
margin-top: 30px;
background-color: #00BFFF
}
<div class="River">
<div class="form-control">
<label for="switch-checkbox" class="switch">River</label>
<input id="switch-checkbox" type="checkbox">
</div>
</div>
Here is code
.River {
display: inline-block;
vertical-align: middle;
}
.switch {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.river-wrap {
background-color: #00BFFF;
overflow: hidden;
padding: 15px;
}
<div class="river-wrap">
<div class="River">
<p>River</p>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
Check That,
.River {
height: 100px;
width: 100%;
margin-top: 30px;
background-color: #00BFFF;
}
.switch {
position: relative;
width: 60px;
height: 34px;
float: left;
text-align: center;
margin-top: 18px;
}
.River p {
display: inline-block;
float: left;
}
<div class="River">
<p>River</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
Of course the checkbox won't stay side-by-side with the River because you set width:100% to .River . I changed your html a little bit for that to work
You have multiple solutions for this ( i don't know how you searched and didn't find a solution )
Since you already added float:left yo switch , add float:left to .River p. See snippet
.River {
height: 100px;
width: 100%;
margin-top: 30px;
background-color: #00BFFF
}
.switch {
position: relative;
width: 60px;
height: 34px;
float: left;
text-align: center;
}
.River p {
float: left;
margin:0;
}
<div class="River">
<p>River</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
display:inline or inline-block on p and on switch
.River {
height: 100px;
width: 100%;
margin-top: 30px;
background-color: #00BFFF
}
.switch {
position: relative;
width: 60px;
height: 34px;
display:inline;
text-align: center;
}
.River p {
margin:0;
display:inline;
}
<div class="River">
<p>River</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
Other ways : using flexbox, grids, tables etc.
Someone already mentioned it in a comment:
Since "River" is a label, it should be inside your label tag. So, if you put it there and wrap .River around the label, you might not get exactly what you want (guessing based on your rules), but you get the checkbox where you want and can work from there.
.River {
height: 100px;
width: 100%;
margin-top: 30px;
background-color: #00BFFF
}
.switch {
position: relative;
width: 60px;
height: 34px;
float: left;
text-align: center;
}
<div class="River">
<label class="switch">River
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
Related
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>
In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.
The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?
Check the codepen since the snippet is not working
The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?
https://codepen.io/Fropis/pen/XwJWjg
/**************************************** Contactos **********************************************************/
function openAB(){
document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
}
function fechar(){
document.getElementById("janela2").innerHTML = "";
}
/*****************************THE ONE THAT MATTERS IS ABOVE****************/
html, body {
width: 3779.527559055px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("https://images4.alphacoders.com/111/111298.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 350% 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #Home, #contact{
width: 400px;
height: 400px;
padding:20px;
background: none;
}
.panel {
background: #fafafa;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin-top: 0.5em;
padding: 0.5em;
}
input:focus {
outline: none;
}
input::after {
width: 100%;
height: 10px;
background: red;
}
.nav-list {
width: 92.5%;
max-width: 30em;
text-align: center;
margin: auto;
}
.nav-list li {
list-style: none;
display: inline-block;
background: white;
padding: 0.7em;
margin: 0 0.1em;
}
.nav-list .active {
background-color: black;
}
#janela2{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:20px black solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>
<div id="mydiv" style="display:none;">
<div id="navigation">
<ul class="nav-list">
<li id="js-show-all">Mostrar Todos</li>
<li id="js-search">Procurar</li>
<li id="js-add-new">Adicionar Contacto</li>
</ul>
</div>
<div id="search-panel" class="panel">
<h1>Procurar Contacto</h1>
<form id="search" action="#">
<div id="results"></div>
<div>
<label>
<input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
</label>
</div>
<input type="submit" value="Procurar"/>
</form>
</div>
<div id="contact-panel" class="panel">
<form id="contact" action="#">
<h1>Adicionar Novo Contacto</h1>
<div>
<label>
<input type="text" name="person" id="name" placeholder="José Bigodes" required/>
</label>
<label>
<input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}" required title="Insira 9 caracteres"/>
</label>
<label>
<input type="email" name="email" id="name" placeholder="nome#desk.com" pattern="+#desk.com" required/>
</label>
</div>
<div>
<input type="submit" value="Adicionar" />
</div>
</form>
</div>
<div id = "show-panel" class="panel">
</div>
</div>
<div class="navbar">
<a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
</div>
</body>
<script src=cale.js></script>
</html>
openAb has a typo in html vs openAB function in js . Replace with
<img onclick="openAB()" ....
Your function name is openAB but you are calling openAb
<img onclick="openAB()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact">
I was trying to create a button(on bottom right) which will open a form after clicking or hovering on it. The form will slide(slowly) open and close after clicking on login, my code is making the button going down as the form is opening.
Also the button should be on the right side, I've tried float:right; and right:0; to fix the button to right but it's not working.
Here's my code:
function showForm(){
document.getElementById('loginForm').style.display = "block";
}
function hideForm(){
document.getElementById('loginForm').style.display = "none";
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
.no-show{display:none;}
.form-container {
position:absolute;
bottom:0;
right:0;
float: right;
width:100%;
}
body { font-family: tahoma; }
#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin: 10px 0 0 0;
display: block;
}
.form-label, .form-field {
display: inline-block;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm();">
<span class="label">Login</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</span>
</p>
</form>
</div>
Here's the working fiddle- https://jsfiddle.net/d5L8bywk/1/
Form should open(up side) slowly with ease and should close after click on login button.
It should look like this:
Check this code. No jQuery needed, you can achieve this with pure css transition in combination with height property.
function showForm() {
document.getElementById('loginForm').classList.add('show');
}
function hideForm() {
document.getElementById('loginForm').classList.remove('show');
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: tahoma;
height: 100vh;
}
.no-show{
display:none;
}
.form-container {
position: absolute;
bottom: 40px;
right: 80px;
left: auto;
top: auto;
width: 230px;
}
#loginForm {
background: #ccc;
width: 250px;
color: #333;
height: 0;
overflow: hidden;
transition: all 0.5s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#loginForm.show {
height: 150px;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
.form-label, .form-field {
display: inline-block;
width: 100%;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
#login {
text-align: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<div id="loginForm" onmouseleave="hideForm();">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</div>
</form>
<span id="login" class="label" onmouseover="showForm();">Login</span>
</div>
#login{
float:right
}
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm()">
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name"></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password"></span>
</span>
</span>
<span class="label">Login</span></p>
</form>
</div>
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;
}
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>