On the WooCommerce post editor, once you scroll down to see the rest of the content, the sidebar on the right also switches to the fixed position so that you don't have to scroll all the way back up to publish, save or make any other changes through the sidebar:
<div id="side-sortables" class="meta-box-sortables ui-sortable" style="position: fixed; top: auto; bottom: 20px;">
However as soon as you scroll up, the sidebar disappears. it seems like the position switches back to absolute:
<div id="side-sortables" class="meta-box-sortables ui-sortable" style="position: absolute; top: -933.25px;">
and when you scroll back down once again, it re-appears. at first I thought that's how it functioned until I found out it was some sort of a plugin/theme conflict:
https://wordpress.org/support/topic/product-editor-sidebar-disappears-while-scrolling/
I installed the latest copy of Wordpress and Woocommerce with their default settings on a local server and it was the same. so it looks like it has nothing to do with any sort of plugin/theme conflict. I also tried this on three different browsers (Firefox, Chrome, Edge) and they all came up with same issue. I had a couple of errors in all of them but the one that caught my attention was the following warning on Firefox:
This site appears to use a scroll-linked positioning effect. This may
not work well with asynchronous panning; see
https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html
for further details and to join the discussion on related tools and
features! post.php
I also managed to get the sidebar fixed but then I couldn't scroll the sidebar itself:
#post-body.columns-2 #side-sortables {
top: 97px !important;
position: fixed !important;
}
So if there's a simple css solution to keep the sidebar static and scrollable, that's totally fine with me.
Edit: It is also worth mentioning that once I collapse all four boxes
on sidebar (Product image, Product gallery, Product categories,
Product tags), I will never experience any scrolling issue but as soon
as I expand any one of them, the sidebar will disappear once I scroll
up. weird!
I came up fixing the issue with a better alternative.
From the Screen Options on the top right corner of your editor, uncheck "Enable full-height editor and distraction free functionality". It'll limit the height of the description box to your desired size and you don't need to scroll through a long content.
Related
I'm coding a website and getting a strange behavior on the vertical scrollbar. This is happening on Chrome, Safari, and Firefox.
On IOS, it apparently is causing issues with page scrolling (i.e., it is difficult to get the page to scroll past the bottom of the initial view)
The puzzling part is that the undesirable effect only occurs when the viewport is sized below 683px wide
683px wide and above, the vertical scroll bar behaves normally (see attached graphic)
Website url is http://157.245.80.107
Any suggestions or insight? Thanks!
The theme is badly coded.
Whoever made it didn't bother to read the intro on do's and dont's for Bootstrap v3.4.1.
The quickfix would be to remove
overflow-x: hidden;
from line 9 of _main.scss (on html, body) and apply it to .main-container instead.
Another problem (same cause, basically) is the presence of class row on #navigation2 .navigation-header .mobile-main-nav. Either remove it if you can edit that template, or apply this CSS to counter the negative margins:
#navigation2 .navigation-header {
padding: 0 15px;
}
So when I scroll down from the landing page it sticks at the next section. I'm not sure whats happening. There's also a white bar at the bottom of my site that i can't get rid of. How do I fix a scrolling that seems to "stick" when it goes over a certain section and how do I fix white space at the bottom of my footer? Here's a link a github I created to show what I'm dealing with, too much code to copy and paste here to get a good answer
https://github.com/OakHarbor/mapletest
I checked the site, and the problem is you are using a BIG really BIG images in the background, images like "wood1.jpg" has a resolution of 6000x4000px this is a lot the other image "wood2.jpg" has almost 8200x5500px, just this image has 12mb this is like 4 times what a whole page should have of size, so when you're scrolling the page this images start to load so the "sticks" is the page suffering to load.
Your imagens should be something like 800x400 or even less and don't forget to optimize them there is tools in the web that remove all the unecessary meta information check here https://imagecompressor.com
And your "white bar" is that you set a id in your tag html "noScroll" and this css was apply to it, basicly this alow you to acess the content with scroll bars, if you don't need this feature just remove it that the white bar will disappear
#noScroll {
overflow: scroll;
}
For Stick Problem
Please keep the fixed background to scroll.
For Footer White bar
If you want to remove the white bar from the footer, please remove top: -50px from #footer id and use of margin-top: -50px instead of this and now It will be fixed.
I have on my website a sidebar that can come out from the side on mobile. It is a fixed element, which does not play nice on mobile browsers. I want to prevent being able to scroll the body of the document in order to fix this when scrolling on the sidebar div (but I still want them to be able to scroll the sidebar if there is an overflow).
Here is a video of what I want to prevent:
https://www.youtube.com/watch?v=uqWll2G2Km8&feature=youtu.be
Not sure if I'm understanding exactly what you are looking for, but I'm working on a section of a site right now that requires this type of sidebar that comes out from the side of the page. At first it was doing exactly the same thing for me as well, where the body would scroll while I was scrolling the sidebar content. After some testing it seems whether position: fixed or position: absolute, the only time the page allows me to scroll the side bar and not the content is when I set the
.main-sidebar-container { position: fixed; bottom: 0; }
There are other styles in there as well, but that bottom: 0 seems to be the key to allowing the side bar to scroll while not scrolling the body. I know you don't need to scroll your side bar but maybe setting your main-sidebar-container to bottom: 0 will help in this situation as well. I'll let you know if I come across any other findings as I continue with my own project. Good Luck.
A workaround I found was that if the sidebar is currently active, use JS to set the html height to 100% and overflow to hidden. Not sure how good this is in practice, though.
I am developing a design that is supposed to become responsive in the end. It also is supposed to look clean and simple. But while developing, I realized something: When I open the page on my Mac - Chrome - it displays fine. But upon resizing it, or opening the same page on a smaller display device, the bottom is cut off...
I have used the web inspector, changed everything that I saw to something else but couldn'T figure out where the problem is. So I really need help here, as I got lost.
The basic idea:
http://tympanus.net/Blueprints/SlidePushMenus/
The demo site:
http://dev.dragonsinn.tk
The code is hosted on a Gitlab repo on my server; here:
http://git.ingwie.me/ingwie/bird3/blob/master/cdn/themes/dragonsinn/css/main.ws.php
The problem is, that in order to simplify my CSS coding, I used my self-made CSS framework, WingStyle ( http://github.com/IngwiePhoenix/WingStyle ). It is meant to look like CSS, but offer better options for cross-browser compatiblity. So don'T get scared of the not-quite-CSS syntax :)
To reproduce the problem:
Open the site mentioned above, and resize your window. Then, open the right panel by hitting the pac-man icon (top right) and try to scroll down. You should not be able to see the version information. Resize the window, and at the bottom of the right panel, you may see a version string (BIRD#3.0.0-dev...).
How can I it possible, that it actually does scroll?
Without studying your code to deeply I'd suggest you change your panel css as follows:
.panel-side {
width: 240px;
/* height: 100%; replaced with bottom: 0*/
top: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
}
This will give you a 100% percent height container and all overflowing content will be scrollable.
This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.
The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).
I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.
I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.
Does anyone have any suggestions for doing this?
Ideally, when you select a link, the section called upon will float up to about the middle of the page.
Much thanks to anyone who gives this one a shot!
The default behavior for browsers is to scroll an anchor to the top of a view port.
If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.
You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.
<a style="position:relative; top: -70px;" name="myAnchor"></a>
Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.
<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>
You should find the line above works for FireFox, Chrome and InternetExplorer.