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.
Related
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.
In my Angular app I have a button where I apply a CSS style depending on the $index from the ng-repeat.
However whats happening is on page load the buttons style appears as the default (which is class button) for a second before applying the actual style I want (which is customColour{{$index}}).
<button type="button" ng-click="superAction($index)"
class="small button customColour{{$index}}">
</button>
I have confirmed that it must be down to the delay in getting the $index value having spent the last 4 hours playing around with the CSS files (ensuring things like my custom style appears at the top of my css file etc).
So any ideas/suggestions I can try would be appreciated.
I'm trying to use Angular Material color intention classes like md-primary on normal HTML elements as below:
<span class="md-primary">This text is in primary color.</span>
But this is not working. I assume that it is because during rendering, Angular applies color intention classes only to the ngMaterial directives.
Am I correct in this explanation? And if so, is there a workaround for this, apart from creating my own CSS classes?
The class color only will work on the Material elements, but there's a work around:
Just pick the color hex from the Google Material Site http://www.google.com/design/spec/style/color.html#color-color-palette
Sample:
<span style="color: #2196F3"> Material Blue Color</span>
There are CSS/LESS palettes around, if you don't want to pick all these colors. http://zavoloklom.github.io/material-design-color-palette/
I'm using the Angular.js 'ng-grid' data grid and am trying to make its behavior responsive. When I resize the screen I'd prefer the grid columns to become stackable automatically as opposed to keeping the grid a fixed width.
I've found a few links mentioning a defunct ngGridLayoutPlugin that all lead to a dead end on GitHub. I've also seen other grids like angular-deckgrid but I'm not interested at this point in changing grids.
Is there anyway to make ng-grid responsive?
I found a solution to this that worked nicely. The native Bootstrap table has a class that can be applied named table-responsive (see: http://getbootstrap.com/css/#tables-responsive). The application to a standard Bootstrap table is to wrap it in this class. The responsive nature is one if the screen gets smaller the table itself will get scroll bars but not the entire page.
You can wrap a ng-grid with this same class and achieve the identical behavior:
<div class="table-responsive">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</div>
If you test this with and without the <div> wrapper containing the table-responsive class you can see the difference between the scrollbars wither being just on the table/grid (responsive), or when not using it, the entire page scrolls (not responsive).
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