Fixed div on mobile is not fixed - html

I need to have an action bar fixed to the bottom of the screen.
The following CSS works well in desktop mode :
<div class="slds-p-around--large actions">
<lightning-button-stateful
label-when-off="Check All"
label-when-on="Uncheck All"
label-when-hover="Uncheck All"
icon-name-when-off="utility:check"
icon-name-when-on="utility:close"
icon-name-when-hover="utility:close"
selected={selected}
onclick={handleMasterSelection}>
</lightning-button-stateful>
<button class="slds-button slds-button--success" onclick={handleApprove}>Approve</button>
<button class="slds-button slds-button--destructive" onclick={showConfirmationModal}>Deny</button>
</div>
.actions{
position: fixed;
bottom: 0;
width: 100%;
background-color: #F3F2F2;
left: 0;
display: block;
height: 8vh;
z-index: 10000;
}
But in mobile mode it doesn't work, the div isn't fixed. I have to scroll to the bottom of the page to see it.
Any clue about that?

Just change the background-color: #000; and remove left: 0; it should work.

The issue was caused by Salesforce's Mobile App Web container, whose custom scroll prevents position: fixed to work correctly.
After a thorough investigation, I found out that the issue is caused by Salesforce’s mobile app web container, which does not use native window scrolling but instead, translates the content using CSS like translate3d on the swipe down event.
I don’t know why they did that since it breaks the position : fixed CSS among other things.
The workaround I found was the following :
Set something like
max-height : 90vh ; // Can be changed to suit the size you want your « fixed » element to have left
overflow-y : scroll ;
on the content of your page the have your content scrolling without scrolling the page itself. You can then put the content which you want fixed at the top or Bottom of the content, which will imitate the behaviour of a position fixed.

Related

Fixed menu link on iOS 15 only working after scrolling down

I have what seems to be a simple issue with a website on iOS (testing on my up to date iPhone 13), but I just can't seem to find a fix that works. Starting to pull my hair out as it seems to be a bug rather than an actual issue with how I'm laying out the page.
The website has a very simple header that is fixed in position, which contains an absolutely positioned menu button on the right hand side. (Edit: just to clarify that the button triggers javascript to open a full height menu div that covers the left side of the window. All this part of the functionality works correctly, it's just that tapping on the button to open this navigation box does nothing until I scroll down)
On desktop using Chrome dev tools everything works fine at all browser sizes.
However, on iOS when loading the page the button is not clickable. If I scroll down slightly suddenly I can use it. Scroll back to the top and I can't use it anymore. This happens even if I remove all other content from the header leaving nothing but the menu button. I've tried everything I can think of but just can't get this button to work when the page hasn't been scrolled.
It seems like an issue of something covering the button, but there is nothing. Even with the header otherwise completely empty I get the same issue, and the content clearly can't be covering it as it visibly scrolls behind the header.
This is the css/html which I believe to be relevant: (#page contains the rest of the document and is padded to clear the fixed header. I have also tried removing the padding and using an extra div to push the content down as well just in case padding on a top level element was messing with things). ui-container is used to limit the width on large screens and simply has width:100% on smaller devices.
#top {
position: fixed;
width: 100%;
z-index: 10;
}
#header {
background-color: #fff;
padding: 20px 0;
}
#mobile-nav-btn {
display: block;
position: absolute;
top: 24px;
right: 20px;
font-size: 22px;
cursor: pointer;
}
#page {
padding-top: 113px;
}
<body>
<div id="top">
<header>
<div class="ui-container">
<a id="mobile-nav-btn"><i class="fas fa-bars"></i></a>
</div>
</header>
</div>
<div id="page">
... content ...
</div>
</body>
Please use:
<button onclick=“window.scrollTo(0, 500)”></button>
Well it looks like it was the menu itself causing the problem as it was hidden using opacity and moved to top: -100% to get it out of the way. Seems that iOS messes around with the document height and this causes problems in some instances.
This may be specific to devices that have a rounded display, or may also affect all iOS devices as I know that the fact the address bar & navigation buttons auto shrink/hide on scroll can also play havoc with positioning.

How to make the footer fixed through scrolling

