UI Grid Custom Checkbox styling - angularjs

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.

Related

Cannot resize inline Angular-UI Bootstrap Date-Picker

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.

How can I reliably set focus on elements inside of my AngularStrap tooltip?

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

AngularJS BootStrap UI-Select - How to change icon on the right

I'm trying to set an icon to a ui-select, however I've been failing. I've seen several examples online, where they have screenshots of arrows, or different icons. I'm curious how I can change this out.
Currently, I'm not having much luck, as I don't have any icon showing.
<ui-select multiple ng-model="myModel" theme="bootstrap" on-select="myOnSelect()">
I assume I'm missing a CSS reference, or something else.
Example I found that has ui-select with arrows: http://embed.plnkr.co/jBJkDb
Looking at https://github.com/angular-ui/ui-select/wiki/ui-select there is a section called "Examples: Disabling Instead of Removing Selected Items in Multiple Selection" which has a different icon with a different color.
Can someone identify how to change the icon on the right for the ui-select?

RadioGroup is generating input[type=button] instead of type=radio

When creating a xtype=radiogroup, the rendered element is using input type=button instead of input type=radio, I took the example from the doc, put it into a fiddle and the same happens. Tried this in Firefox and Chrome.
Why is not generating radio inputs, and how can I fix this ?
This is a correct behavior. ExtJs is using input type=button to render radiogroup. These inputs are styled with css to look like real radio buttons.
As #matt has mentioned the reason for using input type=button is that a radio box's color, border and background cannot be styled using CSS.
In your fiddle inputs look like plain buttons because jsfiddle didn't load ext-all.css properly. If you add ext-all.css manualy (like I did in this fiddle) you will see that all inputs appear as if they were radio buttons.

bootstrap-typeahead is not working in ng-grid

I'm working in a project, where I have to show a typeahead in a ng-grid cell. But, the typeahead is not working in a ng grid cell. I have put a Plunker.
See that the typeahead is working in the same page above the grid. But it's not working in the ng grid cell. Can you please help?
Thanks in advance.
Spent quite some time tracking all the problems in your plunker, there were quite a number of them:
you were missing ng-model directive on the input elements used in grid's cell, there were many errors in the console
typeahead window is appended as an element after an input element so it means that you need to have it wrapped in a parent DOM element, ex.: <div>
The 2 above changes made the typeahead work. Well - partially. The correct DOM structure is generated etc. but nothing gets displayed due to CSS conflicts. It seems like both typeahead popup and a cell in a grid are absolutely positioned. This is a bit surprising for a grid but OK. The real problem, though, is that the .ngCell class has the overflow: hidden; property and it makes the typeahead popup invisible.
If you remove the overflow: hidden; from the .ngCell it all starts to "work":
http://plnkr.co/edit/pzLb3079yuhDtW1XIxvq?p=preview
I guess we are facing conflicts of Bootstrap's CSS and ng-grid CSS. We can't change Bootstrap's CSS in this project so you will have to decide to either bring this issue to the attention of the ngGrid folks or hack one of the CSS definitions.
More info about how to make work ng-grid + typeahead inline editing:
http://lemoncode.net/2014/01/28/ng-grid-inline-editing-using-bootstrap-typeahead/
plunkr:
http://plnkr.co/edit/8udsvZSokG5v37xicyuz?p=info

Resources