I found this overlay scrollbar (https://github.com/KingSora/OverlayScrollbars) which is absolutely perfect except for one detail... it screws up the sticky footer.
The sticky footer I'm using is straight from the template in Visual Studio when creating a new .net core mvc project. For convenience though I'll copy the relevant styles here:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 45px;
}
After including the appropriate css and js files in the appropriate places, I initialize like so:
<script>$("body").overlayScrollbars({});</script>
But this causes the footer to always show up even when the page is not scrolled to the bottom as shown in the attached picture. I've been tinkering with styles but I really have no clue how to fix this or why it's even occurring to begin with.
Related
I'm trying to use the "stars" example as a simple background in a html page, with html content on the page as well (I'm far from being into js. - simple html- and css-handling is ok).
What do I have to put into:
- css (separate or inline)
- html head
- html body
I'm just looking into the .js use as a background. I managed to strike the mouse parameter as vector defining out of the stars code. This runs ok now just as is, but I either turn up in showing just the .js or the html content with missing the stars background. Thanks alot in advance!
This is what I have setup in my CSS
body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
margin: 0px;
padding: 0px;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
Hope this helps
I'm using CSS position: sticky to stick some elements to my page. I'm using <div>s to produce a grid-like structure (<table>s aren't appropriate to my use case). Please note that this is specifically a position: sticky question - I'm not looking for a Javascript solution, and I believe that position: sticky should work as desired based on the spec and the behaviour in other browsers.
I need to stick a row for vertical scrolling, and the first cell in that row for horizontal scrolling. If I use position: sticky; left: 0; on the first cell without sticking the row, the cell sticks to the left just fine. However, in Safari if I use eg.
.row {
position: sticky;
top: 10px;
width: ...
}
.cell {
position: sticky;
left: 0;
width: ...
}
the row sticks when vertically scrolling as desired but the cell does not stick when horizontally scrolling.
The code behaves as desired in Chrome and Firefox, and in an iframe in Safari.
Here's some code for a minimal example:
CSS:
.row {
position: -webkit-sticky;
position: sticky;
top: 10px;
white-space: nowrap;
width: 2000px;
z-index: 30;
}
.cell {
display: inline-block;
width: 100px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
font-weight: bold;
}
HTML:
<div class="row">
<div class="cell sticky">Sticky</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
...
</div>
Uploaded files here (can't use codepen/jsfiddle as they load into an iframe):
https://qcn.github.io/minimal_sticky.html Minimal example: doesn't work in Safari, works in Chrome/Firefox
https://qcn.github.io/minimal_sticky_iframe.html The same minimal example loaded into an iframe: does work in Safari!
Another interesting thing I noticed was that if I scroll the page horizontally and then refresh, the sticky cell renders at the left of the viewport, and then scrolls normally in that position (ie. it still doesn't stick, but it knows where it should have been on page load!). This and the fact that the behaviour works inside an iframe and in other browsers makes me suspect it's a browser bug, but I'm unable to find other references to it.
Try adding a unit. It worked when I wanted to sticky a nested header to the top. I haven't tried your horizontal situation. Hope it helped.
left: 0px; instead of left: 0;
This appears to be an instance of this bug: https://bugs.webkit.org/show_bug.cgi?id=106062
I worked around my issue by wrapping the page in a scrolling div to contain it, rather than using viewport scroll. Not ideal but it appears to be a browser bug.
I finally found a solution to this!!!
using display: contents;
https://css-tricks.com/get-ready-for-display-contents/
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
I am working on testing a site on all browsers before starting device adapting with media queries.
I have found an issue: when any element is dynamically affected, the overflow:hidden property does not work anymore for that element on Chrome.
You can see it here: http://germanalvarez.net/5/
After loading the site, click on the MENU button on the bottom right of the panel, and click on any section:
If you are in Chrome, the top part of the panel (classified as .titlePanel) will no longer remain overflow:hidden, so the overflowed part of the icon will go out of the titlePanel (see image). This only happens when changing section.
If you are in Firefox, even after changing section it will remain hidden, so here, it works OK.
I found a supposed solution on the web: style elements on its tag. If you check my code you'll see .titlePanel has this opening tag, but it doesn't work either:
<div class="panel titlePanel expanded" style="overflow: hidden;">
This is caused by the use of position: fixed :
.titlePanel [class^="icon-"]:before,
.titlePanel[class*=" icon-"]:before {
font-size: 16em;
left: 79%;
line-height: 100%;
margin: 0 0 0 50px;
position: fixed;
}
As you're using fixed, your pseudo-element is totally out of the flow. It's no longer affected by any overflow: hidden on its parents.
To fix it, remove this fixed position and use absolute instead :
[class^="title-"] {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
[class^="title-"] i {
position: absolute;
right: 0;
top: 0;
}
I'm attempting to style Wikipedia. I'd like to place the table of contents in a sidebar; however, I've come up against a few obstacles. I'd like to:
Vertically center the table of contents if it's shorter than the
viewport height.
Remove the scrollbar on long tables of contents while retaining scrolling ability.
Specify a sidebar %width and min/max widths, and have the body content fill the rest.
Please see this for a visual.
Here's what I have so far:
#-moz-document domain(wikipedia.org) {
#mw-navigation, #toctitle, #footer {display:none;}
/* Place table of contents in a sidebar */
#toc {
height: 100%;
width: 20%;
min-width: 150px;
max-width: 250px;
position: fixed; /* don't scroll with page. */
top: 0;
bottom: 0;
left: 0;
overflow: hidden; /* hide scrollbar, but... */
}
#toc > ul {
background: lightblue;
overflow: scroll; /* ...still allow scrolling? */
/* center vertically if shorter than height of viewport */
display: table-cell;
vertical-align: middle;
}
#content {
/* How to have contents fill the remaining width? */
}
}
Does anyone have solutions to these? Are they even possible?
I created a userscript which allows me to define custom links that display both horizontally across the top of Wikipedia as well as in the navigation panel which sits along the left side of the page. I copied it over to Gist in case anyone is interested. It should help you accomplish what your looking for I think:
Wikipedia User Defined Navigation Links (Gist)
To use this code you need to find your Wikipedia theme JS file which is going to be a subpage to your userpage. Mine is here. You can find yours by clicking this link which will automatically direct you to the appropriate location. You should be logged into Wikipedia first, and then click here.