We're using JQuery FullCalendar latest version with draggable option on. The external event div is filled with values from the database. The div height is limited. So we added overflow auto to the external event container div.
It created a glitch that makes the event invisible when dragging it on the calendar. It also created a glitch that makes both scroll bar appears when dragging the event off the external event container.
I realise we are probably using the wrong tool for the job. Is there a proper way to solve this problem ?
Thanks
Its in fact more jquery draggable issue.
This code for external draggable events placed in div with overflow: scroll worked for me:
$(element).draggable({
scroll: false,
helper: 'clone',
zIndex: 999,
revert: true,
revertDuration: 0
});
Check also jQuery Draggable and overflow issue
Related
I'm just getting familiar with working with binding. I have this file here: https://gist.github.com/JelaniThompson/74d062c5a28a18b75ca91cd44cd04d56
Does anyone know why y constantly returns 0 as opposed to the actual scroll position? I feel like this is more of a CSS issue than a Svelte issue but I could be mistaken.
When I did window.addEventListener instead, no events were being fired even on scroll with this HTML structure
You are scrolling the scroller element but binding to scrollY on window. Because the window is not being scrolled, scrollY remains 0.
If you want to know how far the scroller element has been scrolled, you should use scrollTop instead. Svelte won't automatically bind this for you, so you'll need to set up the event listener yourself.
<div class="container">
<div class="scroller" on:scroll={(e) => console.log(e.target.scrollTop)}>
<!-- etc -->
</div>
</div>
Keep in mind that the scroll events fire at a high rate and you may need to throttle it to prevent performance issues.
I'm using the component in semantic to create a top menu + breadcrumb header. For some reason, the scroll bar "jumps" when trying to scroll from the topmost position
Sandbox https://codesandbox.io/s/y7k3zn5qn1
I haven't provided the context prop to the sticky component. In the examples they have always provided the React DOM reference of the enclosing div as the context prop to the Sticky component. The documentation is not clear as to the purpose of the context prop. (It says "Context which sticky element should stick to")
Do I need to provide a context prop to the sticky component to stop the "jump" scrolling? If so, how do I decide which enclosing div ref to provide as the context prop?
While scrolling, position:fixed; is added to the parent of <div class="ui inverted menu">. This moves out the element from the dom structure thus removing the space which it occupied. Therefore, the sibling jumps up occupying the free space.
You may manually add margin-top to the sibling while the position is set as fixed, as a workaround.
I used a Rails component to wrap the Sticky component and applied padding/margin offset to the sibling.
The rail makes the sticky act like overlay and not part of the parent div. Just need to add custom css to the rail to override the default behaviour.
Context ref allows the sticky to be stuck through out the context of that element.
Made some changes to the code sandbox Sticky Menu Example
I kind of solved it for myself. Tried adding rail as in above solution but didn't work.
I realized the problem for me was the pre-render library I was using. Rather than getting rid of pre-render library, I added an active attribute to Sticky, with it being false by default (stored in state). Then, after 3-second delay, I turned it on (set active attribute in the state to active). I chose 3 seconds because I believe that's how long my pre-render took to compose each page (I'm not exactly informed on the details of how it does this).
Like:
componentDidMount() {
...
//Enable sticky functionality after delay
setTimeout(function() { //Start the timer
this.setState({
controls: {
...this.state.controls,
isStickyActive: true,
}
}) //After 3 seconds, set isStickyActive to true
}.bind(this), 3000);
...
}
I'm working on a phonegap app that has a fixed sidebar behind the page and I found an behavior issue.
The sidebar is hidden, the user can see it with a tap on a menu icon. When the user tap on he icon the page go to the right and it shows the sidebar that is in a minor z-index.
If the user want to close the menu he have to drag the visible part of the page to the left.
My problem was that in the sidebar I have a block that is vertically scrollable. It works fine but the thing is, if I put the .scroll (overflow-y: scroll; -webkit-overflow-scrolling: touch;) class in this element and the user swipe horizontally from right to left over it the sidebar and the page start a drag.
We're using snap.js for the sidebar interaction.
I want to disable this drag. I tried with CSS and preventing horizontal scroll but it doesn't work.
I attach a pic for more visual details.
Use iScroll5 for scrolling.
Then hook into the onScrollStart event:
myScroll.on('beforeScrollStart', function(event)
{
if (isPanelOpen){
myScroll.disable();
}
else{
myScroll.enable();
}
});
Or - if you not wanna use iScroll5, you can set a global bool, which indicates, if a panel is open (you've gotta do this anyway).
If a Panel is open (meaning, you're showing the sidebar) set the bool to true in snap.js - this subsequently means, you've gotta tweak snap.js.
Then, on touchmove, check the bool if it is true. Then you know, a panel is open, and you can do a event.stopPropagation on touchmove in order to prevent the event bubbling up to get recognized by snap.js and avoid the panels closes too early.
Woop! We found it!
The problem was that we're catching the touchmove event for each element with .scroll class and we're stoping the propagation of it.
We had notice that when we tried to start a horizontal scroll all page was moving like a drag so we added this CSS property:
html, body, .ui-mobile .ui-page-active { overflow-x: hidden; }
And...it works fine!
P.S. we don't actually need the horizontal scroll in any element, so, this is fine for us.
I want to keep a jquery UI dialog in a fixed position (with respect to content) even if that means it opens outside the browser window. I'm able to control the positioning until the dialog hits the edge of the window, but there appears to be some kind of offset control that is keeping it from opening offscreen.
I'm successfully using this solution for the same issue with datepicker:
How to control positioning of jQueryUI datepicker
I wonder if a similar fix is possible for dialog (I tried the obvious change - replacing "datepicker" with "dialog" - doesn't work).
Many thanks.
I had the same challenge which I managed to fix by using Fixed CSS positioning. Initialize the dialog on page load (with autoOpen: false) and then when you want the dialog to be displayed:
$('#dialogContent').parent().css('position', 'Fixed').end().dialog('open');
add the following setting to the dialog.
dialogClass: "dialog-fixed"
in your css declare the class as follows.
.dialog-fixed
{
position:fixed !important;
}
that works for me... as per jquery 2.1.1 and jquery ui 1.11.2
i have an asp.net ajax hovermenuextender on a modalpopup panel to display a tip on hover.
the problem is the (tip) panel with the hovermenuextender appears below the modalpopupextender in IE8
this is a z-index issue, is there any place in the page where i can set the z-index for the hovermenu so that it appears over modalpopup,
i learnt that this change could be made in the PopupBehavior.js file from here:
http://ajaxcontroltoolkit.codeplex.com/workitem/26107
but i am using the Ajaxcontroltoolkit.dll in the project and its not possible to modify the ajax javascript source files.
thanks in advance.
I have running version AJAX 3.0 and adjusting the z-index did the trick. Thank you!
Make sure your PopupMenu container has higher z-index than the modal popup control. If you use Firefox with Firebug plugin you can find it easily when the page gets rendered. Just right click on the modal popup background -> Inspect element with Firebug -> on the right side swap to the "Computed" tab and you will find the current z-index in the object properties.
In the CSS classes for your Modal Popup and the Model Background you can try adding an overriding z-index entry that is less than the default for the hover menu popup. Something like:
.dialog {
z-index: 99 !important;
}
.dialog-bkg {
z-index: 90 !important;
}
Apply the "dialog" class to your modal popup panel, and supply the "dialog-bkg" class in the BackgroundCssClass property of the ModalPopupExtender.
I don't know if it will solve the issue with the hover menu -- but it may be worth a try.
BTW -- I just tested with version 4.1.404 of the Ajax Control Toolkit and I was able to use a hover menu on top of a modal popup without needing any changes...