Search Posts

Category: twitter-bootstrap

chosen select option[chosen-drop] cut off on bootstrap table-responsive

I have problem with chosen select within ng-repeat within bootstrap table, in chosen-drop option went inside table-responsive below image I can achieve this by change CSS .table-responsive{ overflow:visible !important; } like below image my problem is I don’t want to change overflow:visible because the table width is 1700px so table scrollable is required Is there any options to overcome this? var app = angular.module(‘testApp’,[‘localytics.directives’]); app.controller(‘testCtrl’,function($scope){ $scope.items=[{id:1},{id:2},{id:3},{id:4}]; $scope.selectitems=[{id:1,name:”One”}]; }); <link href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”/> <link href=”https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.css” rel=”stylesheet”/> <script […]

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′); […]

delete element using ng-repeat and modal

I want to delete element from ng-repeat using modal. this is my view <table class=”table”> <tr> <td ng-repeat=”u in usersHotel” ng-show=”detail”> ## Heading ## {{u.hotel.name}} <i class=”fa fa-pencil”></i> <i class=”fa fa-trash-o” data-toggle=”modal” data-target=”#myModal”> <div class=”modal fade” tabindex=”-1″ role=”dialog” aria- labelledby=”mySmallModalLabel” aria-hidden=”true” id=”myModal”> <div class=”modal-dialog modal-sm”> <div class=”modal-content”> <div class=”modal-header”> <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>&times;</span></button> <h4 class=”modal-title” id=”myModalLabel”>are you sure you want to delete this hotel ?</h4> </div> <div class=”modal-footer”> <button type=”button” class=”btn btn-green” id=”modal-btn-si” […]

Bootstrap progress bar width transition doesn’t apply when changing between danger, warning, info and success classes

I am using AngularJS and have set the width of a bootstrap progress bar to change dynamically using a varible, and used ng-class to change the colour of the bar depending on the width of the bar. ng-class=”{‘progress-bar-danger’ : sprint.sprintProgress >= 0 && sprint.sprintProgress <= 25, ‘progress-bar-warning’ : sprint.sprintProgress > 25 && sprint.sprintProgress <= 50 }” If the active class on the slider is progress-bar-danger then changing the width results in the default transition being […]

data-placement to left/right dynamically is not working in Expression tag in angular js

First time when I open the page, when mouse cursor is hovered on the list q1,q2,q3,q4 data-placement would be on left side. Expecting: when I click on expand view link, I’m calling a method changePlacement where i’m changing the scope value of $scope.changeDataPlacement to right , but data-placement is not changing to right… data-placement=**”{{(changeDataPlacement === ‘left’)? ‘left’:’right’}}”** NOTE : using Angular JS 1.6 DEMO On fiddle : [https://jsfiddle.net/HARSH_KUMAR_H/9xLmgt61/][1] Any help would be appreciated !!! Source: […]

closing the bootstrap modal window using angularjs

I have a modal model like this http://jsfiddle.net/1aeur58f/1/ I would like to know how I can call in the function closing the modal window Because at the moment I have that, When I delete item (which display modal window, he will disappeard but dark background blocking the page does not disappear. App.directive(“menuDeleteCard”, function() { return { restrict: “E”, templateUrl: ‘/directives/menu-delete-card/menu-delete-card-template.ejs’, controller: function($scope) { $scope.deleteCard = (indexList, indexCard) => { $scope.board.lists[indexList].cards.splice(indexCard, 1) } } } }) […]

Change data target through Javascript

I am working on an AngularJS application and I have a task which is something like: 1) Click on a button. 2) If variableA === true, output a modal. 3) If variableA === false, go to another link without popping a modal. Now, I am trying to achieve it with the following code HTML: <span id = “id1″ ng-click=”getClickType($event,row)” href=””> Text </span> JS: $scope.getClickType = function(event,row){ $scope.activeElement = event.target; if(row.type == “A”){ $scope.activeElement.dataset.target = “#ModalA”; […]

Icon get disappeared after hover in css

I am working on Angular JS (1.x) and my requirement is that I need to show tooltip text upon hovering on info icon. Tooltip text appears perfectly well. But the problem is that icon gets disappeared when I hover on that. Once I stop hover then icon again gets appeared. Below is my HTML code: <div class=”col-md-4 margin-left-26″> <span ng-show=”{{ job.information }}” class=”glyphicon glyphicon-info-sign spark-error-info pad-left-10″ tooltip=”{{job.information.sparkJob}}”> </span> </div> And here comes my CSS: .spark-error-info:hover:after{ […]

Next Page »