Bootstrap Affix not working on mobile - html

I try to use Bootstrap affix to make an element, during affix on bottom of page and on affix-top to top od the page.
I implement affix and on desktop it works like a charm but on mobile it doesn't work. I mean: on mobile there aren't the toggle of the classes and it remain always with affix-top class..
I use this code:
<div class="affix-div" data-spy="affix" data-offset-top="197">
<h1>Title</h1>
</div>
and css are:
.affix-div.affix {
bottom: 10px;
right: 10px;
z-index: 9999;
}
Why on mobile not change the classes??
(Sorry for bad english)

Bootstrap affix calculates offset based on document height, window scrollTop and the element's offset. One of the pitfall here is the $(window).scrollTop. According to the overflow specification, if you set the body's overflow property neither to visible or clip values, it makes the body a scroll container and scrollTop wont work anymore, because now the body is a scroll container and scrolling takes effect inside of it, not in the window.
Look for the body overflow, overflow-x or overflow-y properties and set the values to visible. If you need the overflowing effect, just wrap the body's content inside of a another element and set the overflow there.

Related

Using Navbar fixed-top and keeping container below it fixed to its bottom even upon scrolling?

I am using “navbar fixed-top” from Bootstrap. And underneath it I have a container. What I noticed is whenever I scroll down the page, the container underneath the navbar starts to slide below the navbar (refer to attached photo). I am aware that this is an expected behaviour with fixed-top, but I am wondering is there away to always keep the container below the navbar fixed to its bottom even when the user scrolls down?
Get the height of your fixed element, let's say 50px, and then:
body {margin-top:50px}
Please add the header height as the margin-top of the container.. for example..
css
.container {
margin-top:100px; /*height of the header*/
}
OR
JQUERY
var headerheight = jQuery('header').outerHeight();
jQuery('header').css("margin-top",headerheight);

CSS background does not fill all page properly when scrolled horizontally

