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
Related
I am updating a project which has been made in Angular 4. The website consists of multiple forms which include input field. When the user presses 'enter' the form is being submitted. I want to prevent this from happening. How can I do that?
Is there something that I can place within the quotationmarks which disables the submit action from happening: (keydown.enter)=""
form.component.html
<div class="d-flex justify-content-center hm-row">
<form class="hm-form" [formGroup]="crossingForm">
<div class="form-group">
<label for="dynamicThresholdTime">{{ 'CROSSING.DYNAMIC_THRESHOLD_TIME' | translate}}</label>
<input type="text" class="form-control" id="dynamicThresholdTime" placeholder="" formControlName="dynamicThresholdTime">
</div>
<...more code...>
</form>
</div>
Use this :
<form (keydown.enter)="$event.preventDefault()"></form>
You also can remove the form tag and replace it with a div. Browsers make this behavior because of the form tag.
Buttons with type="submit" have default behavior. Choose type="button" for no default.
Also had this happen with a form and input field. event.preventDefault() in my client side script solved this.
I've started developing a small app using Ionic 1.
Here I've used ionic-datepicker external plugin as the date picker for my app.
I need to put the button inside of a label in the same row of an input field
<label class="item item-input">
<input type="text" ng-model="newEvent.date" placeholder="{{date}}">
<button class="button button-full button-positive" ng-click="openDatePicker()">
Date
</button>
</label>
I need to place the elements like this. But here, the function doesn't call. But when I place the same button outside the label tag it works.
Why is that? How can I make it happen?
The label element intercepts the click event and focus the related input. I suggest to you wrap label and button inside a div element.
I would like to display remember me checkbox and submit button inline using Bootstrap 3 inside my Login form.
<div class="row">
<div class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
They do not align vertically very well, especially on mobile size. I would like them to be vertically aligned so the checkbox is in the middle of Submit button.
Also Remember me label is not aligned nicely with checkbox, it seems like words Remember me are slightly higher than chekcbox.
How to solve this ?
What you could do is create another row class inside of the first one. Then inside of that create two classes of two, so col-x-6 twice. Inside one place the check box and inside the other place the button. Then use CSS to clean up and misalignment.
I don't know if this will solve the problem, but it may be worth a try!:)
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.
I'm trying to create an input-group of 3 controls. The following :
1. Filter dropdown of sort (Currently using <select>
2. The input text box
3. The Search button
I've managed to get the latter 2 working as expected, they both join up and appear as expected however when I try to add a select control although in-line it doesn't seem to have the same height as the other 2 controls. I've tried all sorts of combinations and have ran out of ideas to try.
On the bootstrap documentation they have not shown how to do this with a but with a dropdown control however when I tried to do that with I could not get it to work as the control does.
Could someone suggest how I could add the filter control? Here is an example of the data in my angular controller $scope.filterOptions = ["test", "test2", "test3"].
What I essentially what to achieve is something similar to that of the bootstrap documentation example :
Here's the non-working html I have at the moment.
<div class="panel-heading clearfix">
<form class="input-group col-md-4">
<div class="input-group-btn">
<select class="btn btn-default" ng-model="filterOption">
<span class="caret"></span>
<option ng-repeat="option in filterOptions" value="{{option}}">{{option}}</option>
</select>
</div>
<input type="text" ng-model="query" class="form-control" placeholder="Enter ID / Name">
<div class="input-group-btn">
<button ng-click="search()" type="submit" class="btn"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div>
Here's a plunkr I made which shows the same problem : http://plnkr.co/edit/uDFmFZSbIMBP4DqalhQC?p=preview
Height of the select compared to the button in the bootstrap example is less so giving a height to the select will make it same as other controls.
By default
CSS
select {height: 34px;}
Demo here