I have an Angular Ionic 6 app with a chat screen & when it loads up I want the ion-content to be scrolled to the bottom.
I know how to scroll the content to the bottom using this.ionContent.scrollToBottom(); but the problem is some of the messages have to load in dynamic content and have a variable height.
What would be the best way of making sure after all of those messages and components are loaded in THEN it scrolls the chat to the bottom?
I had this problem a few months ago. Sometimes a lot of messages were loaded, and the scroll didn't reach all the way down.
I worked it around with this function in my utils.service.ts:
async goToBottom(content:IonContent, times:number=1){
for(let i=0; i<times; i++){
await this.wait(200);
await content.scrollToBottom(200)
}
}
So I can call it like this:
this.utilsSvc.goToBottom(this.content, 3);
and make sure it always arrives the bottom.
Related
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);
I'm having a problem that seems pretty common but with a slight twist.
I'm using bootstrap for my web application. The main layout/master page has a top bar (for actions) and a left side navigation bar (for navigation between the pages of the application, of course). So, the page's content is always in the "bottom-right" part of the screen (if I can say, although that "bottom-right" cover about 80% of the screen).
Now, for one page only, I want the content to be enclosed in a two column layout with independent scroll bars. On the left side, I want to display a task list and on the right side, I want to display boxes (two boxes wide) for my employees with their already assigned tasks. I want to be able to navigate in my task list independently from my employees list.
Here is a very basic mock-up (I know, it's ugly) of what I'm trying to accomplish : https://drive.google.com/file/d/0BwbWwcCjL9EJT1B5MlFMQVh0UnM/view?usp=sharing
Is it even possible to accomplish this when bootstrap is involved? Right now, my task list and my employees list extend on many page length (4-5 at least). I want them to be contained within the browser window and have an independent scroll bar for each list so I can drag a task from the top of the list to the bottom employee (as an example), which is now impossible.
Thanks
Finally, I've found a solution. I had tried to use the "scroll" class, but I had forgotten to use a "max-height". Now, I use the following code :
$(document).ready(function() {
ResizeListsSoTheyFitInScreen();
});
$(window).resize(function () { ResizeListsSoTheyFitInScreen(); });
function ResizeListsSoTheyFitInScreen() {
var windowHeight = $(window).height();
var taskListTop = $('#TaskList').offset().top;
$('#TaskList').css('max-height', (windowHeight - taskListTop) + 'px');
var employeeListTop = $('#EmployeeList').offset().top;
$('#EmployeeList').css('max-height', (windowHeight - employeeListTop) + 'px');
}
It works fine, though I'm not 100% sure it's the best solution because I have to account for the bottom margin and such on my own. If you have a better solution, I'm open to it.
Thanks a lot
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;
I'm using VS2010,C# to develop an ASP.NET web app, my page contains a wide image, so that users will usually see a horizontal scrollbar, but I want this scroll bar to be automatically placed centered horizontally so that my user always views the image and the whole screen in center by default, is there any way to do so?
thanks
Try This
var img = document.getElementById('imageid'); //or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
// Jquery
$("div.demo").scrollLeft(width/2);
Check this... you would need to create custom script for your scroll bar
Custom Scroll Bar