I'm creating an AngularJS application which has a loader, but since angular is really fast (yay), the page jumps between the loadings (nay :/) - what happens, is when the loading screen comes up, the scrollbar gets hidden and when a new page loads, the scrollbar is put back, this creates a flickering in the menu(always visible) part on top of the page.
Same thing happens when I open a pop-up or smth. like that. I add overflow: hidden; to the body in DOM so the user can't scroll when a pop-up is opened, but again this hides the browser scrollbar and the page jumps.
Any ideas how to solve this UX problem?
Ok, found a rather simple solution
html {
height: 100.001%;
overflow-y: scroll;
}
Related
I'm not sure how to make the 'Popover' component of Material UI remain fixed on the screen when I open it. Because when I open the popover (https://mui.com/material-ui/react-popover/) It's not blocking the scroll and the box that appears after clicking is moving along the entire page. I don't want to keep the scroll bar visible while popover is open.
I'm using the latest version.
Image below
enter image description here
You can add overflow: hidden; to body element and remove it on close :) Tho its a weird behavior in docs as in source code there is no such thing, yet it happens
I previously tried using overflow-y: scroll; in a parent div, which indeed permanently displayed the y scroll bar, but it stopped the React Infinite Scroll Component from triggering the "next" function.
The reason I want to do this is that, without it, the screen flickers while navigating the site. This is caused by the scroll bar being hidden when there are no results (during loading, some pages don't have many results) and being displayed when there are lots of results.
I figured out what the problem was. I was adding overflow-y: scroll; to a parent layout div but not to the html body. If I add it to the body, then I can permanently display the scroll bar with overflow-y: scroll and the React Infinite Scroll Component next prop is still triggered on scroll.
For screen max-width: 479.98px menu has width: 100%; and body has class .lock {overflow: hidden;}. When menu is collapsed, class .lock is removed. It works well when I test it on small screen simulator on my PC, but on mobile I found a bug: if top bar of mobile browser is visible, there is no following the menu link, while menu collapses as it should, and I see the anchor at the url. But if browser top bar is hidden, everything works fine! And there is no problem for wider screens, with no overflow: hidden for body.
Tob bar visible, no links following. screen 1
Tob bar hidden, no problem. screen 2
Code: https://github.com/randominical/transys_demonstration
Demonstration: https://randominical.github.io/transys_demonstration/ To see the problem open it on mobile not bigger then 479px!
UPD: I'm nor sure anymore that the point is about the screen width. First of all, please test if you see the bug on your device.
I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
How to correct this?
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
to:
<body style="height:580px;width:800px;">
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
To:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
Thus, my prefered solution is to use JavaScript. In options.js add something like:
function setBodyHeightWidth(){
let width=window.innerWidth;
let height=window.innerHeight;
height -= 20; //Adjust for Save button and horizontal scroll bar
//document.body.style.width=width; //Does not work
//document.body.style.height=height; //Does not work
document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}
function onDOMLoaded(){
setBodyHeightWidth();
//Anything else you need to do here.
}
document.addEventListener('DOMContentLoaded', onDOMLoaded);
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like:
I have read the below article/tutorial
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
I am trying to make this work from angularjs, below is the fiddler
http://fiddle.jshell.net/cZs5y/
Its working with following two issues.
Mouse click hand icon visible allover the page. ( I want it to be visible only on the button).
On Mobile devices, I am seeing little delay and flickering effect.
I am new to Angular, any ideas how to improve this.
Update: Issue 1 solved fiddler link.
Update 2: After adding "ngTouch" module there is no delay on mobile but flickering effect is still there.
Make .perspective.modalview and container cursor property to auto to remove unnecessary pointer from the screen. also add style="cursor:pointer" to button.
css:
.perspective.modalview {
cursor: auto;
}
.container{
cursor: auto;
}