I have a button I need to position at the bottom of the page in the right side.
https://jsfiddle.net/zuk80g6L/
button {
position: fixed;
right: 16px;
bottom: 16px;
}
That button should move further into the screen (like right: 24px if we assume the scrollbar is 8px wide), when the scrollbar is visible. Right now it just pretty much says the total view is 1920 pixels wide. The button should always be 16 pixels from the right side.
I need to take this into account:
Is the scrollbar visible
What's the width of the scrollbar
What if there is a scrollbar, but it isn't changing the site (like on a phone)
It has to be fixed
Basically if there is a scrollbar, move the button further left onto the site.
How is something like that possible? Thanks
Use these solutions to get if scrollbar is presented:
How can I check if a scrollbar is visible?
Detect if a page has a vertical scrollbar?
Based on that trigger the class/css for the button, like
if (hasScrollbar) {
/* Move button right for 8px */
}
In addition, you can get scrollbar width
I have done some modifications on you code.
First I added a div that i used as a container and gave it Id #content
to check if the scroll bar is added to the page check the height of the content div and the window height. if the window height is smaller then the scroll bar is added and we give the button a right 24px;
here is the js script that does the job
var contenth = $("#content").height();
var windowh = $(window).height();
if (contenth>windowh){
$("#bottom_button").css('right','24px');
}
and the updated jsfiddle
P.S it cannot be made without css.
Related
I have a side-menu on the left, which expands from the left to the right on hover and also on a button click. Also, I have a footer which is fixed (on the bottom), my issue is when the side-menu expands, whole page content resizes but since footer is fixed, it moves on the right and goes out of the screen, buttons are not visible anymore. When i remove class which makes footer fixed, footer also resizes without going outside the screen but then it is not fixed.
What is the solution to resize fixed footer when the side-menu expands. I am using Bootstrap 5 in react.js typescript
I tried using bootstrap 5 rows and columns but since it works on a screen size, it does not give me the result
footer css code:
.footer {
position: fixed;
bottom: 0;
width: 92.5%;
background-color: #fff;
}
This is something that I observe on Chrome on mobile (Android). If I have a div with that's using sticky for the position property and is positioned relative to the bottom, the div will be properly aligned when the page is first loaded, but when scrolling the page so that the browser's navigation bar gets hidden, then the div will jump up and no longer be aligned to the bottom.
Here's an example, using this div
<div style="background-color: red; position: sticky; bottom: 0">Hello world!</div>
I suspect the position is not being recalculated once the viewport gets resized. Is this a bug or is this the intended behavior? What's a good way to trigger the repositioning of the div (ideally without JS)?
I haven't been able to find a solution without JS, so this is roughly what I'm currently using.
Inside the div that I wasn't to sticky to the bottom, I added a div with fixed position and transparent color
<div id="hiddenDiv" style="position: fixed; color: transparent;"></div>
And then add some code to change the contents on a resize event
var repositionKey = false;
function onResize() {
repositionKey = !repositionKey;
document.getElementById("hiddenDiv").innerHTML = repositionKey;
}
addEventListener("resize", onResize);
This seems to trigger the position recalculation for the parent element and keeps the sticky div in the right place.
I have div with the id #sy-whatshelp for a floating chat head which has the property Position:fixed as I want it fixed on the bottom right corner of the viewport. The css for the div is
#sy-whatshelp {
right: 15px;
bottom: 15px;
position: fixed;
z-index: 9999;
}
The issue is that in chrome mobile browser when scrolling down very fast, the touch area of the div shifts up even though visually the div stays in the correct position as defined by my css. How do I make the touch area of the div stick to the correct place too as defined by my css.
Here is a video link of the problem in chrome mobile dubugger connected to a pc using adb. You can see that the highlighted portion identifying the div goes up while scrolling down but visually its in the correct place.
https://imgur.com/a/yJBUMdR
I have tried this solution with no avail
Position fixed on chrome mobile causing element to move on scroll up/down
Here is the image of my current page: image
As you can see there's a scrollbar and I want to disable it but not by set overflow to hidden and something like that.
I want to disable it by resizing elements on the page.
Can anybody help me?
The code below can make your scrollbar invisible but still work:
.class-of-your-container::-webkit-scrollbar {
width: 0px !important;
height: 0px !important;
}
2.If you mean disable the scroll behavior,then you should make sure your document content's height won't exeed the window's height.It is hard because the users screen's height is not the same.To acheive this,you can add height:100% to your container element.
We have long table and I want the horizontal scrollbar to always appear in the bottom of the viewport.
We don't want to use a custom sidebar.
I've seen this question: How can I make the horizontal scrollbar for a DIV always appear fixed on the bottom of the page? but I want the table to be long (and not to set height on it) and to have one main scrollbar on the page (we have more widgets).
I tried:
.containerClass::-webkit-scrollbar { position: fixed; bottom: 0px;}
but it didn't work.
Any idea?