Home > database >  How to remove weird right margin of overflow-y: auto
How to remove weird right margin of overflow-y: auto

Time:12-20

So I've been trying to add a vertical scroll into my modal. It was a half-success.

The CSS and all are working fine but I'm having this weird margin-right that seems like can't be removed.

I tried to play around with the inspect element and nothing is working.

By the way, when I removed the overflow-y: auto the layout is okay (ofc, can't be scrolled)

So in my conclusion, the CSS overflow-y: auto is the one that creates that weird margin-right.

Can someone help me or explain this to me and How to remove it?

See the images attached for details.

PS. I think no need to post the code here since it's just CSS

/* View Menu-Modal */

  .modalMenu {
    float: none;
    width: 100%;
    height: 200px;
  }
  .modalMenu-img {
    width: 100%;
    height:100%;
    object-fit:cover;
    border-radius: 8px;
  }

  .modalPrice { 
    font-size: 24px;
    line-height: 28px;
    margin: 0px;
    font-family: 'Barlow', sans-serif;
  }
  .modal-dialog {
    height: 100% !important;
  }

  .modal-header {
    border-bottom: 0px !important;
  }
  .modal-content {
    border: 0px !important;
    height: auto;
    min-height: 80%;
    border-radius: 12px;
  }
  .modal-body {
    height: 70vh;
    overflow-y: auto;
    /*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
    margin-right: 0px !important;

  }
  .modal-footer {
    border-top: 0px !important;
  }

  #view-menu-modal::-webkit-scrollbar {
    display:none
  }
<!-- Modal -->
<div  id="viewMenuModal<?= $menu_id ?>" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">

  <div  role="document">
    <div >
      <div >
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div  id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
        <div >
            <img  src="images/img/stock/baby-back-ribs.jpeg" alt="blog-img">
        </div>
        <div >
            <h3><?= $menu_name ?></h3>
            <p ><?= $menu_desc ?></p>
            <p >₱ <?= $menu_price ?> </p>
        </div>



      </div>
      <div >
        <!-- <button type="button"  data-dismiss="modal">Close</button> -->
        <button type="button" >Add to Order</button>
        <button type="button"  data-dismiss="modal" aria-label="Cancel">Cancel</button>

      </div>
    </div>
  </div>
</div>

This is the screenshot of the weird right-margin produced by the overflow-y: auto See how it looks like

And this is the elements panel, weird that there's no right-margin value. Weird margin-right Full Inspect Element Panel

CodePudding user response:

If you want to say that you have added a vertical scrollbar but it automatically overflows in the x-axis. Then add this property also overflow-x: hidden it will remove spaces on the right side or will remove the horizontally scrollbar.

CodePudding user response:

Try setting the overflow-y to overlay. This should make the scrollbar appear only as an overlay, thus not affecting the width of your element!

.modal-body{
    overflow-y: overlay;
}

CodePudding user response:

You can use overflow-y: scroll; on your modal body. I changed your height to 200px to demonstrate. Also, for the margin, try just margin-right: 0; instead of scroll-margin-right

/* View Menu-Modal */

  .modalMenu {
    float: none;
    width: 100%;
    height: 200px;
  }
  .modalMenu-img {
    width: 100%;
    height:100%;
    object-fit:cover;
    border-radius: 8px;
  }

  .modalPrice { 
    font-size: 24px;
    line-height: 28px;
    margin: 0px;
    font-family: 'Barlow', sans-serif;
  }
  .modal-dialog {
    height: 100% !important;
  }

  .modal-header {
    border-bottom: 0px !important;
  }
  .modal-content {
    border: 0px !important;
    height: auto;
    min-height: 80%;
    border-radius: 12px;
  }
  .modal-body {
    /*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
    height: 200px;
    margin-right: 0px !important;
    overflow: scroll;

  }
  .modal-footer {
    border-top: 0px !important;
  }
<!-- Modal -->
<div  id="viewMenuModal<?= $menu_id ?>" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">

  <div  role="document">
    <div >
      <div >
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div  id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
        <div >
            <img  src="images/img/stock/baby-back-ribs.jpeg" alt="blog-img">
        </div>
        <div >
            <h3><?= $menu_name ?></h3>
            <p ><?= $menu_desc ?></p>
            <p >₱ <?= $menu_price ?> </p>
            <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
        </div>



      </div>
      <div >
        <!-- <button type="button"  data-dismiss="modal">Close</button> -->
        <button type="button" >Add to Order</button>
        <button type="button"  data-dismiss="modal" aria-label="Cancel">Cancel</button>

      </div>
    </div>
  </div>
</div>

CodePudding user response:

in this your code working fine,if possible use bootstrap css and js

 .modalMenu {
    float: none;
    width: 100%;
    height: 200px;
  }
  .modalMenu-img {
    width: 100%;
    height:100%;
    object-fit:cover;
    border-radius: 8px;
  }

  .modalPrice { 
    font-size: 24px;
    line-height: 28px;
    margin: 0px;
    font-family: 'Barlow', sans-serif;
  }
  .modal-dialog {
    height: 100% !important;
  }

  .modal-header {
    border-bottom: 0px !important;
  }
  .modal-content {
    border: 0px !important;
    height: auto;
    min-height: 80%;
    border-radius: 12px;
  }
  .modal-body {
    height: 70vh;
    overflow-y: auto;
    /*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
    margin-right: 0px !important;

  }
  .modal-footer {
    border-top: 0px !important;
  }

  #view-menu-modal::-webkit-scrollbar {
    /*display:none*/
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button"  data-toggle="modal" data-target="#viewMenuModal">
  Launch demo modal
</button>

<!-- Modal -->
<div  id="viewMenuModal" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">

  <div  role="document">
    <div >
      <div >
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div  id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
        <div >
            <img  src="https://image.freepik.com/free-psd/fast-food-concept-banner-template_23-2148777964.jpg" alt="blog-img">
        </div>
        <div >
            <h3><?= $menu_name ?></h3>
            <p ><?= $menu_desc ?></p>
            <p >₱ <?= $menu_price ?> </p>
        </div>



      </div>
      <div >
        <!-- <button type="button"  data-dismiss="modal">Close</button> -->
        <button type="button" >Add to Order</button>
        <button type="button"  data-dismiss="modal" aria-label="Cancel">Cancel</button>

      </div>
    </div>
  </div>
</div>

  • Related