2
<span class="education"style="font-size:170%;line-height:150%;">&nbsp;Education
<br>
          <small style=" color:gray;font-size:60%;">&nbsp;
        Indian Institute of Managment,2009-2011
      </small>
<br>

      <small style=" color:gray;font-size:60%;">&nbsp;Indian Institute of   
        Technology,2004-2008
      </small>
<br>
    <a data-toggle="modal" href="#education" style="float:right;font-size:60%;">
     <small> Edit&nbsp;
     </small>
       </a>
       <div class="modal fade " id="education">
     <div class="modal-dialog ">
       <div class="modal-content light">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
           </button>
           <h4 class="modal-title">Education
           </h4>
         </div>
         <div class="modal-body">
           <form>
             <fieldset>
                   <label  for="post-graduation">post-graduation:
           </label>
               <input type="text" name="post-graduation" id="inputbox" 
            class="text ui-widget-content ui-corner-all" />
           <label  for="graduation">graduation:
           </label>
               <input type="text" name="graduation" id="inputbox" 
            class="text ui-widget-content ui-corner-all" />

            </fieldset>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->          
     </span>

It is my code. I want a modal when I click on edit button. The modal was appear in my page and disappear when I click on close button. But with modal it also show scroll bar. How can I remove scrollbar from my code?

0

6 Answers 6

7

In bootstrap 3 the CSS puts the second bar in there (modal class). You can change it like:

.modal {
    overflow-y: auto;
}
2

You should hide the scroll from the bootstrap class and then remove the margin-right of the body.

Here the css code:

#modalElementId
{
  overflow: hidden;
}

and in the show.bs.modal event:

$('#modalElementId').on('show.bs.modal', function () {
  $('body').css("margin-right", "0px");
});
1
     .modal-open{
       margin-right:0px !important;
     }
0

you can set height for modal body

 .modal-body {
        max-height: 600px;
    }
1
0

Your need remove the class modal-open in the body, check:

$('#modalElementId').on('hidden.bs.modal', function (e) {
    $('body').removeClass('modal-open');
});
0

In my case I want to display an image on full screen so to achieve this I have to remove the modal padding(to display it over the scrollbar) and also adding some CSS. Example:

<!-- Image Modal -->
<div class="modal fade p-0" id="zoomImageModal" tabindex="-1" role="dialog" aria-labelledby="zoomImageModal"
  aria-hidden="true">
  <div class="modal-dialog  modal-full" role="img">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="m-auto">
        <img class="img-fluid" src="{{zoomPathImage}}" alt="zoomPathImage" [title]="zoomPathImage">
      </div>
    </div>
  </div>
</div>

Style:

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

Note: I am using Bootstrap4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.