I need to implement card-list with scroll down button in Vuejs. What's the best way to do that? What npm packages I can use?
Put id = "content" in the parent div and on the button you call the scroll function
const containerMovie = document.getElementById("content");
containerMovie.scrollBy({
top: -600,
left: 0,
behavior: "smooth"
});
Related
I am building a tabbed environment using Fluent UI's Pivot component. Some of the tabs (or PivotItems in Fluent UI parlance) are quite long and need to be scrollable. Is there a way of having the tab bar be sticky such that it stays on top of the frame and visible no matter where the user scrolls to on the tab?
To get expected behavior you just need some CSS.
Set height of body and html to 100vh, and overflow: hidden to avoid multiple scrollbars.
body, html {
height: 100vh; /* Viewport height */
overflow: hidden; /* To avoid multiple scrollbars */
}
As a working example I'm gonna use Links of large tab style. Content of every item renders inside PivotItem Component. So, you have to put some styles on it:
const pivotItemStyles = {
height: 'calc(100vh - 44px)',
overflow: 'auto',
}
PivotTabs by default uses height: 44px that's the reason why I put calculate inside height property. overflow: auto is to get scrollable content.
Reference: Pivot.styles.ts
Codepen working solution
I want to disable sticky toolbar which appears on top of page when page is scrolled. How it can be done ?
I resolve this problem by CSS
.ck.ck-editor__top.ck-reset_all {
z-index: var(--ck-z-modal);
position: sticky;
top: 0;
}
.ck.ck-sticky-panel__placeholder {
display : none !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: unset;
}
The fact that the toolbar appears in the wrong place when the editor is in an overflowed container is a bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) allow controlling the toolbar. This editor type doesn't do anything with the toolbar itself – it just creates it and it's up to you where you're gonna insert it.
Another option would be implementing your own custom editor, but that'd be necessary only if you wanted to make even more customizations
I'm having same issue with the classic-editor, the position of the .sticky_panel is changing on the event of focus in the .editor_editable.
at some point when it's not visible within the display and click inside it goes all up to first element .
CSS only:
ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: absolute !important;
}
In my editor build, I did a hack like this:
const stickyUpdateInterval = setInterval(() => {
editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
clearInterval(stickyUpdateInterval);
});
This is just a crude hack that will update sticky balloon all the time.
If you know exactly in which overflow container your editor will be mounted, you can do something more clever, like listen to scroll events and update only then (this is what CKEditor is doing for the window, BTW, that's why it's not working when you put it in a container).
I have spent some time trying to get the CKEditor Classic component "sticky toolbar" to work nicely in Angular with a scrolling pane and there are 2 issues I had to overcome.
The position of the toolbar when sticky this defaults to the top
of the browser page (view port) - so (in Angular) you need to
configure this setting in the HTML template :
[config]="{ui:{viewportOffset:{ top: 58, right: 0, bottom: 0, left:
0}}}"
Making the editor respond to scrolling. This was a more difficult
one to resolve for me. The solution I have is (thanks to panta82
above) is to catch the scroll events and call a function in the
editor to check if the toolbar should be sticky or not .. it's
called checkIfShouldBeSticky :)
Here is a working sample in StackBlitz
I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
I want to create a fixed to nav bar using the vue material framework. How do I do that?
<md-whiteframe md-elevation = "3" class = "main-toolbar">
<md-toolbar class = "flex: 1">
</md-toolbar>
</md-whiteframe>
I began with this outline but I cannot seem to make it fixed no matter what I do.
You need to add sticky positioning from css. See this codepen for an example: https://codepen.io/aprouja1/pen/awKavJ
#toolbar{
position:sticky;
top:1px;
}
You can use default css like:
.main-toolbar {
position: fixed;
z-index: 1000;
left: 0;
right: 0;
}
In the appcelerator titanium application I am building, there are two widgets
an imported widget VectorImage
a custom widget staticboard, which should rely on VectorImage widget.
But I don't find the right way to import the VectorImage module in my staticboard widget controller (widget.js).
I've tried :
var VectorImage = require('com.capnajax.vectorimage/widget');
var VectorImage = require(WPATH('../../com.capnajax.vectorimage/widget'));
and also directly during my widget creation :
var image = Alloy.createController('com.capnajax.vectorimage', {
svg: WPATH('chess_pieces/'+pieceImage+'.svg'),
top: parseInt(y+inset+cellsSize*(7-rank)),
left: parseInt(x+inset+cellsSize*file),
width: cellsSize,
height: cellsSize
});
$.widget.add(image);
Please, also notice that I managed to integrate it in an hard-coded way, in my widget view (index.xml), e.g :
...
<Widget src="com.capnajax.vectorimage" svg="path.svg" />
...
So it's not the VectorImage widget to blame.
What is the correct way to use this widget in my widget.js ?
Notice that this post does not solve my problem.
try:
js:
Alloy.createWidget('com.capnajax.vectorimage' , {
svg: WPATH('chess_pieces/'+pieceImage+'.svg'),
top: parseInt(y+inset+cellsSize*(7-rank)),
left: parseInt(x+inset+cellsSize*file),
width: cellsSize,
height: cellsSize
});
I am building a slide menu.
The menu is long and I need to be able to scroll inside of it, so I have set overflow-y: scroll on it.
I am using -webkit-transform (and variants on other browsers) as the transition property.
Now I can't scroll inside the div, using the scrollwheel when on top of the div will make the whole page scroll.
If I change the menu's behavior and transition the right property (setting the menu to right: -320px and animating it back to right: 0), the scroll works.
This bug only happends in Safari, it works fine in Chrome and other browsers. Also works on iOS.
Anybody know a workaround? Anyone experienced this issue before? I can't seem to find any info on it. Thank you.
I had the same issue with the difference that I use an animation instead of a transition and overflow: auto instead of overflow: scroll.
This fixed the issue for me (el is the DOM element to which the animation is applied):
function fixSafariScrolling(event) {
event.target.style.overflowY = 'hidden';
setTimeout(function () { event.target.style.overflowY = 'auto'; });
}
el.addEventListener('webkitAnimationEnd', fixSafariScrolling);