CODEWITHSUNDEEP
javascriptcsshtmltwitter-bootstrap-3
wbk727
wbk727

Reputation: 8408

Bootstrap Modal width not adjusting to fit contents

After implementing a Modal dialog, I noticed it stretches very wide to wide to fit the screen but I only want it to be as wide as the contents inside it. I don't understand why this is happening when I used width: auto;

var modalItems = document.getElementById('itemsModal');

var btnItems = document.getElementById("btn_items");

var btnCloseModalItems = document.getElementById("btn_closeItemsModal");

btnItems.onclick = function() {
  modalItems.style.display = "block";
}

btnCloseModalItems.onclick = function() {
  modalItems.style.display = "none";
}
#btn_closeItemsModal {
  float: right;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
}

.close {
  color: white;
  background-color: white;
}


/* Modal Content */

.modal-content {
  position: relative;
  color: black;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: auto;
}

.modal-header {
  background-color: #0099cc;
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemsModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="btn btn-default btn-lg" id="btn_closeItemsModal"><span aria-hidden="true">&times;</span></button>
      <h3>Items</h3>
    </div>
    <div class="modal-body">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Africa</a>
        <a href="#" class="list-group-item list-group-item-action">Antarctica</a>
        <a href="#" class="list-group-item list-group-item-action">Asia</a>
        <a href="#" class="list-group-item list-group-item-action">Eurpoe</a>
        <a href="#" class="list-group-item list-group-item-action">North America</a>
        <a href="#" class="list-group-item list-group-item-action">Oceania</a>
        <a href="#" class="list-group-item list-group-item-action">South America</a>
      </div>
    </div>
  </div>
</div>


<button class="btn-lg btn-primary" id="btn_items">My Items</button>

Upvotes: 3

Views: 4504

Answers (2)

Ashvin777
Ashvin777

Reputation: 1482

As you know that by default almost all elements(like <div> and <p> and <h1> etc) are having display:block CSS property so such all elements will take the full width of parent. So if you won't define any width for .modal-content and . .modal then due to display:block it will inherit the width of parent.

You should add a max-width constrain to your .modal-content to achieve this. Also you can add margin:0 auto to align the .modal-contentcenter.

Upvotes: 0

Taki
Taki

Reputation: 17664

use dispaly:table for your .modal-content

JsFiddle

var modalItems = document.getElementById('itemsModal');

var btnItems = document.getElementById("btn_items");

var btnCloseModalItems = document.getElementById("btn_closeItemsModal");

btnItems.onclick = function() {
  modalItems.style.display = "block";
}

btnCloseModalItems.onclick = function() {
  modalItems.style.display = "none";
}
#btn_closeItemsModal {
  float: right;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
}

.close {
  color: white;
  background-color: white;
}


/* Modal Content */

.modal-content {
  position: relative;
  color: black;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: auto;
  display: table;
}

.modal-header {
  background-color: #0099cc;
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemsModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="btn btn-default btn-lg" id="btn_closeItemsModal"><span aria-hidden="true">&times;</span></button>
      <h3>Items</h3>
    </div>
    <div class="modal-body">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Africa</a>
        <a href="#" class="list-group-item list-group-item-action">Antarctica</a>
        <a href="#" class="list-group-item list-group-item-action">Asia</a>
        <a href="#" class="list-group-item list-group-item-action">Eurpoe</a>
        <a href="#" class="list-group-item list-group-item-action">North America</a>
        <a href="#" class="list-group-item list-group-item-action">Oceania</a>
        <a href="#" class="list-group-item list-group-item-action">South America</a>
      </div>
    </div>
  </div>
</div>


<button class="btn-lg btn-primary" id="btn_items">My Items</button>

Upvotes: 4

Related Questions