I have template message in image.
Can you help me set scrollbar at the bottom by default?
Use scrollIntoView() on the element you wish to display at the bottom. For example, for the last message of a chat you want to show :
elementMessage.scrollIntoView(true);
It will make the parent element scroll until your element is visible (here with the optional parameter alignToTop set to true, the element will be aligned at the top of the scrollable parent, or as high as possible if it's your last element).
The Javascript code below should keep your div's scrollbar positioned at the bottom like you described:
let objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
link below: Link here
Related
I have a bunch of div elements and in want to know if the scroll is at a particular element I am using a custom scrollbar implementation(react-custom-scrollbars).
Here's the working code.
https://codesandbox.io/s/7j28kmoy86
Referring to this question and answer by Shai Almog:
Rebuild list of containers without scrolling the list
I have a form with one container (TableLayout), which contains several rows with labels and buttons. Clicking a button changes the order of the rows and rebuilds the whole form (after myForm.removeAll() ). After myForm.revalidate() the form jumps to the top.
I am trying to implement this exact behaviour, to return to the same point (scroll position Y) after revalidating/changing the container contents.
I subclassed the Container-class to make setScrollY(int) visible. Using this with an arbitrary value does not scroll to the position, so it seems that the setScrollY method is not changing the scroll position of the content pane overall.
And myContainer.getScrollY() always returns "0". I only get the scroll position by calling getContentPane().getScrollY().
But it is obviously not possible to call the setScrollY()-method on the content pane - as it is not possible to subclass the content pane - to scroll back to the same position after revalidating the form.
Thanks for any advice!
Use border layout which disables the scrolling of the form/content pane.
Place your container (where you exposed setScroll) in the center and make sure to invoke setScrollableY(true) on that Container.
I have a full width navigation div on the left hand side of an angular system.
I've successfully set an id on the <li> for the active page when doing a full page load.
This is all done within my navigation directive.
The div scrolls when there is a long list of items in it.
What I am trying to do is scroll to the active element within the div but am having no joy.
Within my directive I have successfully found the id using:
element.find('#exampleId');
but am not sure how to get just this div to scroll to the relevant id.
Any ideas?
This would scroll to the bottom of a div with the Id messagesContentElement
let messagesContentElement = document.getElementById('messagesContentElement');
messagesContentElement.scrollTop = messagesContentElement.scrollHeight;
So you need to get the scrollTop value right. Maybe you can calculate this based on a fixed cell height?
I am trying to create a masonary style layout using isotope. The layout must be a responsive grid with flexible columns. However each grid item has an hidden text element which opens when the image is clicked. This text will come from wordpress and therefore as an unknown length. I am trying to use the
.isotope("reLayout");
function to reset the layout when the item is toggled however it does not work. If you alter the size of the browser when the text is visible you can see that that the isotope layout kicks back in and gives the desired effect.
I have created a codepen to illustrate my issue. Any help would be appreciated
http://codepen.io/GlynnJohnson/pen/bLBCJ
Thanks
You need top use:
$container.isotope("layout");
Not
$container.isotope("reLayout");
Codepen
Normally, the expand/collapse functionality in extjs works as the panel/grid header stays in a position and the body of the panel/grid moves down/up. But I need the panel header to be in a position and on expand, the header has to move up showing the panel/grid body. On collapse, the header has to move down and come to the original position. This is just like expand and collapse in accordian layout inner panel. But I want it with a single panel. Any code samples or pointer would be very helpful.
Note: Please note that I cannot use any third party plugin..
This sample in ExtJs 4.2.1.
One way to do what you are trying to achieve is by injecting "expander" div in afterrender event of parent panel before collapsible children. This means items are at the bottom of parent body after expander div so there is space to expand them up. When children are collapsed/expanded or parent is resized, injected div gets height of parent minus children.
You can see it here: https://fiddle.sencha.com/#fiddle/44c
Edit: I don't really get 1 panel part - if you want single panel to behave like that, expander could be injected into wrapper before header and content, but than you are left with panel of same size but collapsed - the only scenario this makes sense to me is by reversing collapse of children in sample I provided