CODEWITHSUNDEEP
twitter-bootstrap
Raj
Raj

Reputation: 555

how to dynamically resize container to fit <div>

I want to dynamically resize the container based on the <div> panel displayed inside it. Currently,there are 4 <div> panels inside the container which fits the whole container fine. But the issues arises when there is only 2 <div> panels inside the container, then there will be plenty of space in the right side which I do not want. The container should resize based on the panel inside it.

I have pasted the image how it looks currently.

When here are 4 panels:

1st

When there are 2 panels

2nd

So you can see that there are plenty of space in the right side. I want to auto resize the container to fit.

<div class="container">
    <div class="row">
        <div>
            <ul class="nav nav-tabs" id="ATab">
                <li class="active"><a data-toggle="tab" href="#Select">Select</a></li>
                <li><a data-toggle="tab" href="#Criteria">Criteria</a></li>
            </ul>
            <div class="tab-content">
                <div id="Select" class=" tab-pane fade in active"></div>
                <div id="Criteria" class="tab-pane fade"></div>

                      <div class="container active col-md-3 col-sm-6 ">
                        <div class="panel panel-default">
                            <div class="panel-heading">First Name</div>
                        </div>
                    </div>

                    <div class="container active col-md-3 col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">Last Name</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 1561

Answers (1)

user8827003
user8827003

Reputation:

Your containers have both col-md-3 and col-sm-6 classes so depending on your container width, they'll either take up 1/4 or 1/2 of the row. Your row with 2 panels will scale as you desire once the container width is <750px because the col-sm-6 class will be active. http://bootstrapdocs.com/v3.0.3/docs/css/#grid

This is a limitation with Bootstrap 3 and is updated in Bootstrap 4 where you could simply label them with col classes and it will automatically fit within the container width. https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

If you don't want to/can't implement Bootstrap 4, then you could do a hybrid approach by removing Bootstrap classes in the wrappers for your panels and creating your own classes using Flexbox CSS3 properties. For example:

<div class="flex-container">
  <div class="flex-item">
    <div class="panel panel-default">
      <div class="panel-heading">First Name</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="panel panel-default">
      <div class="panel-heading">Last Name</div>
    </div>
  </div>
</div>

And then in your CSS:

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

.flex-item {
  flex: 1;
  margin: 0px 10px 0px 10px;
}

The downside of this approach is you'll have to integrate media queries to handle what happens when the container width changes, etc. But hopefully this helps.

The last option (which I consider the least desirable) is a JS solution where col-xx-3 and col-xx-6 classes are toggled on your panel wrappers based on whether there are two or four of them but I really wouldn't recommend that.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Upvotes: 2

Related Questions