Fixed header position in bootstrap 3 modal

Question

I want to use a fixed header in my Bootstrap modal, however if I set .modal-header as position:fixed it scrolls along with the moda content. How do I create a trully fixed header in BS modal?

Answer 1

Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible.

You can easily do this using the CSS3 vh unit together with calc. Both vh as calc have pretty good browser support (IE9+).

The vh unit is relative to the viewport (= browser window) height. 1 vh is 1% of the height and 100vh means 100% of the viewport height.

We just need to substract the height of the modal's header, footer and margins. It's going to be difficult it that dynamic. If those sizes are fixed, we just add all the heights.

Set either the height or max-height to calc(100vh - header+footer px).

.modal-body {     max-height: calc(100vh - 210px);     overflow-y: auto; } 

See the jsfiddle

Answer 2

Here's a simple trick. Let me assume that i have to fix the div with class "fixedHeader"

Simple Jquery Way:

$('.modal').scroll(function() {      var a=$('.modal').scrollTop();      $('.fixedHeader').css('top',a+'px'); }); 

CSS

.fixedHeader {     position:fixed; } 

Whatever i have answered above is for normal bootstrap using jquery.But if someone is using angular bootstrap for the modal then

Angular

$timeout(function() {     angular.element('.modal').scroll(function() {         var a = angular.element('.modal').scrollTop();         angular.element('.fixedHeader').css('top', a + 'px');     }); }, 10); /*Put the above in modalinstance controller*/ /*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */ 

CSS

.fixedHeader {     position:fixed; } 

Make sure you have jquery dependency installed in both cases.