I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible
I tried using position: fixed , flex
But none of them worked
footer
{
margin-bottom:0px;
background-color: black;
background-color:rgb(11,132,69);
color: white;
}
<footer class="container-fluid text-center">
Some text
</footer>
you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:
CSS
position: fixed;
left: 0;
bottom: 0;
One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)
Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.
Code Playground Example
I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.
Demo
One Small Note
position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed.
- position: sticky is currently experimental and not supported in IE.
You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.
footer {
position: fixed;
bottom: 0;
}

How can I prevent the Android keyboard from auto-scrolling to the bottom of a modal window on text input focus?

I'm currently working on a website with member search features, and I have a modal window containing a contact form which, on specific user interaction, pops up over the rest of the content. The modal itself has a position: fixed property and is scrollable. However, when I select a text input and the keyboard slides up, the modal's content is scrolled to the bottom, placing the selected input outside the visible area and breaking UX flow pretty badly (since you have to scroll back up to be able to see what you're typing). Is there something I'm missing or some random property messing with scroll detection?
Oddly, this is a problem I've only encountered on mobile and tablet Android browsers (notably Chrome and Firefox), and not on iOS (both Chrome and Safari). I've also made sure to lock multi-platform and multi-browser page scrolling with this JavaScript library.
Consequently, I've tried a few things already, none of which have been successful. I tried to hard-code the height of the modal to the viewport height using JavaScript (it was originally set at 100vh), and while the scrolling stopped, I was left with an unreachable area at the bottom of the form (most likely equivalent to the height of the keyboard) containing half of a field and the submit button, which isn't really a fix in itself. I also tried to use absolute positioning with a top value forced to the current body scroll position, without success.
HTML:
<section class="modal__container row row--h-center wrapper">
<div class="modal__content">
<!-- Form content (title, subtitle, fields) -->
</div>
</section>
The row and row--h-center add a flexbox display to the container with centered horizontal alignment.
CSS:
.modal__container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000000000000;
pointer-events: none;
overflow-y: scroll;
.modal__content {
position: relative;
width: 80vw;
margin: auto 0;
}
}

How to get 100% height of page content when using a MDL fixed header in Chrome?

I'm trying to make a page with a fixed header using material design lite. The problem is that I can't get the entire space of the page-content div.
Suppose I wanted to paint red the whole page except for the navigation bar. This works on Firefox:
<div class="page-content" style="height:100%">
<div style="background:#ff0000;height:100%"></div>
</div>
codepen : http://codepen.io/anon/pen/qONpXQ
This exact same codepen doesn't work in Chrome. How can I get the whole space in Chrome? I don't really care if the solution breaks the page in Firefox.
I created a different solution. The problem with using vh to set a content container's height is that if the content becomes a lot it will overflow the background color since the div is now a fixed height.
In this code pen I have created a "background-color" using a pseudo element which allows the content to scroll as usual but have the background still.
http://codepen.io/mcclaskiem/pen/YyWYoP
.page-content{
background-color:red;
height: 100%;
width: 100%;
&:after {
content: "";
height: 100vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
For some reason "page-content" on chrome doesn't work with percentages, no matter what I do. My advice to you would be to either use the parent div for your content, or to define the height of "page-content" in ems or pixels.
I personally have a similar issue right now and I honestly can't get it solved
Edit: mcclaskiem solution works better try out this codepen

CSS - Dropbox website footer effect?

See dropbox's site here: https://www.dropbox.com
Notice how the footer "Learn more" stays at the bottom until you click or scroll down, no matter how much you resize the window?
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;
Above is CSS for the footer part but thats not causing the effect.
How can this effect be achieved, I cannot figure it out.
I assume you're talking about that front page that always fills the whole browser window with the "learn more" sticking to the bottom of the window?
There are multiple ways to do this, here's one:
Put your first page in a <div> (or any other container) and set it's height to 100vh, which will always resize to the height of your browser window (100% of the view height).
The link "Learn more" is then simply attached using position: absolute;.
The following pages can then take any height, although you can use the same technique to make pages you can scroll through (similar to a slideshow).
You can try it using this fiddle.
Position:fixed is what you want, not absolute.