CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jan Miguel Carangan
Jan Miguel Carangan

Reputation: 21

Bootstrap - Adjust the width of the modal to fit content

I am just wondering if you can adjust the width of the modal to fit it's content without having to set the width property to a fixed value. I don't want to put a horizontal scrollbar as well. I tried setting the overflow-x property but was not successful. If possible I don't want to use any jQuery for this; just change the CSS. Here's the screenshot:

Here's the code:

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

Upvotes: 2

Views: 10680

Answers (2)

nagarjuna reddy
nagarjuna reddy

Reputation: 11

Based on content modal width auto adjusted, plz followed by below code:

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

Upvotes: 0

Jesse Johnson
Jesse Johnson

Reputation: 1718

Applying width: auto; to the .modal-dialog element should do it.

.modal-dialog {
  width: auto;
  max-width: 960px; // Optional, maximum width
}

JSFiddle Working Example

Upvotes: 8

Related Questions