I am trying to build a form in boostrap angular-ui modal, and am having an issue with using the default bootstrap grid in the modal-body
I build a row and then immediately build a col-md-6 followed by another col-md-6 and it is overflowing and colums are not next to each other like I would expect. I'm at a loss on this one.
Here is the HTML I have for the modal
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
<span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span>
<form>
<div class="row">
<div class="col-md-6">
<input type="text" ng-model="Name" class="form-control" placeholder="Full Name"/>
</div>
<div class="col-md-6">
<input type="text" ng-model="Name" class="form-control" placeholder="Your Email" />
</div>
</div>
</form>
</div>
I know it's bad practice to link to your site, but I don't know any other way to demonstrate this behavior.
The "Sign Our Guestbook" link is how the modal that I am referencing is opened.
The extra space you are seeing which is causing the overflow onto the new line is caused by your <span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span> due to a conflict between the position styles. The size and padding of the icon is still being set in place even though it's moved.
Because your close icon:
<span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span>
Its styles include position: relative;, which occupies 26px width of the .row. So the right input box is squeezed to next line. Make it position:absolute and adjust the left and top value. It will work.
Related
I have an angular 2 component for displaying a bootstrap 3 button group. The component can either have a label or it can stand alone.
My solution was to use two ng-contents controlled by an *ngIf however, it refuses to display either of the ng-contents and does not throw an error.
Here's btn-multi.html:
<div class="form-group"
*ngIf="label">
<label class="control-label col-lg-2 col-md-3">
{{ label }}
</label>
<div class="col-lg-10 col-md-9">
<div class="btn-group">
<ng-content></ng-content>
</div>
</div>
</div>
<div class="btn-group"
*ngIf="!label">
<ng-content></ng-content>
</div>
And here is how it is used:
<btn-multi label="Some Label"
[(value)]="someValue">
<btn [value]="true">Yes</btn>
<btn [value]="false">No</btn>
</btn-multi>
And this is it working with just the one ng-content:
I'm currently on angular 2 beta-15.
Thanks!
NgIf is getting in the way of including the content since ng-content is being rendered after NgIf is evaluated.
You need to take another approach on it, maybe something like this:
<div [ngClass]="{'form-group': label}">
<label *ngIf="label" class="control-label col-lg-2 col-md-3">
{{ label }}
</label>
<div [ngClass]="{'col-lg-10 col-md-9': label}">
<div class="btn-group">
<ng-content></ng-content>
</div>
</div>
</div>
And there are also even better ways to do it, it all depends on how you want this component to be consumed.
FYI, just did this on the fly so its not tested, but just to give you a general idea.
I am using bootstrap accordion in angular js. The panels are opening If I click on the heading directly but I need to add plus/minus symbols for each heading. Please help me out in achieving the functionality like If I click plus icon, panel should be open and If I click on minus symbol, the panel should be closed. Thanks in advance.
Sorry, I Cannot able to add fiddle or plunker as the data is coming from my local database.
<uib-accordion close-others="oneAtATime" class="accordion-data">
<uib-accordion-group heading="title from database" ng-repeat="values are coming from database">
<div class="row">
<div class="col-md-12">
<div class="row row-head">
<div class="col-md-6 col-xs-6">
</div>
</div>
<div class="row item-head accordion-content" ng-repeat="values are coming from database">
<div class="col-md-4 col-xs-4"><input type="checkbox" ng-model="check" >data from database
</div>
<div class="col-md-8 col-xs-8 service-data">
<div class="row">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2">
<input type="number" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="number" name="times" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
</div>
</div>
</div>
</div>
</div>
</uib-accordion-group>
</uib-accordion>
I don't know the specifics about your implementation, but you could make use of the CSS :before pseudo-element like I have done in this simple fiddle.
If you have a way of selecting the accordion header by the open/closed state, then you can do something similar to this:
.accordion li.open:before {
content: '- ';
}
.accordion li.closed:before {
content: '+ ';
}
glyphicon glyphicon-plusIf you want to handle this in javascript, you could use the collapse event described here.
shown.bs.collapse will fire when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hidden.bs.collapse will fire when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#yourCollapseDiv').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-minus").addClass("glyphicon glyphicon-plus");
});
$('#yourCollapseDiv').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-plus").addClass("glyphicon glyphicon-minus");
});
It uses glyphicons to display the + and -
This is from the docs
This is my code and output
What should be added to show the toolbar with done button?
To be able to see the Done button, you will need to download Cordova keyboard plugin: http://ngcordova.com/docs/plugins/keyboard/
Then use this line:
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
Something like this:
module.controller('MyCtrl', function($scope, $cordovaKeyboard) {
$cordovaKeyboard.hideAccessoryBar(false)
});
This example will work only if you include ngCordova to your Ionic project.
More information can be found here: https://github.com/driftyco/ionic-plugin-keyboard
Keyboard.hideKeyboardAccessoryBar Hide the keyboard accessory bar with
the next, previous and done buttons.
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
Precisely the buttons you can see on a top image.
I think it may have to be a form...so our app shows the word done in the toolbar and this is what our code looks like. I don't know for sure but I am guessing the done button shows up when there is a form to be submitted. Give it a go and let me know.
<form ng-submit="authenticate(user)" name="loginform" id="loginform">
<div class="list has-header padding">
<div style="height: 48px;" class="item item-input">
<input type="text" placeholder="Username" ng-model="user.username">
<i class="icon ion-close-circled padding" ng-if="user.username.length" ng-click="resetUsername()"></i>
</div>
<div style="height: 48px;" class="item item-input">
<input type="password" placeholder="Password" ng-model="user.password">
<i class="icon ion-close-circled padding" ng-if="user.password.length" ng-click="resetPassword()"></i>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class=" login button button-full button-positive">Login</button>
</div>
</form>
In the form I am designing, I would like to show a < input="date"> field for anniversary-date if the user selects a radio button with value = "married".
For now, I have replaced the same with a div saying "Anniversary date input will appear here".
My problem is that, user.maritalStatus == 'married' is always set to false.
I know this because ng-show doesn't show the message. ng-hide shows this message.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group">
<div class="btn-group col-md-6 col-md-offset-4" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="single" data-ng-model="user.maritalStatus">Single
</label>
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="married" data-ng-model="user.maritalStatus">Married
</label>
</div>
</div>
<!-- following does NOT work -->
<div data-ng-show="user.maritalStatus == 'married'">Anniversary date input will appear here</div>
I followed these examples:
http://codepen.io/SusanneLundblad/pen/iBhoJ
OnClick radio button show hide div angular js - the one answered by michael (highest upvotes)
but I am not getting it to work.
Thanks!
EDIT:
Codepen link: http://codepen.io/vipulnj/pen/KperpO
You would need to wrap your content inside <div ng-app=""> </div> if you have not already
I'm new to using AngularJS and UI Bootstrap and I'm trying to add dropdowns dynamically using ng-repeat. The problem is that when any one dropdown is clicked it triggers all of them. I'm guessing I'm doing something really stupid with my code and I would appreciate it if someone could point me in the right direction on how to make this code work:
<div class="form-group" data-ng-repeat="item in ctrl.items">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="" name="itemDescription" data-ng-model="item.description">
</div>
<div class="col-sm-5">
<div class="input-group">
<input type="tel" class="form-control" placeholder="" name="value" data-ng-model="item.value">
<div class="input-group-btn" dropdown is-open="ctrl.isOpen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li></li>
</ul>
</div>
</div>
</div>
The problem is that with more than one dropdown, a click results in all dropdowns being triggered and its probably something really easy but I'm having a hard time with it.
Appreciate any help
/Regards Kris
The issue is is-open="ctrl.isOpen". You are binding the opening of all of them with ctrl. It should be bound to something distinct for each repeat, i.e. something like is-open="item.isOpen"