I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
Related
My Problem:
My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.
The sections are arranged horizontally in a grid display.
Then when I see the same page on phone, the middle sections are
collapsed (not shown).
There horizontal and vertical scroll views is not visible, when it should.
and like it should be: the horizontally arranged sections should
arrange vertically to be able to show each section.
I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.
I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).
Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).
I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.
I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.
Trying to take help from:
How to make a page responsive
How can I arrange horizontally ...
The link below solves my problem a bit. I can control when I want the above scroll bars to scroll when I need (or by adding a padding dimension inside this scroll-view parent to offer scroll area).
Prevent scroll of parent scroll view when drag event is happening in its child view, or in some other case where you do not want your scroll view parent to scroll.
There is another short way:
scrollView.requestDisallowInterceptTouchEvent(true);
But it offers less control. if you add a padding dimension inside this scroll-view parent to offer scroll area, it serves what I need.
I already have Sticky header nav in my project, however I need to have the sidenav (filter section) or Aside also show fixed on the left when the scroll occurs as there is a long list on the right side of the page. As I mentioned the header is already in FIXED position to top. How can I make the Aside or sidenav to stick along with the header, just beneath it. I am unable to do it via CSS and not sure how can I accomplish this using jquery.
Any help would be much appreciated.
Thanks in Advance..
Can you please provide us with your code with the css?
Basically what you can do is:
Create a container to have your sidebar and center section in with
overflow hidden and width to 100%.
Set the sidebar position as relative, with a provided width and
padding to the top so that the navbar does not overlap on it.
Set your main container (the element containing the list) width
position relative, this way it will display next to the sidebar, you
can add overflow auto to make sure that you get a scrollbar when you
have many list items.
There are several ways to solve your problem.
You can also use an Iframe but I wouldn't recommend it for responsive designs.
As shown in below screenshot, can be noticed here on getbootstrap.com by lowering the browser height. As sidebar is fixed there for when height of sidebar increases specially in case of multiple hierarchies it starts hiding items underneath it. And page scroll do nothing to show the hidden items.
How can I overcome this issue?
You need to enable scrollbar to side panel so user can scroll for hidden menus.
you need to fix visible height of window to sidebar container.
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
Currently I am working on a page that has a top banner followed by a top navigation bar. I am making it so that when you scroll down past the navigation bar - the navigation bar becomes fixed. This works however when the nav becomes fixed, the rest of the website content pushes up as the navigation bar is no longer a block element.
Is there a way to make the navigation bar fixed while retaining the position or content of the page in the same location?
Set the margin-top of the div with the rest of the website equal to the height of the navigation bar + margin-top of the navigation bar (since there is a banner)
What sort of script are you using to switch the positioning of your navigation? I've used jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/) with success. Maybe you could use that, or check out how they address your issue. It seems like they add a wrapper around the "sticky element", which prevents the content from shifting.