Hi I have been using Angular ui bootstrap time picker and its working fine. But, the up and down arrow - chevron icons are missing. Its seen as shown in the screenshot. I inspeacted element and changed "icon-chevron-down" to "glyphicon glyphicon-chevron-down" and its working fine.
But, as I am using bower and dynamic html ("bootstrap-timepicker": "~0.3.0", and "bootstrap-ui-datetime-picker": "~1.2.1"), I am not sure how can I edit this and update glyphicon class?
I am sure, I need to create a custom template to override the following in my html:
From bootstrap-timepicker.js:
templateContent = '<table>'+
'<tr>'+
'<td><i class="icon-chevron-up"></i></td>'+
...
But, I am not sure what id I should be using to create my template?
Related
In Angular 2, I am using PrimeNG calendar using model driven form with *ngSwitchCase as follows
<div [ngSwitch]="field.controlType">
...
<p-calendar *ngSwitchCase="'date'" [formControlName]="field.key" [id]="field.key" [showIcon]="true" dataType="string"></p-calendar>
...
</div>
The calendar comes up well on the UI, but when I select the date, or click outside on the page, it does not go away.
Only when I click on tab to go away, the calendar is closed.
If I use ngModule, it works fine, but that is not the requirement.
Does anyone have any clue/example on it, please share
Thanks
Found the error that I was using <div class="section"> somewhere before the primeng calendar.
Renaming the css section class to appsection solved this issue.
I'm trying to use the md-date-locale directive to overwrite angular material options for one date-picker input (as specified in https://material.angularjs.org/latest/api/directive/mdDatepicker) but it's not working.
Here is an example using the angular material example to test
md-date-locale="{ firstDayOfWeek: 2 }"
http://codepen.io/Hyperalpha/pen/gmwMdm
If it's not possible, I need to update datepicker options after loading (not in module.config() ).
Thanks
You need to set firstDayOfWeek in config function then its working fine
myAppModule.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.firstDayOfWeek = 2;
});
Working codepen
I use the Bootstrap Select Plugin to create an extended select with input field and multiple selectable options. I use it in an Angular 1.5.3 application set up with ui-router. It does not work in the view where I need it. The code I include in that view:
<select name="jobdomainTeamId"
class="form-control selectpicker"
data-live-search="true"
multiple=""
style="display: none;"
ng-model="data.detailView.jobDomain.teams"
ng-options="team.id as team.displayName for team in data.detailView.teams"
>
<option value="">No selection</option>
</select>
The attributes 'selectpicker' and 'data-live-search' should trigger Bootstrap to dynamically create a node that provides the extra functionality. But nothing happens when I add this to the Angular view - the select is not visible (style="display: none;").
But when I add the exact same code to index.html, commenting out the ng-view
<!--<div ui-view="body"></div>-->
Here the select works - extra DOM nodes are generated and functionality is as expected.
I included all necessary stuff - Boostrap.css, bootstrap-select.css,jquery-2.1.1.,bootstrap.js and bootstrap.select.js
It occurred to me there might be a conflict between angular dependencies and Bootstrap - I include
angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm'])
Does anyone have a clue what might block Bootstrap css / js here??
Turns out that mixing JQuery + Bootstrap.js with Angular.js is asking for trouble.
Bootstrap (via JQuery) works by 'grabbing an element and modifying it'. Angular also modifies the DOM element - is an Angular directive (as well as an browser-native DOM element). What I tried to achieve is impossible this way and i ended up using an Angular library (ui-select) that does what I want.
you defined style='display:none' in your select so it's working as expected. if you want to hide it use the directive ng-hide instead, in some case you should use angular UI for specific actions
I was struggling with the same issue. This methods helped me. Hope it help someone else also
Install jquery on your angular project.
npm i --save-dev #types/jquery
import jquery to the component.
declare var $: any;
run the below code on ngOnInit
ngOnInit(): void {
$('.selectpicker').selectpicker('refresh');
}
Sometimes my user reports that accordion in my application is not working . So i want test whether the accordion is working or not working. I am using Angular js in frontend. Currently i am testing using protractor e2e framework.
My accordion markup looks like
before clicking the accordion division
<div id="accordion"></div>
after click
<div id="accordion-expand">
so the change is id
I find difficult while identifying css change in protractor. is there any other way to test this?
Try this:
// Given
var accordion = element(by.id('accordion'));
expect(accordion.isPresent()).toBeTruthy();
// When
accordion.click();
// Then
expect(accordion.isPresent()).toBeFalsy();
expect(element(by.id('accordion-expand')).isPresent()).toBeTruthy();
Hope this helps.
Anyone managed to integrated supersize with angular js?
I tried creating a directive and placing the following code inside a directive
$.supersized({
//params :
supersize did work in creating the
<ul id=supersized" .... >
However my screen isn't displaying supersize's full screen slideshow. Any idea why?