2

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 -->
2
  • You don't want to put horizontal scrollbar. then do you just want to crop the table? There are too much data in the table so if you use table{table-layout:fixed} , layout is overwrapped and if you use modal-body{overflow:hidden} then the table will be cut out.
    – VvV
    Nov 2, 2016 at 20:07
  • I don't want to use a horizontal bar that's why I want to adjust the modal's width to fit the whole table. It got answered though so no worries :) Nov 3, 2016 at 13:21

2 Answers 2

9

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

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

JSFiddle Working Example

1
  • I tried width: auto but put it on the wrong class, that's why it didn't work. Thanks a lot! Nov 2, 2016 at 19:42
0

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

 .modal-dialog{
  margin: auto;
  max-width: none;  
  width: fit-content;
 }
New contributor
nagarjuna reddy is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.