On this page: https://www.ppai.org/members/certification/certification-programs/ we have added bootstrap accordion functionality to our panels.
The issue is that the content window does not expand when the accordions open, so at the bottom of the page, you end up with content hidden behind the footer.
I understand positioning and I'm sure that either a height is being set on one of the containers or something is getting changed to a fixed position. I've just pulled out most of the hair I have left trying to find which container is the culprit.
I was hoping to find a wizard here that could help me spot the offender.
Thanks!
Related
I'm working with bootstrap and trying to create a gutter between a static sidebar and the main content area.
At the moment the main content is overlapping the sidebar, so I've been messing with the CSS to create a gutter that is even on both sides.
I've not found which setting I need to change in bootstrap-sass but using developer tools I can get this top position correct, but I don't think this is the proper way to do it.
when i leave these as the default, the card is moved to behind the sidebar.
Hoping someone can point me in the right direction.
Thanks
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I am working on building sticky sidebar behavior that will run alongside a vertical feed which is very similar to a facebook feed on desktop web. position: sticky works well for the easy use case where the sidebar is shorter than the height of the viewport. However if your sidebar is larger than the viewport the sidebar needs to have some scrolling mechanism so you can see the bottom of the sidebar as you scroll down the feed.
I am trying to recreate the facebook sidebar sticky scroll here.
The best way to understand the desired behavior is to test out your facebook feed and shrink your screen height so that your viewport is smaller than your sidebar height. I'll try to summarize here:
When your viewport is taller than your sidebar (simple case)
The sidebar behaves exactly as you'd expect with position: sticky. The sidebar stays in the same place and follows as you scroll down and up.
When your viewport is smaller than your sidebar
When you scroll down initially the sidebar scrolls with the feed (they appear fixed together)
When you get to the bottom of your sidebar, it then locks at the bottom and as you scroll down more, the sidebar now appears sticky with the bottom fixed
When you now scroll back up, the sidebar once again appears attached to your main feed, and scrolls up with the main feed. Once you hit the top of the sidebar it's then sticky with the top fixed.
So between those two states (top fixed when scrolling up, bottom fixed when scrolling down), the sidebar scrolls in unison with the main feed.
It's a very nice scrolling experience but very hard to recreate.
I have accomplished the states listed in steps 1-3 above by applying position sticky with a top position, and when you scroll down, using scroll events and some viewport/sidebar height calculations to determine the height difference and adjusting the top css value so it locks when the bottom is lined up with the screen (essentially initialTop - (sidebarHeight - viewportHeight). I cannot figure out steps 4, and 5. The best I could do was transition between the two top values depending on your scroll direction but it's a very bad UX.
I have a sandbox example of a layout here: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
There's a basic layout with 2 columns (left sidebar and main feed). And there's a react component called StickyScroll which wraps around the column and has all the logic to update the top value. This may be a completely wrong start to a good solution, but any help is greatly appreciated.
I was interested in this as well, so I spent some time studying how fb does it.
It's very clever, my hat off to whichever fb dev originally implemented this.
You have to set the top / bottom css properties on the sticky depending on the direction of scroll, and to keep things from jumping around, you also have to calculate the height of an the element above the sticky, based on scrollTop.
Here is a rough example, which demonstrates the logic in action
I try to make a mock up by your sandbox code based on facebook redesign 2020.
hope you find the answer here. I like this approach because it's not very complex. More precisely, I use the css solution when I have to create a component similar to the Facebook sidebar.So i'm not using your StickyScroll component. Hope you find something.
Codesandbox Independent Scroll
In my current project i have footer with dynamic contents ie all links are from database, can add any number of links.Now i want to position it on the bottom of my page.I have searched a lot to get a solution but all are coming with a fixed height footer.Is there any solution for this? This project is done with bootstrap 3.
I've been trying to solve problem I have with Bootstrap layout for hours.
On my site, on full height pages, like http://devpassion.eu/reference.html there is a scrollbar on the right hand side that is moving whole layout left for 8px.
On the pages that have no full height, there is no scrollbar, like on this one http://devpassion.eu/kontakt.php there is no scrollbar so layout is moved right for same width.
If you open that two pages in two tabs and try just switching it, youll see what I mean.
Any ideas how to solve this and remove that offset that scrollbar does?