I'm not able to get my ngbPopover to show up in a table's td element. I'm seeing lots of questions but no clear solution as to how to make this work in my Angular 5 application.
I can see that my method to return the popover text is being called, but the popover never actually appears.
Problem: I have got similar problem, My NgbPopover is in <td>, when I click, popover is not visible but dom expands.
Solution: What I figure out by inspecting element : find this element named "ngb-popover-window" and remove style property, and my popover is visible then. I don't know how to handle that in project, Probably overriding some css, I guess.
My Sample : removed style element from below shown code.
<ngb-popover-window role="tooltip" class="popover bs-popover-top" id="ngb-popover-0" style="top: 114px; left: 885px;">
Hope this helps!
Related
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I'm using bootstrap with bootstrap-toc (https://afeld.github.io/bootstrap-toc/)
Working with the following scenario:
http://jsbin.com/cerozeleya/edit?output (make sure to click "run with Js" to be able to see the sidebar)
As I scroll the view, I would like the sidebar to scroll until a point where the jumbotron is no longer in view. At that point, it should stay affixed while the content scrolls.
I can't get that behaviour to happen with the included jsbin. I tried messing with the data-offset-top/data-offset-bottom attributes within my nav #toc but nothing changes. I found another question here that instructed the following changes on the css:
.affix{ top: 0px;}
.affix-bottom{ position: absolute;}
But that didn't work either. I tried reading the affix and scrollspy documentation, but its either not clicking with me, or I'm not seeing what I'm doing wrong.
Any help appreciated. Thanks!
You have to use data offset top within the tag which you want to affixed
data-spy="affix" data-offset-top="197"
Eg.
<nav id="toc" data-toggle="toc" data-spy="affix" data-offset-top="197"></nav>
Edit the offset value according to your needs
I have a navbar at the top of my website and it's fixed position. However, whenever you scroll down on the page, all of the content goes over the navbar instead of under it... how can I fix that? I assume showing my code won't help because if you know how to fix it you could probably just explain, but if you'd like to see my code just ask. Thanks.
I think you should post some code or a url. This could be as simple as setting z-index: -1 if the main part of the page is a sibling element of the navbar. Since z-index calculations depend on the parent child relationship of the DOM, knowing the relationship of the elements is necessary to answering the question.
How can I allow scrolling in this Dojo/Dijit page:
http://www.olexe.com/html/DijitScrollTest.html
I might have 60 or 100 rows to display in the tabControl (id="topTabs").
I think there must be a property such as AllowScrolling but I cannot find it.
Or do I need to add a child control, and then turn on scrolling in the child control.
(If you could also point me to the Dijit doc where it is document, that would be appreciated. I have been hunting for over one hour for it).
In general scrolling is easily activated by setting the CSS style overflow to "auto". However, I have looked through your page a little and I have a few questions.
First, you add a TabContainer in the center region of the BorderContainer, but then you never add any tabs to that Container that I can see. TabContainers are usually populated with several ContentPanes to acts as different Tabs.
So if you want tabs, then I would add an additional child element in the form of a ContentPane that holds all the content, otherwise I would change the existing TabContainer into a ContentPane.
Either way, it is the ContentPane that should have the overflow: auto; attribute set to allow scrolling within that element.
the contents of TabContainer should scroll by default. Try looking at the declarative example in the docs and use ContentPane children with a title attribute for each.
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?