I'm designing a chat window and I'm using overflow:auto in CSS.
I want it continue with end of line, but scroll does not moving, and it's always move to top of the chat window.
Is there a way to do it automatically?
using javascript it will be possible see the following
document.getElementById("id of your div").scrollTop = document.getElementById("id of your div").scrollHeight;
Related
I have an app which is small in terms of width and height, I want a popup to show when a button is clicked. Problem is the popup is larger than the app window and when i open it, it scales down and looks weird
APP
APP WITH POPUP
POPUP CONTENT IN DESIGNER
How can i make the popup independent from the app window, like this:
Or is there a better approach rather than using popup, it would be nice if i were able to move the popup/window around. It still needs to be somehow connected to the main app because it get's data from there
A Popup in QML appears as a layer on top of the parent window, so it cannot be bigger than the parent window. If you want a separate, top level window, you should use a Window or a Dialog instead.
I've gotten it sorted out. I encapsulated the component i wanted to show inside a window and created it using Qt.createComponent()
var playListComponent = Qt.createComponent("CustomPlaylist.qml")
var window = playListComponent.createObject(rootWindow)
window.show()
The root element of CustomPlaylist.qml is a Window
I add a vuetify drawer to my application, and set the position to fixed and temporary.
When the drawer is open (and I have overlay), when I try to scroll the drawer stay in position - good. but the problem is the event pass to the page, and the page is do scroll.
How can I fix that?
My code on codesandbox.
open the link
click on toggle and the drawer is open.
try to scroll (with the mouse)
if you do, it's bad.
Your problem is that you give the wrapper div height:3000px.
you have to set it to height:100vh - in this case it will take the maximum height of your screen (like 100% of it)
I have a website using the fantastic fullPageJS plugin, and it does what it does very, very well.
I have however, an issue on mobile devices, where the sliding hamburger menu does not scroll with touch controls when the menu height exceeds that of the ViewPort, as in this picture:
Question
How do I force the side menu to accept touch-based scrolling?
You should make use of the fullpage.js option called normalScrollElements.
As detailed in fullpage.js docs:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the Javascript selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.
Additionally, you can call fullpage_api.setAllowScrolling(false) when opening the modal. That will prevent fullpage.js to scroll up or down when using the mousewheel or trackpad.
You can set it back to the default value when closing the menu by using fullpage_api.setAllowScrolling(true).
You should try to add overflow: scroll if you haven't already.
I am using the #angular/material library and am trying to create a sort of bootstrap toast like effect. Where I want potentially multiple dialogs to appear in the top right hand corner and stack up below the most recent one.
By disabling the backdrop and closing features, I have this code:
let dialogRef = this.dialog.open(NotificationInputComponent, {disableClose: true, hasBackdrop: false});
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
Which works quite well, so when triggered, I get this in the middle of my screen:
If I manually change the elements css to position: absolute; right: 10px then it goes to the right hand side of the screen and looks correct. The issue is, now if I trigger another dialogue, I have to do the same again, but set the top property to stop it overlaying the existing dialog. I could presumably keep track of all the triggered dialogs in my component and manually update the top margin. But I was wondering if there is a neater way of doing it, either getting them to stack in css, or possibly is there a way to inject the triggered dialog into an #angular/flexbox layout?
Using a heavily customized version of the scheduler, I'm getting reports that users are having trouble figuring out how to scroll horizontally. I imagine it's because the scrollbar is at the bottom of the schedule and on Mac OS, it's potentially hidden if the user has a trackpad.
My schedule functions similar to this one minus the vertical scroll. If you're on an Apple laptop and only using trackpad it's likely you won't see a scrollbar at all. If the scroll bar is visible, it's buried under the page's fold.
Ideally, I'd have arrows near the times so users could click left or right and that view would scroll left or right. I've been unable to figure out a way to programmatically call $.animate({ scrollLeft: ... }) on any piece of the scheduler and scroll both the contents where events are and the header where times are.
It looks like I can get and set the position of at least the timeline with $( '.fc-time-area .fc-content table' ).offset() but it won't move the contents of the schedule itself.
Any idea how I can move the schedule content (events) and the timeline in sync with each other?
Bonus internet points if you can tell me how I could ensure that I'd only move the container to it's end. (i.e. If the schedule for that day ends at 10pm, don't allow me to change the offset to something beyond 10pm)
Any idea how I can move the schedule content (events) and the timeline in sync with each other?
To get to the beginning of the view:
$('.fc-body .fc-time-area .fc-scroller').scrollLeft(0);
And for scrolling to the end of the view, you can do something as follows:
var scroller = $('.fc-body .fc-time-area .fc-scroller');
var scrollWidth = scroller[0].scrollWidth;
scroller.scrollLeft(scrollWidth);