The issue with the table inside a bootstrap modal is that it is not properly sized and does

I am facing an issue with a modal that has two columns. One of the columns contains a table which is too wide and requires horizontal scrolling. I need help to make the table fit into the column without any scrolling problems. The table should be able to scroll only when its items exceed the size of the modal.

For reference, here is an example link: https://jsfiddle.net/35wzenqf/2/

Please switch the view to tabs(row) as it will make it easier for you to see the columns in the 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 to anyone who can assist!

htmlcssbootstrap-4bootstrap-modal

Answer №1

Thank you so much to Ferikeem and Hamid for your valuable assistance!

Below are the solutions to my queries:

To resolve the issue where changing modal-lg to modal-xl did not work in my code, I included 

style="max-width: 1140px"
for the modal-dialog class. This adjustment ensures that the modal appears in the same size as modal-xl in bootstrap.

To address the scrolling requirement, I needed to specify the height as follows:

.horizontal-scroll
{
    overflow-y: auto;
    height: 70vh;
}

Answer №2

Enlarging the medal size

click here to learn more

<!-- Creating an 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

javascripthtmlangularjs

Guide to Implementing h-100 Class in Bootstrap 4

I am facing an issue with the height of the sidebar in my admin panel. Despite trying to set the sidebar's height to 100%, I have been unsuccessful in solving this problem. <html class="h-100"> <head> <title>Admin</title> ...

htmlbootstrap-4

Space constraints within an li element

Is there a solution to resolve the unusual impact of margins/paddings? Check out this example on jsfiddle: jsfiddle. Here is the screenshot of the issue: i.imgur.com/64S8C.jpg. I want to eliminate any margins/paddings in the li element. ...

htmlcss

Difficulty displaying images on an HTML canvas

Currently, I have a function named next that is designed to retrieve the time (just the hours) and then compare the hours using an if statement to determine which clock image to load into the imageURLs[] array. Based on my observations, this part seems t ...

javascriptjqueryhtmlimagecanvas

How can a button be linked directly to a particular list item?

I currently have a HTML tag within my React application that looks something like this: <ul> <li> Item 1 <button> Delete </button> </li> <li> Item 2 <button> ...

javascripthtmlreactjs

Can I give a "label" to the information being retrieved from the database?

I am looking to give a name to the answers fetched from the database. Currently, I am configuring a questionnaire/quiz with the questions and corresponding answers stored in the database. Here is my PHP code snippet: public function site() { $db = n ...

phphtml

When adjusting the top margin of the main content in CSS, the fixed top navigation section's margin also decreases simultaneously with the main content

I am in the process of creating a basic static blog page using HTML5, SASS, and CSS. While working on the design, I utilized the 'nav' semantic element for a fixed top bar on the page that remains visible even when scrolling down. Additionally, ...

csshtml

extracting an empty value from this variable

When I click on an anchor tag using this operator, the value appears blank. I have multiple divs with the same class, so I used the .each() function, but I can't figure out where I'm going wrong. The desired output is that when I click on one of ...

javascriptjqueryhtml

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

htmlcssbootstrap-4

Interactive calendar feature displaying events upon hovering over a date

I need some assistance with displaying a drop-down list on full calendar events when hovering over the events. Can someone provide guidance? Here is a glimpse of what I currently have: https://i.sstatic.net/fZXMH.png I've attempted setting the z-in ...

javascriptcssfullcalendarfullcalendar-3

What is the best way to add a hover effect to two different objects simultaneously?

I am facing an issue with two div's, A and B. I want to hover over DIV A and display DIV B without hiding it when moving the mouse from DIV B. <div id="a"><img src="images...." class="profile" id="options" /></div> <div id="b"> ...

jqueryhtmljquery-hover

What could be causing my second ajax call to render the page unresponsive?

I am encountering an issue with my AJAX call. It works fine on the first attempt, but when I try to call it a second time, the page becomes unresponsive. I am not sure what is causing this issue. The code is located within the document ready function. The ...

javascripthtmljqueryajaxmaterial-design

Launching an image link within the same location on the subsequent page to which it is directed

I'm completely new to creating websites so I may not be using the correct terminology. I've searched with various terms and ideas but haven't found any solutions to help me ask my question effectively or find examples of what I'm lookin ...

javascripthtmljquerycss

Steps to enable overflow: 'scroll' for components generated dynamically

When developing a React application, I encounter an issue with creating new components dynamically inside a container. The problem arises when the height of the container gets exceeded by the newly added items, and I aim to make the container scrollable in ...

javascriptcssreactjsdynamicsass

Navigating through various div elements in Javascript and sending parameters to a script

Context In my project, I am using PHP to generate a series of voting sections. Each section follows the same format except for a unique number assigned to it, which increases with each iteration of the PHP loop. To keep track of the unique numbers, I uti ...

javascriptphphtml

Is it possible for CSS to prevent the insertion of spaces?

When filling out a form, I am able to insert spaces in inputs but not in the textarea (which is necessary). Interestingly, inserting spaces in the textarea works flawlessly. <form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="mu ...

javascriptjqueryhtmlcsswordpress

Manipulate only the elements inside the designated container

My CSS/bootstrap file is quite extensive and the styles are affecting more than just the elements I intended to target. While I want it to have a broad impact, the CSS changes are impacting the entire page. Renaming every element to [name].slider is not ...

htmlcssbootstrap-4

struggling to perfect the CSS styling

I am in need of a design similar to the image linked below: https://i.sstatic.net/Er1wT.png I attempted to create this layout using a table, but I have not been successful in aligning the side images properly. testTable.html <style> .container{ ...

htmlcss

Choose checkboxes from an array of values using AngularJS

I have recently developed a page that includes text boxes, radio buttons, and checkboxes. This page serves as a platform for saving new data or modifying existing information. While I can successfully save new data, I encountered an issue when trying to ed ...

htmlangularjsarrays

Problem with <meta> tag occurring when initial-scale is adjusted

Initially, in the index.html file: <meta name="viewport" content="width=device-width, initial-scale=1" /> I decided to modify it to: <meta name="viewport" content="width=device-width, initial-scale=2" /> ...

javascripthtmlcssreactjsmeta-tags