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
Related
I deal with the following problem.
I have a wordpress theme in which there is a left side menu that when I press the hamburger button, it pushes the whole content, header and main container to the left.
What should I look into?
I have tried changing position from fixed to absolute and overflow to overlay but I might now doing it correct.
I cannot provide code because I don't know which file is responsible so, any chance where should I look into?
I am talking about Atelier theme.
Thanks a lot in advance!
This somewhat depends on how the menu is implemented, and without further details it's somewhat hard to say 100% what will work for you.
That said though, if you want to display your side menu over top of the content without pushing it to the right then you would want to set the Z-Index of the menu such that it renders above the rest of the content on the page.
Here is some details that might help you achieve what you are looking to do:
Z-Index
Setting the position attribute for the Manu should do the trick. More information: CSS position property
When you click on hamburger. please check body or content added margin for left side. if left side content margin added then remove margin-left: 0px !important. If added new class then help with jQuery remove this class when your click on hamburger.
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
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!
I have a problem with Wordpress.
I let a sidebar disappear using style:display:none;
And now I want to use that place that was used by that sidebar.
For example: There is a text placed left and right was the sidebar.
And if I now set width:100% for that text it doesn't fill that used place of sidebar.
Thank you!
Ok, I found the problem.
My theme used flex. So I changed everything about flex and used that place used for sidebar.
The problem is that I should have build everything else with flex. Therefor I didn't use that and instead I put that information I wanted to use in that place of sidebar in the sidebar and modified it with placeholder sidebar element. It is not the perfect way, but it works ;)
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/