UI-Bootstrap Collapsible Sticky Footer

    I could have done this a lot of ways and ultimately I made it work with javascript modifying the class names. I also had to create multiple class names which I didn't like to much, I might come back and improve this but for now this is was I got. Also I call bootstrap+angularjs = ui-bootstrap, not sure if that's common sense but thought I should include it somewhere in my notes.


Working Example:
http://plnkr.co/edit/2N9ENlbw3bSvg1W9n0ch?p=preview

This little css was key to prevent any kind of animation on the collapse, which would result in a scrollbar appearing on the body. A scrollbar can appear when the content's too long but not on the sticky foot duh!

.no-animate {
  transition-duration: 0.0125s;
}


Research
Angular-UI Bootstrap Collapse without animation - Stack Overflow
http://jsfiddle.net/paulalexandru/Z2Lu5/ - Was looking at this to see if I could reuse it but I ended but just doing my own thing.


Another way which I've seen

Using a sticky nav and position to the bottom and inside it using a collapsible component. 

Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync