grrrrrrr, I have been struggling with this for a while.
I try to create a progress bar with connectors, I would the connectors to be under the Circles I have, when the circle is with class active the connector is shown and I would like to avoid it.
Take a look at my fiddle.
/*custom font*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
font-family: montserrat, arial, verdana;
margin:0;
padding:0;
background-image:url("Capture.PNG");
}
.modal{
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: #fefefe;
margin: 8% auto;
border: 1px solid #888;
width: 662px;
height: 662px;
}
.modal-header{
height:100px;
}
.right-header{
float:right;
width:50%;
}
#msform .formPage {
height: 662px;
padding: 35px;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
/*Hide all except first fieldset*/
#msform > .formPage ~ .formPage{
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
/*CSS counters to number the steps*/
counter-reset: step;
}
/*This is the li circle*/
#progressbar li {
counter-increment: step;
width: 27px;
height: 27px;
background-color:#dcdedf;
margin-left: 35px;
border-radius: 50%;
list-style-type: none;
float: left;
}
/*Display the li number*/
#progressbar li:before {
content: counter(step);
text-align: center;
line-height: 26px;
display: block;
color:white;
}
/*progressbar connectors*/
#progressbar li:after {
content: "";
width: 38px;
height: 10px;
background-color: #dcdedf;
position: relative;
top: -18px;
left: -36px;
display: block;
z-index: -1;
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active, #progressbar li.active:after{
background: #3395ff;
color: white;
}
#progressbar li:first-child{
margin-left:0;
}
.close {
color: #aaa;
float: right;
font-size: 24px;
padding: 5px 15px;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="modal">
<div class='modal-content'>
<div class='modal-header'>
<span class="close" data-action="close-modal">x</span>
<div class="left-header">
<span>Add new App</span>
<span></span>
</div>
<div class="right-header">
<!-- progressbar -->
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<hr/>
<div class="modal-inner-content">
<form id="msform">
<div class="formPage">
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</form>
</div>
</div>
</div>
You need to set the z-index of the immediate parent i.e #progressbar to raise it above the other ancestors.
#progressbar {
position: relative;
z-index: 1;
}
/*custom font*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
font-family: montserrat, arial, verdana;
margin: 0;
padding: 0;
background-image: url("Capture.PNG");
}
.modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 8% auto;
border: 1px solid #888;
width: 662px;
height: 662px;
}
.modal-header {
height: 100px;
}
.right-header {
float: right;
width: 50%;
}
#msform .formPage {
height: 662px;
padding: 35px;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
/*Hide all except first fieldset*/
#msform>.formPage~.formPage {
display: none;
}
/*inputs*/
#msform input,
#msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover,
#msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
/*CSS counters to number the steps*/
counter-reset: step;
position: relative;
z-index: 1;
}
/*This is the li circle*/
#progressbar li {
counter-increment: step;
width: 27px;
height: 27px;
background-color: #dcdedf;
margin-left: 35px;
border-radius: 50%;
list-style-type: none;
float: left;
}
/*Display the li number*/
#progressbar li:before {
content: counter(step);
text-align: center;
line-height: 26px;
display: block;
color: white;
}
/*progressbar connectors*/
#progressbar li:after {
content: "";
width: 38px;
height: 10px;
background-color: #dcdedf;
position: relative;
top: -18px;
left: -36px;
display: block;
z-index: -1;
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active,
#progressbar li.active:after {
background: #3395ff;
color: white;
}
#progressbar li:first-child {
margin-left: 0;
}
.close {
color: #aaa;
float: right;
font-size: 24px;
padding: 5px 15px;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="modal">
<div class='modal-content'>
<div class='modal-header'>
<span class="close" data-action="close-modal">x</span>
<div class="left-header">
<span>Add new App</span>
<span></span>
</div>
<div class="right-header">
<!-- progressbar -->
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<hr/>
<div class="modal-inner-content">
<form id="msform">
<div class="formPage">
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</form>
</div>
</div>
</div>
It seems to work fine when using z-index...
http://www.codeply.com/go/NklFtnx5ks
#progressbar li:after {
content: "";
width: 47px;
height: 10px;
background-color: #dcdedf;
position: relative;
top: -18px;
left: -45px;
display: block;
opacity: .99;
z-index: -1;
}
Related
I have the following fiddle: https://jsfiddle.net/uosLke60/
I would like the input button to center underneath the quantity selector. How can I achieve this?
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
Thanks for your input.
You'll have to change a few things.
Note: A few of my changes are not a good practice like using !important, but I had to use it because it wasn't changing, so I had to force an overwrite there.
.Product_Card_Button {
width: fit-content;
}
quantity-input {
display: block !important;
width: 100% !important;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
padding: 5px 0px;
}
.quantity-form {
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
}
.quantity-form > quantity-input {
height: 100%;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add" class="quantity-form">
<div>
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
</div>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
On this approach, I decided to use flexbox, because it was the easiest way to align items, I had to change the width as well or it wouldn't truly align to the center.
**Remove "display: inline-flex;"**
<style>
form{text-align: center;}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
****Another solution****
quantity-input.quantity {
width: max-content !important;
}
</style>
You can use width:fit-content and text-align: center on form.
Note that the button is centered in the form, but not with the input value because of the type="number" adding buttons on the right (Center text in html number input).
form{
width:fit-content;
text-align: center;
border:1px solid black;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
opacity: 1;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
cursor: pointer;
font-size: 13px;
width: 120px;
}
input{
text-align: center;
}
<form method="post" action="/cart/add">
<div class="quantity">
<button> - </button>
<input type="number" name="quantity" id="quantity" min="1" value="1">
<button> + </button>
</div>
<br>
<input type="submit" class="Add_To_Cart_Button" />
</form>
Here you go, without changing your CSS just add some, like a grid system / flexbox:
DEMO
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
/* ADDED */
quantity-input{
flex-wrap: wrap;
}
button{
flex: 1 0 50%;
max-width: 100%;
order: 2;
margin: auto;
}
#quantity{
flex: 0 0 100%;
order: 1;
max-width: calc(100% - 8px);
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
You only need to change your display: inline-block, change the width to 100% and add a text-align: center;, and it should be working
Add text-align: center to the form. https://jsfiddle.net/211368e/8vkLzg6c/9/
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
form{
text-align: center;
}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="min-width: 50vw; min-height: 25.4px; display: inline-flex">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
Replace margin-bottom: 40px; with margin: 0 0 40px 40px;
This way you are adding 40px of margin on left and bottom side of the button
I have a question:
I want my radio button at default-mode to have the css:
border-color: #00AD51;
color: #fff;
background-color: #00AD51;
and when the user selects/clicks on another radio button it changes to this css:
border-color: #00AD51;
color: #00AD51;
background-color: #fff;
Is this possible? How can I make specific css on default-mode and checked-mode on radio buttons?
HTML:
<p><b>What is your favorite animal?</b></p><br />
<div class="Animals"><div class="input">
<input id="dog" type="radio" name="Animal" checked>
<label for="dog"><span>Dog</span></label>
</div>
<div class="Animals"><div class="input">
<input id="cat" type="radio" name="Animal">
<label for="cat"><span>Cat</span></label>
</div>
<div class="Animals"><div class="input">
<input id="Horse" type="radio" name="Animal">
<label for="Horse"><span>Horse</span></label>
</div>
<div class="Animals"><div class="input">
<input id="Cow" type="radio" name="Animal">
<label for="Cow"><span>Cow</span></label>
</div>
Link to codepen: https://codepen.io/vicm/pen/QBPQWZ
Here is a snippet where I:
Added the closing </div> in your HTML,
Reorganized your CSS code and tried to remove duplicate styled properties,
Corrected some typo errors (display: inline-blok to display: inline-block, position:relavitve; to position: relative; …),
I added some styling plus comments to make things clear about the different possible states,
Instead of using checked on the "recommended" answer, you can use another custom property, like "recommend", and use it in your CSS to stylize it correctly.
input[type=radio] {
margin-right: 3px;
position: relative;
top: 3px;
}
.Animals {
display: inline-block;
height: 100px;
margin: 10px;
border: 2px solid #003D6A;
border-radius: 3px;
background-color: #fff;
padding: 10px;
text-align: center;
line-height: 20px;
font-family: Helvetica;
font-size: 20px;
}
.Animals .input {
padding-bottom: 0;
}
.Animals input[type=radio] {
opacity: 0;
}
.Animals input[type=radio]+label {
cursor: pointer;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
border: 2px solid;
margin: 10px;
height: 100px;
border-radius: 3px;
text-align: center;
font-size: 20px;
font-family: Helvetica;
width: 292px;
/* Default */
border-color: darkblue;
background-color: #fff;
color: darkblue;
}
/* Recommanded */
.Animals input[type=radio][recommand]+label {
border-color: turquoise;
color: turquoise;
}
/* Hover */
.Animals input[type=radio]+label:hover {
border-color: #00AD51;
color: #00AD51;
}
/* Checked */
.Animals input[type=radio]:checked+label {
border-color: #00AD51;
background-color: #00AD51;
color: #fff;
}
.Animals label span {
position: relative;
top: 33%;
}
<p><b>What is your favorite animal?</b></p><br />
<div class="Animals">
<div class="input">
<input id="dog" type="radio" name="Animal" recommand>
<label for="dog"><span>Dog</span></label>
</div>
</div>
<div class="Animals">
<div class="input">
<input id="cat" type="radio" name="Animal">
<label for="cat"><span>Cat</span></label>
</div>
</div>
<div class="Animals">
<div class="input">
<input id="Horse" type="radio" name="Animal">
<label for="Horse"><span>Horse</span></label>
</div>
</div>
<div class="Animals">
<div class="input">
<input id="Cow" type="radio" name="Animal">
<label for="Cow"><span>Cow</span></label>
</div>
</div>
If you wish to modify something, it should be easier now.
You can use this simple trick.
When user can click or check the radio button
.Animals input[type=radio]:checked + label{border-color: #00AD51;color: #00AD51;background-color: #fff;}
Hope this help.
Let me know further clarification.
input[type=radio]
{
margin-right: 3px;
position: relative;
top: 3px;
}
.Animals
{
border:2px solid #003D6A;
margin:10px;
height:100px;
padding:10px;
border-radius:3px;
text-align:center;
font-size: 20px;
line-height: 20px;
background-color:#fff;
font-family: Helvetica;
display: inline-blok;
}
.Animals{
margin: 0 auto;
}
.Animals input[type=radio] {
opacity: 0;
position:relavitve;
}
.Animals input[type=radio] + label {
cursor: pointer;
text-shadow: 1px 1px 0 rgba(0,0,0,0);
border: 2px solid #003D6A;
margin: 10px;
height: 100px;
border-radius: 3px;
text-align: center;
font-size: 20px;
font-family: Helvetica;
width: 292px;
background-color: #ffffff;
}
.Animals input[type=radio] + label:hover{
border-color: #00AD51;
background-color: #fff;
color: #00AD51;
}
.Animals .input
{
padding-bottom:0;
}
.Animals label span
{
position:relative;
top:33%;
}
.Animals input[type=radio]:checked + label{
border-color: #00AD51;
color: #00AD51;
background-color: #fff;
}
<p><b>What is your favorite animal?</b></p><br />
<div class="Animals"><div class="input">
<input id="dog" type="radio" name="Animal" checked>
<label for="dog"><span>Dog</span></label>
</div>
<div class="Animals"><div class="input">
<input id="cat" type="radio" name="Animal">
<label for="cat"><span>Cat</span></label>
</div>
<div class="Animals"><div class="input">
<input id="Horse" type="radio" name="Animal">
<label for="Horse"><span>Horse</span></label>
</div>
<div class="Animals"><div class="input">
<input id="Cow" type="radio" name="Animal">
<label for="Cow"><span>Cow</span></label>
</div>
I'm trying to implement custom styles for radio buttons.
I've almost achieved it but issue is when i try to click on other radio button it is not getting highlighted.
I'm struck here please help.
.radio-radio-wrapper {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-radio-wrapper input[type='radio'] {
display: none;
}
.radio-radio-wrapper label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
cursor: pointer;
}
.radio-radio-wrapper input[type=radio]:checked+span>label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 4px;
content: " ";
display: block;
background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
<span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity & Partial Service</label></span>
</span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Full Network Service (No Capacity)</label></span>
</span>
</div>
You forgot the unique id's. Both id's are radio1. You should set it to radio1 and radio2 and so on.
And don't forget the labels for property to link to the correct input field. See below.
.radio-radio-wrapper {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-radio-wrapper input[type='radio'] {
display: none;
}
.radio-radio-wrapper label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
cursor: pointer;
}
.radio-radio-wrapper input[type=radio]:checked+span>label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 4px;
content: " ";
display: block;
background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
<span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity & Partial Service</label></span>
</span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
</span>
</div>
Here is the perfectly working code for your quick reference
.radio-radio-wrapper {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-radio-wrapper input[type='radio'] {
display: none;
}
.radio-radio-wrapper label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
cursor: pointer;
}
.radio-radio-wrapper input[type=radio]:checked+span>label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 11px;
left: 12px;
content: " ";
display: block;
background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
<span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity & Partial Service</label></span>
</span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
</span>
</div>
I Have the following code below , the problem i am having is that I noticed no matter what I do , I can't seem to have the right side of the extra real-state reduced as the right side seems to be having lots of extra spaces in step1 and step2.
I was trying to have it balanced for desktop, tablet and mobile.
Can some one show me how to fix this.
Here is my FIDDLE
My code below
HTML
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>1</span></h2>
</div>
<div class="col-xs-8 col-sm10 col-md-9">
<h4 class="claim-hdr" style="color:#fff">CURRENT </h4>
<div class="row">
<div class="col-xs-9 col-sm-4 col-md-4 ">
<label class="control-label required" for="name">SOME SOME Number <i class="fa fa-asterisk" aria-hidden="true"></i></label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-9 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-9 col-sm-4 col-md-4">
<label class="control-label " for="name"> Some/test s Lotus Number</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-8 col-sm-2 col-md-1">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
CSS
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
#media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
#media only screen and ( min-width:750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
A few things:
you have a typo .col-sm10, should be, .col-sm-10
in one of your rows you have a total of a 10 cols. when the maximum in bootstrap is 12, so instead of
.col-sm-4 + .col-sm-2 + .col-sm-4 ( total = 10)
you can have:
.col-sm-5 + .col-sm-2 + .col-sm-5 ( total = 12)
Same thing applies to md classes
About xs class when you have .col-xs-9 you should have .col-xs-12
Snippet
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
#media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
#media only screen and (min-width: 750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps"> <span class="steppos">STEP</span> <span class="circle pull-right">1</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 style="color:#fff" class="claim-hdr">CURRENT </h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label required">SOME SOME Number <i aria-hidden="true" class="fa fa-asterisk"></i>
</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label ">Some/test s Lotus Number</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
</div>
</div>
</div>
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
</div>
Change the col-md-4 to col-md-6.
<div class="col-xs-9 col-sm-4 col-md-6 ">
Also you have a few instances of colsm without the hyphen in between.
http://codepen.io/ruchiccio/pen/KzbBvB
I need to make that switching effect working on any single checkbox I click. For example, I'll check the second (styled) checkbox, it will automatically switch and all others will stay unaffected. Thx very much for help.
https://jsfiddle.net/99asehku/
HTML:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div><br><br>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div><br><br>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox1" id="myonoffswitch1" checked>
<label class="onoffswitch-label1" for="myonoffswitch1">
<span class="onoffswitch-inner1"></span>
<span class="onoffswitch-switch1"></span>
</label>
</div>
CSS:
.onoffswitch {
position: relative; width: 58px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 10px; padding: 0; line-height: 10px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ANO";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "NE";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 10px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 44px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
First of all id must be unique. Don't use same id for different element.
And make for for all different.
.onoffswitch {
position: relative; width: 58px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 10px; padding: 0; line-height: 10px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ANO";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "NE";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 10px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 44px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div><br><br>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch1" checked>
<label class="onoffswitch-label" for="myonoffswitch1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div><br><br>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
<label class="onoffswitch-label" for="myonoffswitch2">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
You should differentiate their id and ids should be same as label 'for' attribute:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div><br><br>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch1" checked>
<label class="onoffswitch-label" for="myonoffswitch1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div><br><br>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox1" id="myonoffswitch2" checked>
<label class="onoffswitch-label1" for="myonoffswitch2">
<span class="onoffswitch-inner1"></span>
<span class="onoffswitch-switch1"></span>
</label>
</div>
Sharing updated fiddle please check:
https://jsfiddle.net/anujAdmin/9w413j0k/
You have to give to each checkbox switch a name and id unique.
Look at this: jsfiddle; the last one has its own id and name, while the second has the same id and name of the first. (Of course the css code must be repeated or rules modified to apply for each new id)
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>