I have a form switcher using two radio buttons:
<form>
<div class="btn-group">
<div class="radio">
<label class="btn btn-info">
<input type="radio" name="formSwitcher" id="gNr" ng-model="vm.formSwitcher" value="gNr" /> Form for new G
</label>
</div>
<div class="radio">
<label class="btn btn-info">
<input type="radio" name="formSwitcher" id="pNr" ng-model="vm.formSwitcher" value="pNr" /> Form for new P
</label>
</div>
</div>
</form>
<div ng-show="vm.formSwitcher == 'gNr' ">
<form> ... </form>
</div>
<div ng-show="vm.formSwitcher == 'pNr' ">
<form> ... </form>
</div>
This is working as expected, I choose a radio button and the appropriate forms show/hide accordingly.
When I add data-toggle="buttons" to the 2nd line above, <div class="btn-group">, the ng-hide stops working BUT the change in visual state (appearing pressed or unpressed) works fine.
<div class="btn-group" data-toggle="buttons">
When I remove the data-toggle I don't get the variation in button color to show which of the radios is selected (the radio black dot still appears correctly).
Why would data-toggle="buttons" stop ng-show from working? The customer wants to see the button/radio change color on select.
The problem for me was jQuery.
When including bootstrap.min.js it wanted to include jQuery. You can remove bootstrap.min.js & jQuery in which just put an ng-class on the label to set the active state.
Reference Mart's fiddle from above for ng-class examples.
If removing jQuery is not an option for you:
The other option is in the comments above saying just to remove the data-toggle. From there you can throw a style="display:none" directly on your radio inputs or create a class in your style sheet.
You have extra <div class="radio">.
Remove them and it should work like in this fiddle.
Related
icheck-bootstrap is a pure css checkboxes and radio buttons for Twitter bootstrap. This implies it will work with any of the frontend libraries. At least that's the way I figured it... And indeed, his use from the readme of his github page for the library :Link to icheck-bootstrap demo with docs Does work it just has a side effect that I can live with.
In at lease one place where I'm trying to use this library, the component is in a modal dialog that is used to login to the site. Below is the html template code for the component:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true" (click)="hideModal()">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title-site text-center"> Login to Rove </h3>
</div>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group login-username">
<div>
<input name="log" id="login-user" class="form-control input" size="20"
[(ngModel)]="model.email" placeholder="Enter User Email" type="email">
</div>
</div>
<div class="form-group login-password">
<div>
<input name="Password" id="login-password" class="form-control input" size="20"
[(ngModel)]="model.password" placeholder="Password" type="password">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<span class="checkbox login-remember">
<input name="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</span>
</div>
</div>
<div>
<div>
<input name="submit" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<p class="text-center">
Not here before? <a data-toggle="modal" data-dismiss="modal"
href="#ModalSignup">Sign Up.</a> <br>
Lost your password?
</p>
</div>
The code above is without the icheck-bootstrap implemented code. Below I have changed the key lines of code that will implement the checkbox as per the readme documention on the github site
<div class="icheck-success checkbox login-remember">
<input id="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
this code works as per the readme, unfortunately, after the dialog has been closed the modality of the modal dialog stays and the main page behind it will not allow any input from keyboard or mouse.
Note the input tag in the effective lines, I have change from the name attribute, to the id attribute. That seems wrong to me but, it is as the documentation suggests and, the only way it will completely work. If I do not change the attribute from name to id the checkbox changes to the correct style but it will not check to show a true state. In fact if I remove the icheck-success class from the class attribute of the above div line the behavior is identical and the component will still not take input after the dialog box has been closed if I use the id attribute instead of the name attribute.
I'm using Angular V9 and the dialog component that I am using is from the Valor Software ngx-bootstrap library and, as stated, it works perfectly when I code the html input tag with the name attribute. Does any know of a workaround or possibly what is happening here? the styling is what I want on the site but not at the cost of not having the login dialog effectively lock the site up after you login.
Thanks for any info that you may have on this issue.
I have fix the problem I was having. The first part of the problem was that I was not asking the right question. I have edited the question to ask it in a better way, I think.
I have fixed the problem with the html below:
<div class="icheck-success checkbox login-remember">
<input id="rememberme" name="rememberme" [(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
it seems I had to have a name attribute in the input tag for some reason that I'm not clear about at all but, this is what I did to get the modal dialog to truly clear from the page after close.
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 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>
I am working in a UI where a button will be replaced by a panel with small form that can not be closed. The button will disappear after the user clicks on it.
The problem is not about how to do it in JavaScript, The problem is about how to improve the accessibility.
I am trying to solve this problem as a button collapse, hide the button except for screen readers and manage the tabindex of this element after click to be sure no one can access again.
I create a codepen to explain the solution with a simplification of my solution, but seen to hacky for me.
https://codepen.io/luarmr/pen/oWbZYK
HTML:
<div>
<button onclick="showContent(this, 'action-box');" aria-expanded="false" aria-controls="action-box">Do you want to perform an action?
</button>
<div id="action-box" role="region" aria-label="We will do something in this box" aria-hidden="true">
<form action="some action">
<label for="myinput" class="control-label sr-only">
Introduce a value
</label>
<input class="form-control" type="text" name="myinput" value="" placeholder="introduce a value">
<input type="submit" value="send action">
</form>
</div>
</div>
JS:
function showContent(node, id) {
$(node).attr('aria-expanded', 'true')
.attr('tabindex','-1');
$('#'+id).attr('aria-hidden', 'false');
}
Should just add aria-expanded and move the focus to the new panel? I feel this solution overcomplicated.
I'm trying to get a list of items from my database, where each listed item is paired with a selectable button for "delete" in the Bootstrap alert style. When the user submits using a "delete selected" button at the bottom of the page, all the entries that were selected will be removed from the database.
Now, Bootstrap's documentation only explains how to style check boxes as buttons in a btn-group div, which groups them all together in one line. I'm working with a list, so I don't want the checkbox buttons in a group: I need them per line, and clearly associated with the label of the entry they're deleting. But I can't seem to get the checkboxes to style as buttons without that btn-group div. It seems pretty arbitrary, and I'm wondering if there's an easy way to do this in bootstrap styling without resorting to hand-writing a bunch of javascript onclick events to use the regular bootstrap button type without checkboxes.
Here's what I have right now, where I just put every checkbox by itself in its own little btn-group, but it formats all weird and autoselects the buttons by default:
#foreach ($data['entries'] as $entry) <!-- blade template stuff -->
<div class="btn-group" data-toggle="buttons">
Label of the database entry
<label class="btn btn-danger active">
<input type="checkbox" autocomplete="off"> Delete
</label>
</div>
</br>
</br>
#endforeach
Is there a good way to do this in Bootstrap, or am I stuck writing it myself in js?
#foreach ($data['entries'] as $entry) <!-- blade template stuff -->
<div data-toggle="buttons">
Label of the database entry
<label class="btn btn-danger">
<input type="checkbox" autocomplete="off"> Delete
</label>
</div>
#endforeach
This should work, as simple as just removing the btn-group class