I have created a list using a block element contained in a view. When the block contains enough items, I am able to scroll vertically as intended.
The problem here is that, even if the block does not overflow vertically or horizontally, I am also able to scroll horizontally. This is illustrated in the following pictures:
Normal operation:
Scrolled horizontally:
Here is the ACSS for the containing view:
position: absolute;
top: 378rpx;
width: 750rpx;
Is there any way to constrict the block from scrolling horizontally?
So it turns out that a higher-order view accidentally had a width that was more than 750rpx and this allowed scrolling to the side.
Fixing that made that the list stays in the same place horizontally.
Related
On the website I'm building I would like to integrate a horizontal position: sticky; scrolling section in the middle of a page. The page has vertical scroll. The user could scroll the section from A to Z with the vertical natural scroll of the page.
I found a perfect example of what I would like to achieve: https://nlkyt.csb.app
I don't find any resources on the subject. Does anyone knows how to create such effect?
Thanks!
I was looking for a similar effect when I stumbled upon this blog post. To sum it up you need three containers which we can refer to as:
space holder - This container will maintain the vertical space scroll space. More on this below.
sticky - This container will have a set height (100vh in my example). It will also be position: sticky; top: 0;.
horizontal - This container will contain the content that you wish to horizontally scroll on. Its width will be determined by the content that it contains.
To achieve the desired effect you must set the height of "space holder" to the width of "horizontal". Then on scroll you must horizontally translate "horizontal" equal to the offset top of "sticky".
If you're using react then follow the blog post from above. If you want the vanilla javascript version check out this codepen that I made.
I'm trying to position an element at the bottom of my mobile page using kendo ui mobile. I have a tabstrip at the bottom, and I don't want it to be footer styling, so unfortunately data-role="footer" won't cut it. I'vetried setting style="bottom:-1em;" but that doesn't work, it places the div where it was before -1em.
For the bottom style to work, you should either use position: fixed or absolute. Position fixed should position it according to viewport, regardless of the element's container. However position: fixed is rather buggy on mobile platforms.
Position: absolute on the other hand will position your element according to its positioned container, so in order to use it, you can place your element in the footer. The absolute position will remove the element from the page flow, so it won't affect the positioning of the TabStrip you have there. The footer doesn't have overflow: hidden, so the element can be positioned outside of it and over the content if you want.
So as far as I'm concerned, overflow:hidden does hide the scrollbar, but makes it impossible to scroll (at least scrolling doesn't work in Firefox).
I have a scroller-slider on my homepage - it scrolls automaticaly to lower full-screen elements one by one and then comes back to the first element and starts over. It looks really nice in my opinion, but the scrollbar is visible - I would like to make it invisible. With overflow: hidden the scrolling mechanism doesn't work.
Any idea how to do it?
You can hide scrollbar with CSS - wrap your scrollable container into another one with overflow:hidden and less height/width (depending on scroll you want to hide - vertical or horizontal one). This way helps if you have static container/content sizes. If container can be resized or size depends on content - you will have to use JS solution to calculate container size.
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.
The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.
The navigation DIV currently has the following CSS:
#nav {
position: absolute;
top: 210px;
left: 50%;
margin-left: -960px;
}
The body has a min-width of 900px.
There are two issues I am having with this setup:
As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.
The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.
Could someone help with these issues?
Thanks,
Nick
What I would do is
Cut out the middle part of the image (the one with the actual content).
Take out a slice from the line background that can be repeated infinitely. Like so:
Put the middle part of the image into a div that is 100% wide and has
background-image: url(/path/to/slice.png);
background-repeat: repeat-x;
that will give you an infinitely resizable navigation area, without needlessly expanding the page.