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;
}
Related
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
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?
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.
I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.