Customize Bootstrap modal width to suit content dimensions

Is there a way to adjust the width of the modal to fit its content without setting a fixed value? I want to avoid having a horizontal scrollbar. I attempted setting the overflow-x property but it didn't work. If possible, I'd prefer not to use jQuery for this; just CSS changes. Take a look at the screenshot.

Below is the code snippet:

<!-- Modal -->
<div class="modal fade" id="tableWorklog" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header"> <!--Modal Header -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Member name's Worklog</h4>
      </div> <!-- /header -->
<div class="modal-body"> <!--Modal Body -->
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Task Name</th>
                <th>Location</th>
                <th>Collab</th>
                <th>Description</th>
                <th>Start</th>
                <th>End</th>
                <th>Total</th>
                <th>Type</th>
                <th>Status</th>
                <th>Breaklog</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>task 1</td>
                <td>url</td>
                <td>NONE</td>
                <td>something about the task</td>
                <td>Date + time</td>
                <td>Date + time</td>
                <td><span class="label label-success">00:00:00</span></td>
                <td>Timer</td>
                <td><span class="label label-warning">ongoing</span></td>
                <td><span class="label label-danger">Breaklog(number)</span></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total Hours</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>00:00:00</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
        </tfoot>
    </table>
</div> <!-- /body -->
      <div class="modal-footer"> <!-- Modal Footer -->
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div> <!-- /footer -->
    </div>
  </div>
</div> <!-- /modal -->

Answer №1

To make the .modal-dialog element responsive, you can apply the CSS property width: auto;.

.modal-dialog {
  width: auto;
  max-width: 960px; // You can also set a maximum width
}

View JSFiddle Example

Answer №2

To ensure the content modal width is automatically adjusted, please use the following code snippet:

 .modal-dialog{
  margin: auto;
  max-width: none;  
  width: fit-content;
 }

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

Ways to add extra dots to your listing style

Is there a CSS property or list style that can display an expanding list? For example: Order now for a discount! <ol style="list-style: none"> <li>* Available only for the first 12 months</li> <li>** Only for new customers ...

Having trouble getting a Chrome extension/jQuery to work on certain sites but not others? Attempting to trigger an event when a link is clicked

For three different websites, I have three separate js files. I want to mention that the manifest has the correct settings to make sure these files work on the right sites, but unfortunately, only one function of the extension (the most important one) is n ...

Missing or Lost Values in Object-Oriented PHP Arrays

I am fairly new to object-oriented PHP and PHP in general. I have a class where I assign array values in the constructor, but later when I try to access the array, it shows as null. Any ideas why this might be happening? Could it be an issue with scope? c ...

Adjusting the font size results in a shift in the margin and padding

I am currently designing the homepage for my website. I want all the text to be aligned on the same line, but whenever I increase the font size of one element, it creates space around it, shifting it slightly to the right and pushing the text below down. ...

Applying CSS borders with circular corners

Can this unique border style be achieved using only CSS? https://i.sstatic.net/wMtbG.png ...

How can I write a click event for an image within a PNG using jQuery?

Is it possible to add a click event to an image with a hole inside, allowing the image behind it to show through? Check out this JSFIDDLE for reference //javascript code $('#ant').click(function() { alert("hi"); }); ...

Is it possible to incorporate varied icon images for every item in an unordered list?

While I'm not an CSS expert, I do have a decent understanding of it. My current project involves creating an unordered list with unique icons for each item, along with changing the background color upon hover. I wonder if there's a way to achiev ...

css / Chrome is not displaying the correct background size

After experimenting with various CSS properties, I still can't get my background image to stay fixed on the browser screen without any scrolling. For better understanding, I have attached an image below: https://i.sstatic.net/ieCZN.jpg Below is my C ...

Setting the column width and border-top in Highcharts

Hey there, I'm facing an issue with my highcharts diagram. 1) Can anyone help me adjust the column width to match the width of the month area? (I've tried changing "width" in CSS but it's not working) 2) Also, how can I remove all borders ...

Navigate up to the ancestor element before moving back to the previous two sibling elements using Xpath

Here is an example of HTML code: <span class="state"> <label class="state button start" ...>"Start"</label> </span> <span class="name tracker_markup"> <span class="labels pre ...

Tips on ensuring Angular calls you back once the view is ready

My issue arises when I update a dropdown list on one of my pages and need to trigger a refresh method on this dropdown upon updating the items. Unfortunately, I am unsure how to capture an event for this specific scenario. It seems like enlisting Angular ...

Struggling to vertically align with the "align-items-center" class in Bootstrap

I am a newcomer to Bootstrap and React JS, and I am facing the challenge of centering my app both vertically and horizontally. Currently, the app is only centered horizontally and seems to be attached to the top. function App() { return ( <GlobalC ...

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

Ways to retrieve the path of a button found within table cells

https://i.stack.imgur.com/pUYHZ.jpgI'm currently working on a table where I've created a button that's being used in various rows and tables based on certain conditions. There's a specific scenario where I need to display the button for ...

Change the font weight to bold for the selected item in the Javascript menu, and

I am working on an ASP MVC application that includes a menu with JavaScript functionality to navigate between pages. Currently, when I click on a menu item, it becomes bold and remains bold even when another menu item is selected. This results in all menu ...

The ckeditor vanishes upon refreshing the div element

I have created two pages named openclosediv.php and content.php. The openclosediv.php page contains a list of records and a button that can show/hide the div, bringing in the content from content.php. However, I am facing an issue where the CKEditor in the ...

"Change the value of a style setting in React to 'unset

One of the components has CSS properties such as `right` and `bottom` that are set with a classname. I tried to override these values using the `style` prop but have only been successful in setting numerical values like `10px` or `0px`, not `unset`. Wha ...

I'm looking to replicate this navigation layout using Vuetify's 'navigation drawer' component. How can I go about doing this?

I'm currently utilizing Vuetify and implementing the Navigation Drawer component. I am attempting to replicate a similar navigation layout found here. The fixed menu on the left should maintain its width even when resizing the browser window. Upon ...

AngularJS: Validators in Controller do not directly bind with HTML elements

The in-line validations on the HTML side are functioning properly, but when I utilize functions in my Controller (specifically ingresarNuevoEmpleador and limpiarNuevoEmpleador), the $invalid value is always true. Additionally, $setPristine does not seem to ...

The Bootstrap Modal consistently shows the contents of the first record when used within a SQL While Statement

As a newcomer, I am in the process of converting an operational Bootstrap modal that houses a post form. Initially, the modal would open using a button with a specific Id and would always display the FORM contents from the first record found in the SQL w ...