I'm using slider provided by Angular-Material. I want to show a different control on selection of particular value in slider. How do I check if that value is selected in slider?
E.g. If slider has three values VEG, NON-VEG and ALL and If user slides towards NON-VEG, then I want to show one more checkbox so how do I get NON-VEG is selected? so that I can show next control.
My slider code looks like -
<div flex="60">
<md-slider md-discrete ng-model="rating3" step="1" min="1" max="3" aria-label="rating" id="foodtype">
</div>
Any solution will be really helpful, thank you.
Related
I'm using Angular-UI's latest Datepicker control, inline, and I can't figure out how to make it bigger so it takes up the entire page (or its container).
Has anyone attempted/achieved this desired result?
Datepicker control: https://github.com/angular-ui/bootstrap/tree/master/src/datepicker from http://angular-ui.github.io/bootstrap/
I tried:
manually setting width on control,
played with different parent containers
was hopeful but no luck on this: How do you change the size of a size of an angular ui bootstrap date picker popup?
even though its Jquery related, tried How to resize the jQuery DatePicker control
changing container/element font-size appears to make no difference
Code:
<div style="display:inline-block; min-height:290px!important; min-width:800px!important;">
<div uib-datepicker ng-model="dt" class="col-12" datepicker-options="options"></div>
</div>
Any information is appreciated.
My team uses AngularStrap to integrate Bootstrap modals (e.g. popover, tooltip, etc.) into our Angular 1.5 app. Unfortunately, I have found it extremely difficult to reliably set focus on elements inside of these modals because of the funky way in which AngularStrap shows them. This logic lives here:
https://github.com/mgcrea/angular-strap/blob/b13098d9d658da9408930b25f79182df920718d2/src/tooltip/tooltip.js
Essentially, all AngularStrap modals start off in the hidden state:
// Set the initial positioning. Make the tooltip invisible
// so IE doesn't try to focus on it off screen.
tipElement.css({top: '-9999px', left: '-9999px', right: 'auto', display: 'block', visibility: 'hidden'});
They are then made visible in response to some internal Angular requestAnimationFrame service callback:
$$rAF(function () {
// Once the tooltip is placed and the animation starts, make the tooltip visible
if (tipElement) tipElement.css({visibility: 'visible'});
...
});
Unfortunately, this means that at the time all of the tooltip's DOM elements are constructed the tooltip is typically not yet visible and any attempts to call focus() on these elements fail. Do note that in my experience this happens intermittently (~20% of the time for me).
I tried disabling animations on the tooltip but it doesn't seem to be smart enough to skip this whole hidden/visible dance in that case. I could obviously try something super hacky (e.g. use an arbitrary timeout before attempting to set focus) but I am looking for a more reliable option.
Why not use the onShow event? It is documented a little bit wrong, but you can attach a handler that focus elements to bs-on-show. Furthermore you could make the handler generic, looking for an element with a focus-me attribute and focus that :
<div bs-popover
data-content='this input should be focused: <input type="text" focus-me>'
data-placement="bottom"
bs-on-show="setFocus"
data-html="true">
click me to show popover
</div>
<div bs-tooltip
data-title='this input should be focused: <input type="text" focus-me style="color:#000;">'
data-placement="bottom"
data-trigger="click"
bs-on-show="setFocus"
data-html="true">
click me to show tooltip
</div>
generic handler
$scope.setFocus = function(e) {
e.$element.find('[focus-me]').focus()
}
http://plnkr.co/edit/3wTinmNb5zsKnfUZQ9tT?p=preview
I am attempting to do some styling with the checkboxes in UI-Grid and it doesn't seem to be working properly. Notice the checkbox is still appearing underneath my styling overlay, and clicking on the 3rd checkbox seems to activate the overlay checkbox style.
Is there any way to replace the checkbox appearing in the column with my overlay and use that instead? Or does anyone have an idea to get this working properly?
http://plnkr.co/edit/fMMq71849pxE0NLcfuVJ
cellTemplate: '<div class="ui-grid-cell-contents">' +
' <input type="checkbox" class= "Check" id="Check" name="select_item" value = "true" ng-model="row.entity.ValidateProvider"/>' +
' <label for="roundedOne" />' +
' </div>'
I want to get them looking like the 4th from the top on this site:
http://cssdeck.com/labs/css-checkbox-styles
There is no easy way to do that.
In UI Grid, we usually uses blur event of HTML input control to end cell edit, which should be the best user experience. However currently there is no suitable CSS support to style custom checkbox, and to properly dispatch blur event at the same time. In the example mentioned, you can see the css rule to make `blur' impossible:
input[type=checkbox] { visibility: hidden; }
There is a non-standard css property appearance to use, which can work at this time, instead of visibility and others, but needs careful test on browsers. No support on any IE.
Also, editableCellTemplate should be used rather than cellTemplate for edit.
I'm using angular-xeditable, the Angular flavor of X-Editable. I'm trying to adjust the input width using Bootstrap's grid column classes.
A similar question, x-editable - adjusting the width of input field, offers solutions that change the width using custom styles/classes, but I want to incorporate Bootstrap's grid system.
Bootstrap
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control">
</div>
</div>
col-xs-4 exists on the parent div, and not the input itself.
X-editable
X-Editable renders a structure of form:
<a>hidden</a>
<form>
<div>
<input/>
</div>
</form>
and applies custom styling to the input.
Demo (JSFiddle)
I've created a fiddle to demonstrate the problem here: http://jsfiddle.net/NfPcH/10908/.
How can I incorporate Bootstrap's column grid widths with X-Editable?
There are several gotchas that I ran into, but I managed to find a solution.
First, we cannot use form-inline with Bootstrap's column grid system. To remove this, we must override the form template in X-Editable. We also need to add a configurable way to apply the bootstrap column class.
yourAppName.run(function(editableOptions, editableThemes) {
editableOptions.theme = 'bs3';
editableThemes.bs3.formTpl = '<form class="editable-wrap" role="form" ng-class="xformClass"></form>';
});
Because we removed form-inline, we cannot use X-Editable's built-in buttons. We can remove them by applying buttons="no" to the editable element.
Finally, we assign the form class in our controller (the caveat is that all inputs will have the same column count per scope):
$scope.xFormClass = "col-sm-12";
This gets us most of the way there, but there's some padding weirdness. This is because both the form and its parent have column classes. I hacked it out by adding the row class to the input's parent:
editableThemes.bs3.controlsTpl = '<div class="editable-controls form-group row" ng-class="{\'has-error\': $error}"></div>';
The updated fiddle is here: http://jsfiddle.net/NfPcH/10933/. Hope this helps!
I notice that the "day of week music station cards" add depth (height?) as soon as you hover over them. Is there a way to make cards behave this way using Angular Material Design? please answer with demo code.
md-whiteframe class can change the depth, ng-mouseenter and ng-mouseleave will execute on hover, and ng-class can be used to set the class.
<md-card ng-mouseenter="hover = 'md-whiteframe-z3'" ng-mouseleave="hover = ''" ng-class="hover">