Search Posts

Category: css

Overlay the custom tooltip

how to Overlay the custom tooltip I have a custom tooltip by using bootstrap but it doesnt/cant overlay to its parents div especialy .autocomplete even though im using z-index. Bdw the data created came from ng-tags-input. Im using the title attr but its font-size way too small thats why I created a custom tooltip. This is the HTML <div class=”autocomplete ng-scope” ng-if=”suggestionList.visible”> <ul class=”suggestion-list”> <!– end ngRepeat: item in suggestionList.items track by track(item) –> <li […]

how to add auto complete value to the list?

how to how to add auto complete value to the list? HTML: <div class=”maincontent”> <div ng-app=”autocompleteCustomTemplateDemo” ng-controller=”DemoCtrl as ctrl” class=”container container1″> <div class=”row”> <div class=”col-lg-12 col-sm-12″> <h4><strong> Service</strong></h4> </div> </div> <div class=”row”> <div class=”col-md-12″> <md-content layout-padding layout=”column”> <form ng-submit=”$event.preventDefault()”> <md-autocomplete ng-disabled=”ctrl.isDisabled” md-no-cache=”ctrl.noCache” md-selected-item=”ctrl.selectedItem” md-search-text- change=”ctrl.searchTextChange(ctrl.searchText)” md-search-text=”ctrl.searchText” md-selected-item-change=”ctrl.selectedItemChange(item)” md-items=”item in ctrl.querySearch(ctrl.searchText)” md-item-text=”item.product_name” md-min-length=”0″ placeholder=”Pick an Angular repository” md-menu-class=”autocomplete-custom-template”> <md-item-template> <span class=”item-title”> <span> {{item.product_gid}} </span> </span> <span class=”item-metadata” ng-model=”g1″ ng-click=”type(g1)”> <span> <strong>{{item.product_name}}</strong> </span> </span> </md-item-template> </md-autocomplete> <div […]

Perfectly positioned tooltips with position: fixed

how to Perfectly positioned tooltips with position: fixed I’m trying to create some very basic tooltips but I’m having trouble calculating the exact position these should go in with some JavaScript. The reason for wanting a fixed position is to make sure these work whenever there is overflow hidden and such. This is my code so far: var overflowTooltip = function (elem) { let legendRow = elem.currentTarget.getBoundingClientRect(); let tooltip = elem.currentTarget.children[2]; let topPosition; let leftPosition; […]

Dynamically change background based on AngularJS $scope array $index and Bootstrap carousel

I’m using Bootstrap carousel for some dynamically created slides that have different slide duration. I used THIS and it works fine. What I want to achieve is that when the first slide is displayed, the background is different. Here’s a JSFiddle. I was unable to make the slideshow work on the fiddle, but the code is basically the same as the one I’m using in my project, so I’m probably missing/failing a resource. I would […]

angularjs: ng-bind variable updated in karma unit test, but view not updated

html: <div id=”id” ng-bind=”node.name” title=”{{func(node.name)}}”></div> controller.js $scope.func = function _func(name) { let w = angular.element(‘#id’).width(); console.log(w); return w; } test.js describe(‘test’, () => { // prepare scope … $scope.node.name = ‘testtesttestname’; let element = angular.element(‘#id’); angular.element(document).find(‘body’).append(element); // Line 5 expect($scope.func(‘testtesttestname’) > 0).to.be.true(); }) I am new to angularjs. In the above html, there is a div with ng-bind. in test.js, I updated $scope.node.name with a new name. and func() is supposed to return the real […]

adding css class (or style) based on the variable using directive

I have a scenario where I have to use ng-style (or ng-class) multiple times based on the variable. But this causes a lot of pain for me as for the same functionality am writing everytime (for every widget) ng-class. So was wondering if there is a way to get rid of that. I know I can create a C type directive to achieve that. But this doesnt seems to be working. Here is my code: […]

hide the div on page load

I want to hide the div(Togglethis button) on pageload and when clicked on Tab2 the hidden div should be visible, again when clicked on Tab1 the div(Togglethis button) should be hidden.Can i achieve this using angularjs and bootstrap instead of using css/javascript tricks. Demo link : http://plnkr.co/edit/WEodtXzzI8XBv3vKuzIB?p=preview sample code: myApp.controller(‘tabsctrl’, function ($rootScope,$scope) { $rootScope.tabName =’MyTab Name’; $rootScope.tabValue=”tab1Value”; $scope.applicationData = {}; $scope.show = “Tab1”; $scope.programModules=[{“tabName”:”Tab1″,”tabValue”:”tab1Value”},{“tabName”:”Tab2″,”tabValue”:”tab2Value”}]; $scope.loadValue = function(tabVal,tabName){ $rootScope.tabName =tabName; $rootScope.tabValue=tabVal; $scope.show = tabVal; }; $scope.loadValue($scope.show,’Tab1′); […]

Admin LTE layout fails to apply in Angular JS with ui-router

I’m using Admin LTE theme and Angular JS with ui-router. The problem is that the layout fails to load using Angular JS with ui-router on view. There is an existing issue in here AdminLTE and AngularJS content wrapper wrong min-height but I can’t seem to understand on how to fix this. I’ve researched on github repo of this theme and the author suggest to apply $.AdminLTE.layout.fix() on every views which I don’t know how. I’ve […]

How can I Adjust Ant-design Popover styles angular 2

I want to adjust the styles of ant design popover when hovring on a particular icon. But In Inspect Element menu, its not showing the popover menu itemw after checking out :hover as well. So, how can I adjust it? Please Help.. <nz-popover class=”pop-over” [nzTitle]=”‘List Actions'” [nzPlacement]=”‘bottom'” nz-popover> <img src=”../../../../assets/icons/info-dots-white.svg” alt=”” class=”info-dots”> <ng-template #nzTemplate> <div> <button class=”list-action-buttons”>Add card</button> </div> </ng-template> </nz-popover> Source: AngularJS

Next Page »