I would like to create three state button in Angular2 using css- yes/none/no without using jQuery. I found this link in some answer on stackoverflow. The point is, that I need to put a few buttons next to each other, and each of them should be independent- every chosen value should be send to component. I've tried to use label implicitly (remove inputs ids), but it doesn't work. Please see full code: fiddle.
<div class="wrapper">
<div class="toggle_radio">
<label for="first_toggle">First Button <input type="radio" class="first_toggle" name="toggle_option"></label>
<label for="second_toggle">Second Button<input type="radio" checked class="second_toggle" name="toggle_option"></label>
<label for="third_toggle">Third Button <input type="radio" class="third_toggle" name="toggle_option"></label>
<div class="toggle_option_slider">
</div>
</div>
</div>
Related
I have a div which has a couple of clr radio buttons wrapped in a .I want to generate the radioButtons based on a boolean value. Following is the code.
<div class="clr-col-4">
<clr-radio-container>
<label class="display-label">Radio Div</label>
<clr-radio-wrapper *ngFor="let col of cols">
<input type="radio" clrRadio />
<label class="display-label" {{col.headerName}}</label>
</clr-radio-wrapper>
</clr-radio-container>
</div>
I have a variable named enableButton. If the enableButton is true, I want to show the radio button, else I don't want to. Could you please help me how to do this?
You can use the ngIf directive. It is an essential thing to have in mind when creating Angular templates.
<div class="clr-col-4">
<clr-radio-container *ngIf="enableButton">
<label class="display-label">Radio Div</label>
<clr-radio-wrapper *ngFor="let col of cols">
<input type="radio" clrRadio />
<label class="display-label" {{col.headerName}}</label>
</clr-radio-wrapper>
</clr-radio-container>
</div>
I suggest you read the docs to familiarise more with the directive and its other conditional variations like then, else, etc.
Looking the w3Schools Bootstrap's Input Groups examples there are Input Groups Labels that seems that wrap the input box
(here).
Is there any way to do this for checkbox too?
EDIT
The labels have to be inside that grey box attached to the input box (textbox in example case, checkbox in the case i want)
They don't wrap the input field since the closing tag comes right after the opening tag, but you can use label on a checkbox as well as described here in the offical bootsrap docs for forms:
Is it something like this you had in mind?
<div class="container mt-3">
<h2>Checkbox Group Labels</h2>
<form>
<label class="form-check-label" for="exampleCheck1">Check me out</label>
<div class="input-group mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
</div>
</div>
</form>
</div>
I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line">
<div class="form-field">
<input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
<label class="form-field-label" for="input1">
Text 1
</label>
</div>
<!-- other groups go here -->
</div>
Here's the CodePen example
To do this you'd need something like
<input type='name' class='my-input'>
<label for="name">
<span class="label">First</span>
</label>
and then style that.
I can't figure out why the spacing between the radio input and link is different for the first element than for the other two.
Here is the HTML:
<div class="citationChoice">
<label for="mla">
<input type="radio" name="citation" value="mla" id="mla_button" checked="checked">
MLA
</label>
<label for="apa">
<input type="radio" name="citation" value="apa" id="apa_button">
APA
</label>
<label for="chicago">
<input type="radio" name="citation" value="chicago" id="chicago_button">
Chicago Manual of Style
</label>
</div>
jsFiddle
For some reason, without any css applied, the mla radio button is closer to the MLA link than the other radio buttons are to their adjacent links.
(I know the HTML is not completely correct. If at all possible, I have to leave the HTML as is.)
You had a space before <a and jsfiddle was interpreting that. The first MLA link did not have this space, that is why it sat closer to the radio button
BEFORE -
id="apa_button"> <a
AFTER FIX -
id="apa_button"><a
I have 4 radio buttons (A, B, C, D). When I click on the radio button A, there would be another 2 options - A1 and A2. The same will happen with the others. And if I choose D2, another 2 radio buttons would appear.
How can I do this in HTML?
HTML and CSS3-only version (Fiddle):
HTML for group "D" (other groups are similar)
<div>
<input type="radio" name="level0" value="D" id="D"/>
<label for="D">D</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="D0" id="D0"/>
<label for="D0">D0</label>
</div>
<div>
<input type="radio" name="level1" value="D1" id="D1"/>
<label for="D1">D1</label>
<div class="sub2">
<div>
<input type="radio" name="level2" value="D10" id="D10"/>
<label for="D10">D1-0</label>
</div>
<div>
<input type="radio" name="level2" value="D11" id="D11"/>
<label for="D11">D1-1</label>
</div>
</div>
</div>
</div>
</div>
CSS
.sub1, .sub2 { display: none; }
:checked ~ .sub1, :checked ~ .sub2 {
display: block;
margin-left: 40px;
}
If you want more radio buttons to appear when a certain one is selected, I would suggest not "nesting" them inside one another in the html. Have javascript display a hidden group or RBs when a one is selected.
Frankly, I think using radio buttons to make a select box appear would be much more user friendly, as its clear that you're selecting from a different group. Too many radio buttons always looks ugly.
Other problems with your code: id's should be unique, put the RB text beside the radio button as opposed to inside the tag, and avoid table based layout if possible. inline javascript and css should be avoided too, but as this is a code sample it actually makes it more readable. Oh, most importantly, you have the other buttons set to appear on onclick, so they won't go away if you unselect the RB :D
You can only use a specific id on one element in a document. You have to put different id's on each element and make them visible separately:
<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple
<input type="radio" id="extra1" style="visibility:hidden" other choice here />
<input type="radio" id="extra2" style="visibility:hidden" other choice here />
#guffa I think I'll just modify your answer a bit. Put all the optional radio buttons inside a <div> element like this:
<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" />
<div id="optional_buttons" style="display: none;" >
optional radio buttons
</div>