I am using angular material in my angular app. I want to put a md-tooltip on md-progress-bar but it is not working. md-tooltip works fine on other elements like md-icon but not on md-progress-linear. Any help. Here is how I am using it.
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
I had to wrap the progress bar and tooltip in another element, but not nest the tooltip inside of the progress bar:
<div class="progress-container">
<md-progress-linear md-mode="determinate" value="50"></md-progress-linear>
<md-tooltip>Hello</md-tooltip>
</div>
I styled the container to make it taller than it is, because I needed it to be clickable, but not have a tiny hitbox.
Demo: http://codepen.io/langdonx/pen/GowBeq
I know this is pretty old, but I just found myself a solution and maybe this can be used by others as well.
Putting the tooltip directly under the progressbar doesn't work, but you can wrap the whole thing in a div or span:
<div>
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
</div>
This way it works fine. Haven't found anything else yet and it doesn't seem to have a solution in the official discussions
Related
I'm using antd TimePicker when I open it and scroll down, the popover scrolls with the page instead of staying in place.
I cant figure out why their official solution for the scrolling problem isn't working for me
https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page
Here is my code:
<div className="timepicker__wrapper">
<span className="timepicker__mintime-label">
{getTranslate(QUESTION_MODULE.GENERAL.MINIMUM_TIME_LABEL)}
</span>
<TimePicker
getPopupContainer={triggerNode => triggerNode.parentNode}
onChange={onChangeMinTime}
format={timeFormat}
defaultValue={moment(item.minTime ?? '00:00', timeFormat)}
allowClear={false}
/>
</div>
If I console.log triggerNode.parentNode it points to the timepicker__wrapper exactly as it should.
Here you can see the anchor node
I solved this issue by adding position: relative to the anchor node. It would be nice to mention this in the docs
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
I have a problem getting the active slide in an Angular-UI Bootstrap carousel outside the carousel.
I have a panel, with the carousel inside, and want to put buttons in the footer of the panel that makes actions using the selected slide, but using jquery selectors is not an option.
I want to implement it using something in pure angular.
I think I can use the active attribute, but maybe there is something clever that can do the trick more smoothly.
Some code (Jade syntax):
.panel.panel-info
.panel-body
carousel.imgCarousel(interval='5000')
slide(ng-repeat='media in selCard.superviseTab.media')
img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
.carousel-caption
multiSelect
h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
p {{media.originalFilename}}
.panel-footer
.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-left
li
a.btn.btn-danger
i.fa.fa-unlink
If you look at the AngularUI documentation, you can see this is how the slides are integrated into the HTML:
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
...
</slide>
</carousel>
We can see that the active slide is determined by the active property on each slide.
So, you should be able to iterate through the slides and return the first slide with the active property on it. As long as you haven't modified the slides array outside of this carousel, it should give you the index of the current slide.
For example, something like:
function isActive(slide) {
return slide.active;
};
$scope.getActiveSlide = function() {
var activeSlides = $scope.slides.filter(isActive)[0];
//return the first element, since the array should only return one item
};
Should do the job (or however you choose to implement your find functionality).
Here is a jsfiddle demonstrating the following issue.
I'm using Foundation 5 framework and trying to include an Orbit Slider inside of a Reveal Modal, however for some reason the slider is not given an appropriate height.
<-- Button to Reveal Modal -->
Click For Modal
<!-- Modal Popup that is revealed -->
<div id="myModal" class="reveal-modal" data-reveal>
<ul data-orbit>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
</ul>
</div>
Note that if you resize your browser window with the modal open, it automatically corrects itself to the appropriate height. This issue existed in previous versions of Foundation, so hacky fixes popped up like this:
$('.reveal-modal').on('opened', function(){
$(this).find('[data-orbit]').css('height','');
$(window).trigger('resize.fndtn.orbit');
});
However this fix no longer works in the newest version of Foundation. Is there any way to get it working?
Note that I don't want to simply assign a min-height css attribute as the content in my slider will be of variable height, not to mention responsive so a pixel value wouldn't work.
In short I believe this is the answer:
$(document).foundation();
$('.reveal-modal').on('opened', function(){
$(window).trigger('resize');
});
OR
$(document).foundation();
$(document).on('opened', '[data-reveal]', function () {
$(window).trigger('resize');
});
I looked at the following references:
Foundation 4.1.2: Orbit slider not shown in Reveal window
The one you listed as "hacky fixes" above
Squashed picture when using Orbit in a Reveal
Orbit height not set on accordion.
It looks like the old hack for 4.1.2 just called the compute_dimension method to resize the modal once it was opened. I looked in the foundation.orbit.js file and found $(window).on('resize', self.compute_dimensions);, around line 280.
Instead of $(window).trigger('resize.fndtn.orbit'); I used $(window).trigger('resize'); and removed the line $(this).find('[data-orbit]').css('height','');.
I forked your jsfiddle and added the changes here.
I hope that helps.
For anyone using Foundation 6 (my legacy project was on 6.2.4), i fixed this by adding the following css code:
div.gallery-in-modal .orbit-container {
height: auto !important;
}
div.gallery-in-modal .orbit-container .orbit-slide {
max-height: initial !important;
}