remove scroll bar in bootstrap modal

Question

<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?

Solution 1

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

.modal {
    overflow-y: auto;
}

Solution 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");
});

Solution 3

     .modal-open{
       margin-right:0px !important;
     }