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:

When clicked, it changes to:

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.

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

You can view a demonstration in this gif:

In conclusion:

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

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JSON POST Method is not allowed for a Self-Hosted WCF REST service

After encountering countless "WCF" questions online, I am starting to believe that finding a solution is nearly impossible. Can someone prove me wrong? My current situation involves working with a Self Hosted WCF Service where endpoints are defined progra ...

javascriptc#jqueryjsonwcf

Showing local storage on a webpage using Jquery

I have encountered an issue where I can successfully add and remove items from local storage, but the added item does not display on my HTML page. The expected behavior is that when an item is added to local storage, it should be visible on a favorites pag ...

jqueryhtmllocal-storage

Creating a tool that produces numerous dynamic identifiers following a specific format

I am working on a function to create multiple dynamic IDs with a specific pattern. How can I achieve this? followup: Vue.js: How to generate multiple dynamic IDs with a defined pattern Details: I am developing an interactive school test application. Whe ...

javascriptjqueryhtml

Customize the Vuetify 2.0 sass variable $heading-font-family

I'm currently trying to customize the default variable $heading-font-family in Vuetify 2.0.0-beta.0, but I'm encountering issues with this particular override. Oddly enough, I have been successful in overriding other variables such as $body-font- ...

cssvue.jssassvuetify.js

Unable to precisely reach the very bottom of the scrollbar

When trying to move to the bottom of the scrollbar, I seem to reach a bit higher than the actual bottom. https://i.stack.imgur.com/Vt83t.png Here is my code: ws.onmessage = function (event) { var log = document.getElementById('log') ...

javascriptcss

Displaying two separate divs on a single jQuery mobile website using jQuery Ajax

In college, I was assigned a challenging project by the instructor that involved dynamically loading a multi-page jQuery mobile site using jQuery Ajax XML parser. The task included first populating an unordered list with list items from an xml file to be u ...

jqueryajaxxmljquery-mobile

Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

Currently working on a one-page landing page using Squarespace and running into some issues with creating a slideshow. You can check out my website here (the slideshow is located at the bottom of the page): Squarespace provides default options for text p ...

jquerycsspositionslideshowsquarespace

Contrast between the functionalities of $.ajax and $.post

$.post( url, data, callback, type ); $.ajax () Is there a distinction between using $.post and $.ajax in jQuery? And if so, which method is recommended? Also, how many parameters can be passed to the $.ajax function? ...

jqueryajax

What is the best method for accessing and showcasing images in an ionic app?

Having trouble displaying images after executing the following command: ionic run ios The default ionicframework template is being used with the sidemenu, and no changes have been made to the app directory structure. An inline css is being used to speci ...

htmlcssangularjsionic-framework

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

cssflexbox

Allowing Users to Easily Copy CSS ::before Content

Text inserted via pseudo-elements like ::before and ::after cannot be selected or copied. Is there a way to change this behavior? span::before { content: "including this text"; } <p> When the text of this paragraph is selected and copied, ...

javascripthtmlcss

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Why is it not recognizing styles and showing an error? All paths seem correct, styles and scripts are connected, but it's either not reading them at all (styles) or displaying an error. Here is the html, javascript, css code. How can this error be fix ...

javascripthtmlcss

Unable to retrieve the currently focused element

I've implemented a jquery auto-resize plugin to dynamically resize my textarea. Within the plugin, I have the following code snippet: (function($){ $.fn.autoResize = function(options, idToBeShown) { updateSize = function() { // Fun ...

jquery

What methods can be used to control access to document.styleSheets data, and what is the purpose behind doing so?

Recently, I came across the document.styleSheets API, which allows you to access stylesheets used by a website. Using this API is simple, for example, document.styleSheets[0].cssRules will provide all CSS rules for the first stylesheet on a page. When I t ...

javascriptcss

Is there a way to switch the classList between various buttons using a single JavaScript function?

I'm currently developing a straightforward add to cart container that also has the ability to toggle between different product sizes. However, I am facing difficulties in achieving this functionality without having to create separate functions for ea ...

javascriptjquerycsstoggle

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

javascripthtmlcssforms

How can I use jQuery to show an HTML dropdown menu populated from PHP?

Currently, I am working with a PHP backend that retrieves data from SQL. Specifically, it pulls a list of user ID numbers. I would like to showcase that list within an HTML select element using jQuery after a button is clicked. While contemplating how to ...

phpjquerysql

What are the steps to resize a YouTube embedded video?

I am currently attempting to use a YouTube video as the background for breadcrumbs on my website. However, I am facing an issue with setting the video width to cover the full screen. The image below shows that the video is displayed in the center of the if ...

htmlcssvideoiframeembed

Various CSS libraries offer a range of design options, including DataTables and Bootstrap

Incorporating both Bootstrap and DataTable into my design has caused conflicts with CSS styles. This issue extends beyond just these libraries, making me wonder if there is a way to prioritize my own styles over library styles. Can anyone provide guidanc ...

htmlcsstwitter-bootstrapdatatable

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt