Tips for maximizing responsiveness with display:flex in Bootstrap?

Question

Tips for maximizing responsiveness with display:flex in Bootstrap?

I have a row with 3-cols containing a dropdown menu within each column. The dropdown menu appears below when an option is selected. Clicking the option button causes the height of the columns to extend, flex, or increase as intended. To achieve this effect, I simply add the following CSS element to the row for full screen:

@media only screen and (min-width: 1201px)
.payfullMajsticBlox .portlet-body > .row {
    display: flex;
}

Here is my HTML code:

<div class="payfullMajsticBlox">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-cogs font-green-sharp"></i>
            <span class="caption-subject font-green-sharp bold uppercase">POS AYARLARI</span>
        </div>
        <div class="tools">
            <a class="collapse" href="javascript:;" data-original-title="" title="">
            </a>
            <a class="config" data-toggle="modal" href="#portlet-config" data-original-title="" title="">
            </a>
            <a class="reload" href="javascript:;" data-original-title="" title="">
            </a>
            <a class="remove" href="javascript:;" data-original-title="" title="">
            </a>
        </div>
    </div>
    <div class="portlet-body">
        <!--<h4>Pulsate any page elements.</h4>-->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">API Kullanıcı adı</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="Merchant ID">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">Şifre</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="API Şifresi">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">Mağaza Numarası</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="Client ID / Terminal">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">

                <h6 class="payfullTitle">3D Secure kullan</h6>
                <div class="clearfix">
                    <div class="btn-group btn-group payfullBtns" data-toggle="buttons">
                        <label class="btn green active" id="P1BsecureS1">
                            <input type="radio" class="toggle">Varsayılan</label>
                        <label class="btn green" id="P1BsecureS2">
                            <input type="radio" class="toggle">3D Secure</label>
                    </div>
                </div>
                <br><br>

                <div id="P1B3DSecure" class="payfullShowHide" style="display: none;">
                    <h6 class="payfullTitle">Üye İş Yeri Anahtarı</h6>
                    <div class="form-group form-md">
                        <input type="text" class="form-control" id="form_control_1" placeholder="POS Net Id / Store key">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

The initial view looks like this: https://i.sstatic.net/gAkQg.png

When clicked, it changes to: https://i.sstatic.net/JOC90.png

For responsiveness, I disable display:flex on tablet devices initially to ensure that the dropdown-containing column's height adjusts correctly compared to others. This customization is necessary for full responsiveness.

https://i.sstatic.net/87UZP.png https://i.sstatic.net/HbfN8.png

Enabling display: flex; leads to non-responsive behavior, resulting in a layout like this:

https://i.sstatic.net/T1Z8p.png

You can view a demonstration in this gif:

In conclusion:

Setting a row element property as display:flex renders the design non-responsive.

jquery twitter-bootstrap css xhtml

Answer 1

Answer №1

Here is a suggestion that may be helpful. It's not exactly the same as your original content, but it should work with large content in one of the boxes.

Update: Content added dynamically should also function correctly.

$("#add").on("click",function(){
   $(this).parent().prepend('<div class="added-content" >Added Content </div>');
});

.flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.flex-item{
  
  flex:1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
}
.flex-item p{
  margin: 10px 5px;
  padding: 10px;
  background:yellow;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#add{
    padding:5px;
    background:red;
}
.added-content{
    background:blue;
    margin-bottom:5px;
    color:white;
}
.breakpoint{
  display:none;
}

@media all and (max-width: 1201px){
  .flex-item{
      flex: none;
      width:25%;
  }
}

@media all and (max-width: 601px){
  .flex-item{
      flex: none;
      width:50%;
  }
}

@media all and (max-width: 401px){
  .flex-item{
      flex: none;
      width:100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox">
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
      <p ><button id="add">Add Content on Click</button></p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content
        Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of contentContent</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>

  
</div>

JSfiddle

Answer 2

Here is a suggestion that may be helpful. It's not exactly the same as your original content, but it should work with large content in one of the boxes.

Update: Content added dynamically should also function correctly.

$("#add").on("click",function(){
   $(this).parent().prepend('<div class="added-content" >Added Content </div>');
});

.flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.flex-item{
  
  flex:1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
}
.flex-item p{
  margin: 10px 5px;
  padding: 10px;
  background:yellow;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#add{
    padding:5px;
    background:red;
}
.added-content{
    background:blue;
    margin-bottom:5px;
    color:white;
}
.breakpoint{
  display:none;
}

@media all and (max-width: 1201px){
  .flex-item{
      flex: none;
      width:25%;
  }
}

@media all and (max-width: 601px){
  .flex-item{
      flex: none;
      width:50%;
  }
}

@media all and (max-width: 401px){
  .flex-item{
      flex: none;
      width:100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox">
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
      <p ><button id="add">Add Content on Click</button></p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content
        Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of contentContent</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>

  
</div>

JSfiddle

Answer 3

Answer №2

To make your DIVs equal height in all screen sizes, simply include this script and add the class eq_col to the DIVs you want to apply it to.

If you encounter any issues, please let me know.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var tallestBox = 0;
        $('.eq_col').each(function(){  
                if($(this).height() > tallestBox){  
                tallestBox = $(this).height();  
        }
    });    
    $('.eq_col').height(tallestBox);

});
</script>

Answer 4

To make your DIVs equal height in all screen sizes, simply include this script and add the class eq_col to the DIVs you want to apply it to.

If you encounter any issues, please let me know.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var tallestBox = 0;
        $('.eq_col').each(function(){  
                if($(this).height() > tallestBox){  
                tallestBox = $(this).height();  
        }
    });    
    $('.eq_col').height(tallestBox);

});
</script>

Tips for maximizing responsiveness with display:flex in Bootstrap?

Answer №1

Answer №2

Similar questions

Sling file moving with an Ajax request

Echo command fails to work with location.href

What is the best way to display a success notification when a transaction is successfully executed in web SQL

Issue: Trouble with ajax form functionality

Is there a way to determine the visibility of a div?

The full-width header is generating a horizontal scrollbar

Leveraging ng-switch with ng-repeat in AngularJS to dynamically apply HTML based on conditions

What is the best way to retrieve data from Firebase and then navigate to a different page?

How to Add Catchy Titles to Your Menu Items on Silverstripe CMS?

Exploring the Integration of jQuery AJAX in a Contact Form

What steps can I take to bring this idea to life in my gallery?

"Developing a JSON object from a Form: A Step-by-

Ways to retrieve the position of hyperlinks within a div element

Error: The Ajax request is not successful; the responseXML property of the xhr

What causes Font Awesome 5 icons to vanish when changing the font-family?

Arranging two tables, one slightly misplaced from the other

Applying CSS styles to my container through a button click event

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

The Bootstrap navigation bar vanishes when viewed on mobile devices

Having issues with handling button click events in jQuery