I've got a viewport fixed in size (blue rectangle in illustration). Within this viewport I've got my content. Whenever the content is greater in size than the surrounding viewport, I want to be able to scroll. This so far works just fine.
The problem I'm experiencing comes into play as soon as I transform my content. Let's say I want to scale and translate it in order to show a certain area in higher detail.
After this transformation I still want to be able to reach every corner of my content with the scrollbars of the viewport (green in illustration). But I can only croll right and down. Everything above and left of my translation can't be reached with the scrollbars.
Is this just how things are, or am I missing something? Is there a good solution to this?
Related
I realize that hard to envision without the code etc.
Basically, with SlidesPerView set explicitly (say to 2 or 3), each slide locks to left edge just fine after swiping, and right edge also lines up. Note that SOME of the slides have 'Scroll-Y : Scroll' via an extra class.
As soon as I change SlidesPerView to 'auto' and try to set one slide in the middle wider, all the 'sliding/locking' gets progressively offset from the left edge, now cutting off more and more of the right-most slide!
I have worked hard and confirmed that REMOVING that scroll class fixes the problem.
Tried setting the scroll via 'swiper-slide' class. Tried '!important'. Tried messing with the width of the other slides. No dice.
Seems that with 'SlidesPerView' at auto, SwiperJS does not account for system scrollbar width?
Using Clarity and Angular 6, I have a card in the main content area that I'd like to have fill the length of the current view (no more, no less). The only way I found that comes close is to set the height to "-webkit-fill-available" (only using Chrome right now).
The problem with this is that there seems to be a tiny bit of space at the bottom that's causing the content area to show a scroll bar.
Ideally I'd like to never see a scrollbar in the content area and make all the content fit within the current screen height.
Here is a stackblitz example that demonstrates the problem.
Your solution is not a standard and would not work on IE/Edge, and might not work well with Safari per https://caniuse.com/#search=fill-available.
You could try giving it a height: calc(100vh - 5.5rem);, which gives the card a height of the view port, but subtracts the heights of the header bar and margins of the card and content areas. Ultimately, to use CSS to calculate heights you need to know what other elements are on the page and calculate against those known heights, or else you'd have to do something with JavaScript to inspect the elements of the page to find the available space.
The offending website: http://www.jasonmfry.com. The corresponding codepen: https://codepen.io/Auslegung/pen/Roapwv.
Scroll down until you can see a half inch of the image at the top of your screen, and you will notice another half inch of white above that. I want the images to fill the container and not leave that white space above themselves. I have tested this on the latest Chrome and Safari builds on Mac. On iPhone Chrome and Safari there is no white space, fwiw.
Removing line 88 of styles.css background-repeat: no-repeat fills that white space with the bottom of the image, but of course I don't want that. Reducing the scale value on line 94 transform: translateZ(1px) scale(1.08) will reduce the amount of white space shown, but at the expense of the parallax scrolling effect. How can I get the images to fill up that entire area, while still exhibiting parallax scrolling?
I've done a lot of googling and experimenting and haven't been able to figure anything out. Let me know if I'm missing any info that you need to help me out. I'm also having issues with image ratio during browser resize but that's another question altogether.
I used to be a WDI instructor, and actually probably would have taught your particular online class but left to go work on other things. Kudos on using StackOverflow! Say hi to Marc, Matt, and whoever else is around. :)
The issue here is that by default scale resizes things relative to the center of the element. You want it to center things relative to the bottom of the element.
Putting it another way: think of scale as sending out little arms to the edges of your image to pull in the edges. By default, the arms reach out from the center of your image and pull in all its edges equally. You want them to reach out out from the top of your image and "pull" up the bottom edge.
TLDR, just add this line: transform-origin:bottom;!
Edit:
The issue here is actually with the dimensions of the images themselves.
As long as the ratio of the window's height/width is greater than the image's height/width you won't have any issues, but once the window's ratio is smaller than the image's ratio you'll see that whitespace.
Your headshot is almost square, whereas the other images are very rectangular. If your browser window is wider than it is tall the headshot will behave, but resize the window to be taller than it is wide and you see the whitespace again. Conversely, make the window much shorter than it is wide and all the images will behave themselves.
You could resize all the images to be narrow and tall. The largest aspect ratio on devices is 16:9, so make the images <9x wide and >16x tall and you should be good.
Unfortunately I don't think there's slicker solution for this other than using Javascript.
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope
Dear Overflowing Stackers,
My page is proving to be a real pain the behind. I was experiencing this problem:
background is only as wide as viewport
and I tried to remedy it by putting a min-width on the body. That works just fine; everything displays properly, but only if my min-width has a value high enough to encompass my #navwrapper div (it's the one with the green swirly vector art background).
With such a high value (1265px) many users will be given a horizontal scrollbar, which I don't want. I have a really wide skyline image in the footer (3,000px) and it doesn't cause a scrollbar, so I'm wondering why my navwrapper does. Ideally, I want the page to have a min-width of 960px, so the navwrapper will stay centered, and the edges will get clipped if the edges extend past the viewport.
An early version of my page is here: http://jezenthomas.co.uk/poison2/
Hope someone can figure it out!
Your navwrapper has content in it. Your skyline is just a background image. Browsers treat content with priority and allow backgrounds to just fall outside of the viewport. If you want to prevent scrollbars, you can add
body {
overflow-x:hidden;
}
which will hide any horizontal scrollbars.