I have a set of data being displayed as a tree by the help of jstree plugin and jquery.
The data shows up perfectly in the tree structure. On expanding the last node in the tree the scrollbar appears on the right side of the div block.
Problem:
However if I navigate within the tree with the mouse over the scrollbar, the scrollbar keeps on scrolling down and does not go up.
I am at wits end what could the reason be. I am using a Mozilla Firefox browser.
Please help.
Sample Code below:
css:
.myScrollableBlock {
display: block;
height: 170px;
overflow: auto;
}
.jsp:
<div id="myTreeDiv" class="myScrollableBlock">
</div>
.js:
$('div#myTreeDiv').jstree({
// jsTree plugins
...
...
...
});
How to Solve
You just have to create another div, before the div where you instantiate the jstree, and add the class="myScrollableBlock" at the outer div. Like this:
<div class="myScrollableBlock">
<div id="myTreeDiv"></div>
</div>
Explanation
When you dinamically create the jstree, calling the jquery function
$('div#myTreeDiv').jstree({...});
It overlaps any the static css style specified before (class="myScrollableBlock" in your case).
You can make a quick check this way:
<div style="padding: 20px 20px; overflow: auto; height:170px;">
<div id="myTreeDiv"></div>
</div>
Why CSS is overlapped by JS?
When loading an HTML file, the browser executes the JS scripts after the DOM and the CSS files are built. Overlapping anything that has been done before.
Image source: https://www.sitepoint.com/optimizing-critical-rendering-path/
Related
Alright, I have no idea what I'm doing. I thought that there would be a library for this, but apparently there isn't.
Problem Explanation
I have a complicated React Application.
There exists
Main Page Element
A content container
A display container
The element I want to scroll to
I am trying to find a solution that will scroll to an element on a page and force all parent scrollbars to scroll to the appropriate location in order to view the element on screen.
Example
<html>
<head />
<body>
<div style="background:red; display: block; height: 1000px; overflow-y: auto">
Root Parent
<div>
<div style="background:green; display: block; height: 1000px;overflow-y: auto">
Another Parent
<div>
<div style="background:blue; display: block; height: 1000px; overflow-y: auto"></div>
<div style="background:purple; display: block; height: 1000px; overflow-y: auto">
<div id="targetElement">Scroll here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS Fiddle Here
https://jsfiddle.net/10f83ush/
Solutions I've tried
I found zen scroll
But in their How to Use Section - 1.4 they explicitly state it isn't supported
https://zengabor.github.io/zenscroll/#howtouse
I found this this thread here
Scroll all nested scrollbars to bring an HTML element into view
And I thought that would work but it doesn't.
If I do element.scrollIntoView that doesn't work either because it's got two sets of scrollable parent/grandparent that both need to scroll to.
Request
How the heck do I get all the parents of the target I want to scroll towards to all scroll towards the correct location to show the element on the page?
I feel like I'm going crazy. It's 2020 and I can't simply scroll to an element that's nested inside other scrollable elements?!
EDIT
To clarify, I'm not trying to do a million scroll bars at a time (Yes this is bad UI/UX), but the solution I'm searching for should support as many as possible. There are multiple solutions I've found where the answer has been solved, but only for one or two scroll bars and then ignored more than two. I would love for guidance or help on how to handle any amount of parent scroll bars when trying to scroll a nested element into view.
Without creating a more complicated solution I opted to use a library called scroll-into-view.
https://github.com/KoryNunn/scroll-into-view
https://www.npmjs.com/package/scroll-into-view
This library is AMAZING - and it does EXACTLY what I wanted which is scrolling elements into view.
Additionally it supports arbitrarily offsetting the scroll location, the ability to filter scrollable areas so that it doesn't change focus from the entire page, and a ton of other amazing features.
This was so good I decided to contribute to the patreon for it!
If you're looking for a solution I would suggest trying this library out!
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
I am pretty sure there are many articles on this. In fact, I have seen many that I have used before. The thing is, I am using Material Design by Google. So they have loading elements already in the framework. It looks something like this:
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
Previously I have had trouble with this kinda thing. If someone could help me out, that would be great.
Here is the link to what the loading animation looks like:
https://getmdl.io/components/index.html#loading-section (it is the spinner).
MDL spinner on page load solution
MDL just provides the spinner and it's up to the developer to integrate it into the page for what ever your need's may be. In this case you want to use it on page load.
Placing the spinner
To create a loading spinner you first need to place a <div class="mdl-spinner mdl-js-spinner is-active"> at the top of your document. I suggest right above the closing </head> tag.
Centering the spinner.
To center the spinner you can do it with flex box like so.
Place the spinner inside a container above the closing </head>
HTML
<div class="spinner">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
CSS
Centering the spinner with flexbox. The spinner is set to display:none to hide it from view atm . Adding a class of spinner-on and giving it the display property of flex that we trigger on with jQuery when we want to show it.
$spinner-size:100px;
html, body, .spinner{
height:100%;
overflow: hidden;
}
.mdl-spinner{
height:$spinner-size;
width:$spinner-size;
}
.spinner{
position:relative;
display: none;
align-items: center;
justify-content: center;
}
.spinner-on {
display: flex;
}
Trigger with jQuery
With jQuery we trigger our spinner-on class which brings spinner into view. Then we use fading functions to fade in the spinner and fade it out after a set amount of time. Overflow is also set se we can now scroll the page.
$(function() {
var overflow = $('body,html, .spinner');
$(".spinner").addClass('spinner-on');
$(".spinner").fadeOut(2000, function() {
$("body").fadeIn(2000);
overflow.css('overflow','visible');
});
});
DEMO
I am updating the webstore on my site to Ecwid. Since I used the Intuit Sitebuilder to build my site the page is a fixed size. I added a place holder in Sitebuilder to hold the script for the Ecwid store. However, some of the pages of my store run off of the bottom of the screen. I have contacted both Ecwid and Sitebuilder for help with this with no luck.
I need my store to be no longer than 1000px high and in the event one of the pages of the script is longer it will have a scrollbar to the left. Can someone please help me?
Here is a link to see what I am talking about: Dip Wizard Hydrographic Dip Kit Store.
You'll need to edit both html and css of your site:
html:
inside a div with id "element50", there's a div without an id. This is the container that you're worried about. You need to give this div an id, for example -
<div id="productInfo">
css: Then in your css - add these rules
#productInfo {
margin-top: 25px;
max-height: 1045px;
overflow-x: hidden;
overflow-y: scroll;
}
If this is very urgent and you can't find where to add/edit your css, you can add it in the html itself:
<div style="margin-top: 25px; max-height: 1045px; overflow-x: hidden; overflow-y: scroll;
But this is not recommended and should be replaced with proper css in the near future.
If I understand you correctly you want a scrollbar where the content is over 1000px, then i guess you should type in your css {overflow-y:scroll;} on your content element.
I have a set of divs like so:
<div id="textArea">
<div id="text"></div>
</div>
CSS properties:
#textArea {
height: auto !important;
min-height: 2em;
overflow: hidden;
}
#text{
display: none;
}
I'm filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.
I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.
I think you are simply doing too much - A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.
Hope that this points you the right way.
Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?