I am creating a set of radio buttons that will later be used to capture the values in order to create a subscription/ modal checkout. Currently I have the radio options displaying. Im trying to get it to when a user clicks on the arrow image the radio buttons drop down and appear. I have written some code seeming that it will work. Any tips are greatly appreciated.
<main class="subscription__container">
<section id="preferences" class="subscription__container--preferences">
<div class="question__container">
<h3 class="question__container--title">
How do you drink your coffee?
</h3>
<img
class="question__container--img"
src="../assets/plan/desktop/icon-arrow.svg"
alt="arrow"
/>
</div>
<div class="options__container">
<div class="options__container--option">
<input
id="capsule"
type="radio"
data-preference="Capsule"
value="Capsule"
name="preferences"
checked
/>
<label for="capsule"></label>
<h4 class="options__container--title">Capsule</h4>
<p class="options__container--description">
Compatible with Nespresso systems and similar brewers.
</p>
</div>
<div class="options__container--option">
<input
id="filter"
type="radio"
data-preference="Filter"
value="Filter"
name="preferences"
/>
<label for="filter"></label>
<h4 class="options__container--title">Filter</h4>
<p class="options__container--description">
For pour over or drip methods like Aeropress, Chemex, and V60.
</p>
</div>
<div class="options__container--option">
<input
id="espresso"
type="radio"
data-preference="Espresso"
value="Espresso"
name="preferences"
/>
<label for="espresso"></label>
<h4 class="options__container--title">Espresso</h4>
<p class="options__container--description">
Dense and finely ground beans for an intense, flavorful
experience.
</p>
</div>
</div>
</section>
<section id="bean" class="subscription__container--beans">
<div class="question__container">
<h3 class="question__container--title">What type of coffee?</h3>
<img
class="question__container--img"
src="../assets/plan/desktop/icon-arrow.svg"
alt="arrow"
/>
</div>
<div class="options__container">
<div class="options__container--option">
<input
id="single"
type="radio"
data-bean="Single"
value="Single"
name="beanType"
checked
/>
<label for="single"></label>
<h4 class="options__container--title">Single Origin</h4>
<p class="options__container--description">
Distinct, high quality coffee from a specific family-owned farm.
</p>
</div>
<div class="options__container--option">
<input
id="decaf"
type="radio"
data-bean="Decaf"
value="Decaf"
name="beanType"
/>
<label for="filter"></label>
<h4 class="options__container--title">Decaf</h4>
<p class="options__container--description">
Just like regular coffee, except the caffeine has been removed.
</p>
</div>
<div class="options__container--option">
<input
id="blended"
type="radio"
data-preference="Blended"
value="Blended"
name="beanType"
/>
<label for="blended"></label>
<h4 class="options__container--title">Blended</h4>
<p class="options__container--description">
Combination of two or three dark roasted beans of organic coffees.
</p>
</div>
</div>
</section>
</main>
.options__container--option {
display: none;
}
.options__container--option.active {
display: block;
}
arrowButton.forEach((el) =>
el.addEventListener("click", (event) => {
const subMenu = event.target.parentElement.querySelector(
".options__container--option"
);
subMenu.classList.toggle("active");
})
);
you can do that...
#my-form h4 {
margin : 0;
}
#my-form p {
margin : 0;
font-size : .8em;
margin-bottom : .3em;
}
#my-form summary {
font-size : 1.4em;
font-weight : bold;
margin : .4em;
}
#my-form input[type="radio"] {
display : none;
}
#my-form h4:after {
content : '\00A0';
display : inline-block;
border : 1px solid lightblue;
font-size : 1em;
width : .6em;
height : .6em;
overflow : visible;
margin : .3em .3em 0 .5em;
line-height : .6em;
border-radius : 2px;
}
#my-form input[type="radio"]:checked + h4:after {
content : '✓';
color : green;
}
<form id="my-form">
<details>
<summary> How do you drink your coffee?</summary>
<label>
<input name="preferences" type="radio" value="Capsule" >
<h4>Capsule</h4>
<p>Compatible with Nespresso systems and similar brewers. </p>
</label>
<label>
<input name="preferences" type="radio" value="Filter" >
<h4>Filter</h4>
<p>For pour over or drip methods like Aeropress, Chemex, and V60. </p>
</label>
<label>
<input name="preferences" type="radio" value="Espresso" >
<h4>Espresso</h4>
<p>Dense and finely ground beans for an intense, flavorful experience. </p>
</label>
</details>
<details>
<summary>What type of coffee?</summary>
<label>
<input name="beanType" type="radio" value="Single Origin" >
<h4>Single Origin</h4>
<p>Distinct, high quality coffee from a specific family-owned farm</p>
</label>
<label>
<input name="beanType" type="radio" value="Decaf" >
<h4>Decaf</h4>
<p>Just like regular coffee, except the caffeine has been removed.</p>
</label>
<label>
<input name="beanType" type="radio" value="Blended">
<h4>Blended</h4>
<p>Combination of two or three dark roasted beans of organic coffees.</p>
</label>
</details>
</form>
Related
I was able to make a single materialize switch and it looks great, but now I want a second switch - with a different color setup than my first one. This is the code I want to run, but my switches just disappear when I try to change the class name!! Any help would be greatly appreciated!!!
HTML:
<div class="switch-1" align="center">
<label>
1 OFF
<input id="Switch1" type="checkbox">
<span class="lever"></span>
1 ON
</label>
</div>
<div class="switch-2" align="center">
<label>
2 OFF
<input id="Switch2" type="checkbox">
<span class="lever"></span>
2 ON
</label>
</div>
CSS:
.switch-1 label .lever {
background-color: #79ff4d;
}
.switch-1 label input[type=checkbox]:checked+.lever {
background-color: #ff6666;
}
.switch-1 label input[type=checkbox]:checked+.lever:after {
background-color: #ff3300;
}
.switch-2 label .lever {
background-color: #79ff4d;
}
.switch-2 label input[type=checkbox]:checked+.lever {
background-color: #a6a6a6;
}
.switch-2 label input[type=checkbox]:checked+.lever:after {
background-color: #737373;
}
Try this:
<div class="switch red" align="center">
<label>
1 OFF
<input id="Switch1" type="checkbox">
<span class="lever"></span>
1 ON
</label>
</div>
<div class="switch grey" align="center">
<label>
2 OFF
<input id="Switch2" type="checkbox">
<span class="lever"></span>
2 ON
</label>
</div>
with this CSS:
.switch.red label .lever {
background-color: #79ff4d;
}
.switch.red label input[type=checkbox]:checked+.lever {
background-color: #ff6666;
}
.switch.red label input[type=checkbox]:checked+.lever:after {
background-color: #ff3300;
}
.switch.grey label .lever {
background-color: #79ff4d;
}
.switch.grey label input[type=checkbox]:checked+.lever {
background-color: #a6a6a6;
}
.switch.grey label input[type=checkbox]:checked+.lever:after {
background-color: #737373;
}
switch is the class that materialize uses to set the aspect of the element, use another class and leave the switch class too.
<div class="switch switch-1" align="center">
<label>
1 OFF
<input id="Switch1" type="checkbox">
<span class="lever"></span>
1 ON
</label>
</div>
<div class="switch switch-2" align="center">
<label>
2 OFF
<input id="Switch2" type="checkbox">
<span class="lever"></span>
2 ON
</label>
</div>
I have a radio button with .html added to it. But the result it's a overlap text with the radio button.
Overlapping Radio buttons with text.
Also as you can see the text goes downward instead of covering all of the bootstrap col-4 , col-4, col-4.
function addQAs() {
randQuestion = Math.floor(Math.random() * library.length); //this is a nuber, dont forget!
console.log(randQuestion);
$("#question").html(library[randQuestion].question);
$("#answer1").html(library[randQuestion].answer[0]);
$("#answer2").html(library[randQuestion].answer[1]);
$("#answer3").html(library[randQuestion].answer[2]);
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-4">
<input type="radio" id="answer1" value="answer1" index="0">
<label for="answer1"></label>
</div>
<div class="col-4">
<input type="radio" id="answer2" value="answer2" index="1">
<label for="answer2"></label>
</div>
<div class="col-4">
<input type="radio" id="answer3" value="answer3" index="2">
<label for="answer3"></label>
</div>
</div>
</form>
</div>
I havent tried any CSS for this issue.
Thanks
try to add this css
.col-4 {
position: relative;
}
input[type="radio"] {
position: absolute;
left: -15px; // set as per your requirement
top: 5px; // set as per your requirement
}
When I have my email field on a form defined this way:
<div style="padding-top: 1em">
<div class="fieldLabel">
<legend>Email Address</legend>
</div>
<input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" />
</div>
Buttons further down the page stop getting click events when the users touches or fills out the email field. If I remove the type="email" from my <input /> tag the buttons continue to work but leaving the type="email" in there breaks my buttons.
Here is the code for my button:
<input type="button" value=" + " (click)="onPlusElectedPosition()">
This is all code from an existing Angular app that I am taking over. And I am new to Angular so I have no doubt that I am missing something simple.
Amy asked for code for my button, so here it is:
onPlusElectedPosition() {
var newPosition:AlumniRole = new AlumniRole();
if(isNullOrUndefined(this.surveyFormData.electedPositions)) {
this.surveyFormData.electedPositions = new Array(0);
}
this.surveyFormData.electedPositions.push(newPosition);
}
So the form I am working on is rather long which is why I did not post the whole thing initially. Keep reading for my full source code:
<div class="wrap">
<h1>
Community Outreach
</h1>
<p>
<span class="carolinaBlue">Purpose:</span> To quantify the UNC School of Law's <span class="carolinaBlue">
Legacy
of Leadership
</span> via Carolina Law alumni's stories of service, volunteerism, and leadership across the state
and nation. Information gathered will be utilized in a variety of Carolina Law communnications/marketing pieces (for instance,
an online presence with interactive maps) designed to illustrate Carolina Law alumni's leadership in the communities
where they live and work.
</p>
<form #ofd="ngForm">
<h2>Personal Information</h2>
<fieldset>
<div style="display: inline-block;">
<div style="display: inline-block; padding-right: 1em;">
<legend>First Name</legend><input [(ngModel)]="surveyFormData.firstName" name="firstName" type="text" style="width: 20em;" />
</div>
<div style="display: inline-block; padding-right: 1em;"><legend>Middle Name</legend><input [(ngModel)]="surveyFormData.middleInitial" name="middleInitial" type="text" style="display: inline-block; width: 20em; " /></div>
<div style="display: inline-block; padding-right: 1em;"><legend>Last Name</legend><input [(ngModel)]="surveyFormData.lastName" name="lastName" type="text" style=" display: inline-block; width: 20em;" /></div>
</div>
<div style="padding-top: 1em" >
<div class="fieldLabel">
<legend>UNC Law Class Year</legend>
</div>
<input type="number" [(ngModel)]="surveyFormData.classYear" name="GraduationYear" min="1960" max="2019" style="width: 6em;" placeholder="YYYY" />
</div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Home Address</legend></div><input [(ngModel)]="surveyFormData.streetAddress" name="streetAddress" type="text" style="width:30em;" /> </div>
<div style="display: inline-block; padding-top: 1em">
<div style="display: inline-block; padding-left: 12em; padding-right: 1em;">
<legend>City</legend><input [(ngModel)]="surveyFormData.city" name="City" style="width: 14em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>State</legend><input [(ngModel)]="surveyFormData.state" name="State" style="width: 10em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>ZIP Code</legend><input [(ngModel)]="surveyFormData.postalCode" name="postalCode" style="width: 7em;" />
</div>
</div>
<!-- leaving this next line as is causes my problems, removing the type="email" "fixes" my problem but removes the validation rules -->
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Email Address</legend></div><input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Employer Name, Title</legend></div><input [(ngModel)]="surveyFormData.employerName" name="employerName" type="text" style="width: 24em;" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Practice Area(s)</legend></div><input [(ngModel)]="surveyFormData.practiceArea" name="practiceArea" type="text" style="width: 24em;" /></div>
<!-- </div> -->
</fieldset>
<h2>Volunteer Leadership Roles</h2>
<p>Please share your commitment to community leadership by noting all organizations you have voluntarily served below.</p>
<div *ngFor="let eachRole of surveyFormData.leadershipRoles; let i=index">
<leadership-role [idx]="i" [role]="eachRole" (deletePosition)="deleteLeadershipRole($event)" #role></leadership-role>
</div>
<input type="button" value=" + " (click)="onPlusLeadershipRole()">
<!-- <h2>Elected Office</h2>
<p>Please share your commitment to public service by noting all elected positions you have held below.</p> -->
<h2>Public Service Roles</h2>
<p>Please share all elected and/or nonelected public service positions you have held, including military service, below.</p>
<div *ngFor="let eachPosition of surveyFormData.electedPositions; let i=index">
<elected-position [idx]="i" [role]="eachPosition" (deletePosition)="deleteElectedPosition($event)" #role></elected-position>
</div>
<input type="button" value=" + " (click)="onPlusElectedPosition()">
<h2>Pro Bono Legal Services</h2>
<p>Please share your commitment to Pro Bono service by noting the hours you commit, and the clients you serve annually.</p>
<fieldset>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="0-25">1-25 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="26-50">26-50 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="51-100">51-100 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="gt100">>100 hrs
<p class="extraSpace">Please provide a description of the type(s) of pro bono service you engaged in</p>
<textarea [(ngModel)]="surveyFormData.proBonoDescription" name="proBonoDescription" rows="8" cols="60"></textarea>
</fieldset>
<h2>Talking to Students About Community Leadership and Public Service</h2>
<fieldset>
<p>
<input [(ngModel)]="surveyFormData.checkedTalkToStudents" type="checkbox" name="mentoring">
Please check this box if you are willing to speak to Carolina Law 3L students about how to get
involved in public service and what it means to be a leader in your community.
</p>
</fieldset>
<!-- removed per Matt Marvin and Adam Stiffler on 9/14/2017
<h2>Other Information and/or Feedback</h2>
<p>Please share any other information and/or provide feedback you wish to share with the Carolina Law Advancement Office</p>
<textarea [(ngModel)]="surveyFormData.feedback" name="feedback" rows="8" cols="60"></textarea>
-->
<div><button class="extraSpace" type="button" value="Send" (click)="onProcessForm()">Send</button></div>
</form>
</div>
I have been facing this issue. I tried many things but no one worked. My validation error on this page always visible on left side. This is my vaildation engine jquery. Please help.
$("#register_form").validationEngine({
showOneMessage: true,
scroll : false,
maxErrorsPerField: 1,
promptPosition: "bottomLeft",
updatePromptsPosition: true,
autoPositionUpdate: true,
});
});
HTML
This is my form.
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="register_form">
<div class="col-100">
<input type="text" class=" twidh validate[required, minSize[2]] " maxlength="60" placeholder="Your Name" name="name" id="rname" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[email]]" maxlength="100" placeholder="Your Email Address" name="remail" id="remail" onblur="validateEmail()" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="password" class=" twidh validate[required, minSize[6]]" placeholder="Your Password" name="password" id="rpassword" />
<span class="errroes" id="rpwd"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[onlyNumber] ,minSize[10],maxSize[10]]" maxlength="10" maxlength="10" placeholder="Enter Mobile Number" name="mobile" id="phone" />
</div>
<div class="col-100">
<div class="text-hea" id="gender">Gender</div>
<div class="twidh">
<div class="names">
<input type="radio" class="radioo" value="M" id="male" name="sex" /> Male </div>
<div class="names">
<input type="radio" class="radioo" value="F" id="female" name="sex" checked="checked" /> Female
</div>
</div>
</div>
</div>
<div class="link" style="text-align:left !important"> By clicking Register, you agree to <strong>Terms of Use</strong> and <strong>Privacy Policy.</strong>
</div>
<div class="col-100">
<div class="col-md-2">
<input type="submit" class="ss1 st" name="register" value="Register Now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
I found your HTML on your website. The problem is caused by a style position: relative on your .link class. You have applied it on your OR block, just above the form.
You can fix this quite easily by apply another position: relative style on your form element. So it would become like this:
<form action="/sregister.php" method="post" id="register_form" style="
position: relative;
">
I just tested this on your live website, and it works pretty well.
Checked issue on your site. You are using below inline styling.
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px;
but in this case "left" is not recognized as already this property is given important in strap.css.
check below code in strap.css
.formError {
left: 30px !important;
}
Now you can update your inline styling as
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px !important;
It will work.
I want to make a button-like filter in my web. Right now, I just put the radio-button filter inside the box, but I want to remove the radio button and just make the filter work when I just click the box.
The code looks like this right now:
<div class="question-header" data-bind="visible: jobQuestions().length > 0">
<div class="col-sm-3" id="filter-1">
<div class="panel-body">
<input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" />
New Questions
(<span data-bind="text: newJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-2">
<div class="panel-body"">
<input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" />
Ignored Questions
(<span data-bind="text: ignoredJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-3">
<div class="panel-body">
<input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" />
Answered Questions
(<span data-bind="text: answeredJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-4">
<div class="panel-body">
<input type="radio" value="all" data-bind="checked: jobQuestionsFilter" />
All Questions
(<span data-bind="text: allJobQuestionsCount"></span>)
</div>
</div>
</div>
What do i have to fix?
EDIT:
When I try to hover it, the bg-color of the entire box changes, but when I just click it only the part of it changes. I am assuming this is because the label size is not full. How can I fix this issue?
You can fix this by adding an id to each of the radio buttons and then wrapping the .panel-body in a label like this:
<label for="radio1">
<div class="panel-body">
<input type="radio" value="new" id="radio1" data-bind="checked: jobQuestionsFilter" class="" />
New Questions
(<span data-bind="text: newJobQuestionsCount"></span>)
</div>
</label>
Then in your css apply display: none to all the radio buttons you want to hide.
EDIT
I have created a codepen that will give you the desired results. The only thing you will need to do is arrange the buttons horizontally like the image you provided. I hope this gets you on the right track.
Play around with that for a while to familiarize yourself with how it works.
Give the input an id, use a label with the for attribute to connect the label to the input, hide the input, and use the :checked pseudo class and adjacent sibling selector to style the label when an input is selected by clicking on the label.
And since you want to only be able to select one input at a time, you need to give the elements a name attribute so they're all tied to providing a value for that name
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background: #09c;
}
label {
height: 100%; width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="question-header" data-bind="visible: jobQuestions().length > 0">
<div class="col-sm-3" id="filter-1">
<div class="panel-body">
<input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" id="new" name="someName" /> <label for="new">New Questions (
<span data-bind="text: newJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-2">
<div class="panel-body">
<input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" id="ignored" name="someName"/><label for="ignored"> Ignored Questions (
<span data-bind="text: ignoredJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-3">
<div class="panel-body">
<input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" id="answered" name="someName"/><label for="answered"> Answered Questions (
<span data-bind="text: answeredJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-4">
<div class="panel-body">
<input type="radio" value="all" name="someName" data-bind="checked: jobQuestionsFilter" id="all"/> <label for="all">All Questions (
<span data-bind="text: allJobQuestionsCount"></span>)</label>
</div>
</div>
</div>