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?
Related
Using Vue.js and Transitions.
When removing an item from a list, I'd like the item to fade out, but stay in place as it fades out. I'd also like the item below it to transition up into it's new position. I haven't been able to find a way to make both of these desired behaviors take place.
.list-leave-active {
position: absolute;
}
This CSS appears to be needed to make the 'next' item transition into its new location, but appears to also make the 'leaving" item transition up into the top position as it's leaving/fading out.
Removing this CSS makes the item being removed stay in place as it fades away, but then we loose the nice transition of the 'next' item in the list.
The JSFiddle will make this much clearer... https://jsfiddle.net/rprpx/vaq5nzL8/
Thank you.
Have a look at list transitions at https://v2.vuejs.org/v2/guide/transitions.html#List-Entering-Leaving-Transitions
Basically you can just use the example there and remove the transform: translateY(30px); part.
I have created this fiddle with the change above, to show the behaviour:
https://jsfiddle.net/suterma/s5zLrfom/
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 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!
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'm using a TabLayoutPanel in a GWT application, attached to the RootLayoutPanel of the page.
Inside each tab I have a ScrollPanel, which is used to display a FlexTable.
Is it possible to make the TabLayoutPanel grow vertically, so the user can scroll the entire page using the browser scroll bar, instead of using the internal ScrollPanel ?
The short answer is: It's not possible with LayoutPanel's. The reason: LayoutPanel's are specific for applications that need to fill the browser client area, or in other words the part that is visible by the user. One of the problems with browsers is to have a widget that has exactly the height of the visible area and also automatically resizes when the browser window is resized. This is one of the problems the LayoutPanels solve.
If you want to use the browser scrollbar and be able to create pages longer than the visible area use the 'normal' Panels.
BTW just FYI you are aware the FlexTable is slow in rendering and if possible better use Grid.
Just add a new style to the TabLayoutPanel:
this.addStyleName("tab-style-content");
And define in your CSS as:
.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;
}
Thus, the property overflow will be overwritten in the gwt-TabLayoutPanelContent and the scrollbar will be shown automatically.
If you make the TabLayoutPanel bigger than the root panel, you will get a browser scroll bar.
If I want to achieve something like this, I always put the TabLayoutPanel in a SimplePanel and add the SimplePanel to the RootPanel. I guess this is not the best way, but it works.
public void onModuleLoad() {
//Create TabPanel
TabPanel tp = new TabPanel();
tp.add(new HTML("Foo"), "foo");
tp.add(new HTML("Bar"), "bar");
tp.add(new HTML("Baz"), "baz");
tp.selectTab(1);
// Create SimplePanel and add TabPanel
SimplePanel sp =new SimplePanel();
sp.add(tp);
// Add SimplePanel to the root panel.
RootPanel.get().add(sp);
}