4

I'm working with bootbox alerts. Its working fine but after loading the alerts my browser's scrollbar become vanishes and i can't scroll my page

bootbox.dialog({
      closeButton:false,
      message: "Do you clear all contents?",
      title: "Are you sure to clear all contents?",
      buttons: {

        main: {
          label: "Cancel",
          className: "btn-primary btn-small",
          callback: function(result) {

          }
        },
        danger: {
          label: "Clear!",
          className: "btn-danger btn-small",
          callback: function(result) {
            // clear contents from here
            content_id.find(".canvas_frame").html("");

            $(".sidebar").find(".tbProperties").hide();
            showtbBoxpanel(); // $(".sidebar").find(".tbBoxpanel").show();

          }
        }

      }
    });
KyleMit
  • 30,350
  • 66
  • 462
  • 664
Aneesh Sudhakaran
  • 43
  • 1
  • 8
  • I have a similar issue.. the scrollbar disappears, so the content jumps to the right, but then where the scrollbar should be reappears, but the content does not jump back until I close Bootbox. Their example doesnt do this. – Laurence Cope Feb 05 '14 at 21:40

4 Answers4

9

Try adding this to your css:

<style>
.modal{
    direction:rtl;
    overflow-y: auto;
}

.modal .modal-dialog{
    direction:ltr;
}

.modal-open{
    overflow:auto;
}
</style>
hakan.kozakli
  • 111
  • 1
  • 4
  • 3
    Not really sure why the ``direction`` is being used. It makes my scrollbar goes to the left side of the page. Simply removing it from ``.modal`` and completely removing ``.modal .modal-dialog`` did the charm for me. – Felipe Leão Aug 04 '15 at 12:55
0

Try this CSS

.modal-open{
   overflow: hidden !important; 
   padding: 0px !important;
}
 .modal-open .modal{
   overflow: hidden !important; 
}
Arun Kushwaha
  • 1,136
  • 1
  • 8
  • 8
0

It solved my problem:

body 
{
    overflow-y: scroll !important;
}

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

.bootbox.modal {
    overflow:hidden !important;
}
Ricardo de Assuncao Goncalves
  • 1,069
  • 12
  • 9
-2
@{
    ViewBag.Title = "Index";
}

<br />
<h2>Index</h2>

<p>
    Some Content Here.....<br />
    .....<br />
    .....<br />
    .....<br />

    <a id="alert" href="#">Alert!</a>
</p>

@section Scripts{ 
  @*If working with bootbox.min.js and Asp.Net MVC 5 (this worked; no scrollbar and no shifting)*@
  <style type="text/css">
    body {
        overflow-y: hidden !important;
    }

    body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
        margin-right: 0;
    }

    .bootbox.modal {
        overflow: hidden !important;
    }
</style>


<script type="text/javascript">

    $(document).on("click", "#alert", function (e) {
        bootbox.alert("Hello world!", function () {
            console.log("Alert Callback");
        });
    });
</script>
}
RodMac
  • 1