I wanted to place a Typeahead directive on a Modal dialog. The problem is that when typeahead show it's list of possible matches it is behind modal-footer div. I played with append-to-body then the whole list is behind the modal dialog. Also played with append-to no luck. Any suggestion?
The solution was to add this attribute to html:
typeahead-append-to-body="true"
and in the css file this:
.dropdown-menu {
z-index:9999;
}
Now the Typeahead displays correctly over the modal dialog.
Related
I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!
I used seiyria angular-bootstrap-slider for range slider,but initially when page loads the tooltip is at wrong position.when it is placed in normal page it is working fine,but in modal it is intially at wrong position,but when I click it will be set.So how to slove this issue.
HTMl:
<button class="btn btn-default" value="modal"
onclick="confirmChangeMaxHours();"><i
class="glyphicon glyphicon-cog"></i> Adjust Value
Here is the link:
Codepen
I found this suggestion in some site:
setTimeout(function() {
slider.slider("relayout");
}, 500);
But,where I have to give setTimeout function,I tried to give but it is showing error like Slider is not defined.
Thanks in Advance.
add this css into your code
.tooltip{
margin-left:-32px!important
}
In my implementation the modal was over the tooltip. So, to fix it, I put the tooltip over all elements by adding a big z-index to all tooltips.
.tooltip.tooltip-top,
.tooltip.tooltip-bottom,
.tooltip.tooltip-left,
.tooltip.tooltip-right {
z-index: 100000;
}
I am using ng-map directive and place autocomplete API in my angularjs application. which are working fine.
but the problem is I need Both in a bootstrap modal and when i am using same code in a bootstrap modal, Nothing is working neither ng-map nor place autocomplete.
Suggest me if I am missing something.
problem occures only when i use angular's ng-map directive. With javascript everything works fine but I don't want to write bulk of code. I wanna use ng-map only.
Here is my markup
<ng-map zoom="8">
<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>
<marker visible="true" centered="true" position="{{vm.place.formatted_address}}" title="You are looking for this" draggable="true"></marker>
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.showCity(event, c)"></marker>
<directions
draggable="false"
travel-mode="DRIVING"
panel="p3"
origin="jaipur"
destination="Delhi">
</directions>
</ng-map>
see my
plunkr
for whole code
Since the map is displayed in bootstrap modal, the map needs to be explicitly intialized once the modal dialog is opened as demonstrated below:
$('#myModal').on('show.bs.modal', function(e) {
$timeout(function() {
google.maps.event.trigger(vm.dialogMap, 'resize');
vm.dialogMap.setCenter(vm.mapSettings.center);
vm.dialogMap.setZoom(vm.mapSettings.zoom);
});
});
'show.bs.modal' event is triggered once the modal is opened.
From another hand, unfortunately angularjs-google-maps at the moment contains a bug that prevents the route to be printed if multiple map instances are added into a page (in your example there are two map instances)
In the below example is provided a workaround.
Working example
The following forked plunker demonstrates how to:
properly display map in modal dialog
print routes in multiple map instances
add a style
.pac-container { z-index: 10000 !important; }
ref from there
Google Places Autocomplete not showing up
here a plnkr for a your working example
http://next.plnkr.co/edit/PrrKFvx3WbDFAXlk4ehH?p=preview
In an angularjs service, I am adding the HTML for an accordion-group to the DOM of an accordion element. What results is the display of the accordion-group as if it were a panel - no title bar, no collapse behavior.
I'm sure it is because the accordion gets initialized before the content is added. The jQueryUI accordion has a refresh method for such occasions, but not sure how to get the angualrui accordion to recognize the new accordion group.
hope the following steps help :
get the reference of the element where you want to add the accordion
HTML : <div id = "myAccordion"> </div>
Controller : var parent = angular.element("#myAccordion");
Compile your accordion template and attach it to the parent
Controller: var accordion = $compile("<div accordion> </div>")($scope);
parent.append(accordion);
but this is a work around you should ideally have a directive to do DOM manipulation , perhaps you are coding with jquery in mind.
I am somewhat new to using Angular and AngularStrap directives. I need to use the tab directive with static markup like the example:
<div data-fade="1" bs-tabs>
<div data-title="'Home'"><p>Static tab content A</p></div>
<div data-title="'Profile'"><p>Static tab content B</p></div>
</div>
On another part of the page I would like to display a div only when the first tab is selected. The div is not part of the tabs, but is in the same overall controller. How can I show/hide this div based on the selected tab?
Something like this?
<div ng-show="???? active tab stuff here ????">Home tab is selected</div>
Thanks for any help.
As shown in the example on the AngularStrap page the active tap is stored in
tabs.activeTab
So you can use this property to conditionally show display something else like so
<div ng-show="tabs.activeTab == 0">The first tab is active</div>
UPDATE
Even with non object tabs you can just bind a model against the bs-tabs to store the active ID like so:
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
Here is an updated plnkr. (Click on the 3rd tab and see the 'Test' text appear)
I found somewhat of a hack to resolve this issue for now. This does not seem like the best approach, so if someone has a better idea, please share.
I realized that the bsTabs directive is creating data-toggle attributes for each tab. By watching the data-toggle shown event, I am able to recognize the tab change and display the div. The controller code looks like this:
$scope.HomeTabSelected = true;
function watchTab() {
$('a[data-toggle="tab"]').on('shown', function (e) {
$scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
})
}
setTimeout(watchTab, 2000); // setTimeout necessary to allow directive to render
and the HTML div uses ng-show.
<div ng-show="HomeTabSelected">Home tab is selected</div>