发表新帖
发表新帖

Twitter Bootstrap modal opening/closing causes fixed header to jump

后端 未结
关注
14 2292
旧时难觅i
旧时难觅i 2021-01-08 01:39

I am almost done with a simple 2-page website for my registered domain names. Unfortunately I have one small issue I can\'t seem to fix: a jumpy header when a Twitter Bootst

相关标签:
14条回答
  • 耶瑟儿～
    2021-01-08 01:56

    Bootstrap adds class="modal-open" and padding-right: 15px; to body when the modal is shown. To remove the right shift and keep the scroll bar add this to your css: 

    body.modal-open {
  overflow: inherit;
  padding-right: 0 !important;
}

    Tried in bootstrap 3.3.4

    0 讨论(0)
  • 慢半拍i
    2021-01-08 02:00

    I have a structure:

    <html>
<body>
  <nav class="navbar navbar-fixed-top">...</nav>
  <section>
    <div class="container">...</div>
  </section>
  <section>
    <div class="container">...</div>
  </section>
  <footer>...</foter>
</body>
</html>

    I'm using this CSS:

    body.modal-open {padding-right: 0 !important}
body.modal-open nav,
body.modal-open section,
body.modal-open footer {padding-right: 17px !important}
    0 讨论(0)
  • 逝去的感伤
    2021-01-08 02:00

    Add the following to your CSS:

    body {
  overflow: inherit;
  padding-right: 0 !important;
}
    0 讨论(0)
  • 悲哀的现实
    2021-01-08 02:00

    For Bootstrap 4 sticky-top, use the following snippet. Tested all the CSS solutions on this page but none worked for Bootstrap 4.

    <script type="text/javascript">

    $('body').on('show.bs.modal', function () {
        $('.sticky-top').css('margin-left', '-=0px');
    });

    $('body').on('hidden.bs.modal', function () {
        $('.sticky-top').css('margin-left', 'auto');
    });

</script>

    My page design was as follows

    <header class="container">
    <div class="row">

    </div>
</header>

<div class="container sticky-top">
    <nav class="navbar navbar-expand-lg">
        This div jumped/shifted 17px to the right when opening a modal
    </nav>
</div>
    0 讨论(0)
  • 醉话见心
    2021-01-08 02:01

    I came around same issue and I solved it as follows

    just add 

    body.modal-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}
    0 讨论(0)
  • 梦如初夏
    2021-01-08 02:04

    All this happens because of this part of code in bootstrap.js:

    Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}

    That annoying problem happens in Firefox 32.0 (Gecko/20100101) and Chromium Version 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04). Not happens in QupZilla Version 1.6.6 (WebKit 537.21).

    For me, the dirty fix is to comment the conditional line, after that it works in all browsers I tested (including some android's browsers).

    NOTE: if you comment that line, you should be careful with the size of your modals since bootstrap will not create enough space for the new scrollbar.

    Regards.

    0 讨论(0)
 看不清?
提交回复
热议问题