So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (https://trello.com). Where you can add cards, delete cards, etc.
I have this background problem where the background does not cover the whole page when I scrolled horizontally,
Here is the problem I have:
As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.
Here, the background is white when I scrolled horizontally. It does not cover the whole page.
Here is my Html code:
<div class="container" id="amethystBackground2">
<!-- contents here -->
</div>
Here is my Css code:
#amethystBackground2
{
position: relative;
background-color:#9B59B6;
//This is needed to remove white space on top of page
margin: 30px 0 0 0;
//This is needed to for the background cover the whole page when scrolled verticallly
//(when you have too much cards, you need to scroll down)
min-height: 100vh;
min-width: 100vw;
//This is needed give space on top of page
margin: 50px 0 0 0;
}
I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.
I also tried width:100% and 'height:100%', But it does not work.
Please help me, Thank you in advance.
The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.
First solution
Set your background-color to your body instead of your container div.
Just move background-color:#9B59B6 to
body {
background-color:#9B59B6;
}
Second solution
The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.
<div class="container-fluid" id="amethystBackground2">
<!-- contents here -->
</div>
More about container-fluid here.
You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:
<div id="amethystBackground2">
<div class="container">
</div>
</div>
Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.

Making fixed div's able to horizontally scroll

My website has a fixed width of 1024px to easier implement for smaller screens, the header and the footer that are displayed are in a fixed position.
However when the users has a smaller width than 1024px the header and footer are cut off, which is fine. However you cannot horizontally scroll to see the rest of them.
I imagine to fix this it'd be something to do with the CSS, however I'm unsure on what properties to change / use.
The pages are constructed like so:
<body>
<div class='header'>
<div class='headerbar'>
<div class='headerleft'><h1>BMRA Web Client</h1></div>
<div class='headerright'><!--image here--></div>
</div>
</div>
<div class='footer'>
<div class='headerbar'>
<div class='footerleft'></div><div class='footermiddle'></div><div class='footerright'></div>
</div>
</div>
</body>
That's as simple as put overflow-x: auto in your header with 100% width.
.header {
overflow: auto;
}
By this mode, you'll have a header with 100% of width, in small screens you'll see how it shrinks. With the hard pixel definition of the elements inside the header (as 1024px), your content will have this width and the overflow in the parent allows you to scroll it horizontally.
If this doesn't fits with your requirements, maybe you need a global scroll solution, that can be made with simply javascript.
EDIT
As we talk in comments, your solution will be to handle global horizontal scroll and move the fixed header with the content, like a relative or absolute header. To make this you need javascript to read how many pixels you need to move the fixed header. Here you are the complete code:
// when scroll
$(window).on('scroll', function(e) {
//calculate left position
var left = $(this).scrollLeft();
//apply to header in negative
$('.header').css('left', -left);
});
Do you like to see it working? Try this fiddle:
http://jsfiddle.net/fbvat00q/
EDIT 2
As far as you need to have the background fixed, you must to relativize the children and target it in the javascript. So your final code will be:
CSS:
.headerbar {
position: relative;
}
Javascript:
$(window).on('scroll', function(e) {
var left = $(this).scrollLeft();
$('.headerbar').css('left', -left);
});
See it working:
http://jsfiddle.net/fbvat00q/1/
If the main wrapper (that one which is set to width: 1024px) doesnt have overflow: hidden as a property, you should be able to scroll horizontally. Try to set it manually to overflow: auto
Loot At This Real Example
You can set wrapper with overflow: scroll, and fixed position, and set for inner value, or spesfic style you want
To manage abehaviour when content overflow a container(both vertical and horizontal), with fixed dimension, you can use the CSS overflow property (see this link for more details):
scoll : to scroll when content overflow
hidden : to hide the overflowed content
visble : to see the overflowed content even if it does not fit the container
In your case you have to set the property to scroll
.selector{overflow: scroll}
If you want to only manage horizontal overflow, you can set overflow-x CSS property .selector{overflow-x: scroll}
For the vertical overflow you can set overflow-y, .selector{overflow-y: scroll}
Try setting overflow to scroll horizontally. e.g:
.header {
overflow-x: scroll;
}
As here: W3C Link

Stick DIV to bottom of page for desktop and mobile

I have an image that i want at the bottom right of my page with no margins on either the right or bottom. The code i have right now works great on the desktop.
<div id="test">
<img src="rat.png">
</div>
#test{
position:fixed;right:0;bottom:0;
}
The desktop view of the page has no scroll as all the content fits on the page without needing to scroll down. However the page is responsive so viewing it on a mobile collapses some elements and there for you need to scroll to see all the page. On mobile the image is not fixed to the bottom of the page, it is fixed to the bottom of the screen so when scrolling down it follows, i want it stuck to the bottom of the page if you need to scroll down to view it or not.
Any help will be appreciated.
For example the page is: http://dynamowerk.de/PixDive/test/
but if you view it from here http://mobiletest.me/ you will see the problem
Change the position from fixed to absolute.
Fixed constrains an element to the browser window, whereas absolute will constrain the element to a containing element.
In your case it would be best to have the div as a direct child of <body>.
According to CSS specification the element with position: fixed is positioned relative to the browser window (screen) whereas position: absolute is positioned relative to its first positioned (non-static) ancestor element.
So, in your case the code may looks like:
CSS
html,body
{
height: 100%;
}
#test
{
position: absolute;
bottom: 0;
right: 0;
}
HTML
<html>
<head></head>
<body>
<!-- some other tags -->
<div id="test">
<img src="rat.png">
</div>
</body>
</hmtl>

position fixed and webkit overflow touch issue ios 7

I'm having a responsive website which has the menubar as a sidebar (like FB app) which is fixed via position: fixed; to the right corner. This works fine so far except for iOS7 in combination with -webkit-overflow-scrolling: touch;. The fixed element does not stay at its position, moreover it jumps to the fixed position after the scroll is finished.
Does anyone of you have an advice?
Thanks
I've been struggling with exactly same issue for the whole day, the conclusion is, yes, there is a bug when you position an element as 'fixed' within a container with '-webkit-overflow-scrolling: touch' in Apple screen devices. And I couldn't find any work around. '-webkit-transform: translate3d(0,0,0)' nor '-webkit-backface-visibility: hidden' make any difference.
So finally i got it working by reassembling my html structure, so the fixed element is not within the scrollable container, is in an upper layer. Maybe not ideal if the 'body' is your scrollable container, but hoping it shed some light for a possible solution.
Extending it with a simplified example:
<body>
<sidebar></sidebar>
<div id="content-wrap">
<article></article>
<footer></footer>
</div>
</body>
And CSS would look like:
sidebar{
position: fixed;
}
#content-wrap{
-webkit-overflow-scrolling: touch;
}
Basically the bottom line is, don't position as fixed an element which exist within a scrolling touch container. You have to take it out if you don't want to deal with that iOS weird problem.
I was able to solve this problem by dynamically changing the -webkit-overflow-scrolling style to auto whenever a button was triggered to show the position: fixed div (which is inside the scrolling container).
I simply add the dont-scroll class.
.container{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
-webkit-overflow-scrolling: auto; /* The fix */
}
Once the position: fixed div is hidden (in my case, when a user clicks the 'cancel' button on the popup modal), I dynamically remove the dont-scroll class to enable the smooth scrolling once again.