1

I have a modal with two columns in it. One of the column contains a table. However, the table does not fit into the column and need to scroll horizontally, but I need to make the table fit into the column. Also, I have problem with the scrolling issues. Table should be can scroll if the items is more than the size of the modal.

Here, the link of example:- https://jsfiddle.net/35wzenqf/2/

Please change the view to tabs(row) easier for you to see the columns in modal :)

<div class="btn-group d-flex">
   <button class="btn btn-lg btn-icon btn-primary w-100" data-toggle="modal" data-target="#modal-default">
      <span class="btn-inner--icon"><i class="far fa-money-bill-alt"></i></span>
      <span class="btn-inner--text">Pay</span>
   </button>
</div>

Thank you for anyone helping!

cdogol
  • 155
  • 11
  • 2
    How about `modal-xl` instead of `modal-lg` as modal class on `div.modal-dialog`? That way the whole modal gets bigger, and the table fits. – ferikeem Jul 12 '21 at 10:12
  • Oh in my real code modal-xl doesn't work, that's why I'm trying to make it fit with modal-lg. However, do you have any ideas with the scrolling issues @ferikeem? – cdogol Jul 12 '21 at 10:23
  • 1
    You have to add a height property to `.horizontal-scroll` as well, e.g.: `height: 50vh;`. (This applies to the whole left side currently). As for xl not working, it is available from [bootstrap-modal v4](https://getbootstrap.com/docs/4.6/components/modal/#optional-sizes) onwards (you tagged bootstrap-4, maybe check the version in your code). – ferikeem Jul 12 '21 at 11:30
  • 1
    Thank you @ferikeem! Everything works fine now ;) – cdogol Jul 12 '21 at 18:15

2 Answers2

2

Thanks Ferikeem and Hamid for helping!

These are the answers for my questions:-

Change modal-lg to modal-xl, in my code it doesn't works I don't know why so I added style="max-width: 1140px" for my modal-dialog class. It's the same size as modal-xl in bootstrap.

For the scrolling, I need to set the height.

.horizontal-scroll
{
    overflow-y: auto;
    height: 70vh;
}
cdogol
  • 155
  • 11
1

Increase the size of the medal

enter link description here

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
hamid choopani
  • 124
  • 4
  • Hi! Thanks, I think there's something wrong with my css file, solved it by adding `style="max-width: 1140px"` on my modal-dialog class. – cdogol Jul 12 '21 at 18:18