Exploring JQuery 3.1.1 in combination with the powerful CSS flexbox techniques

Question

Exploring JQuery 3.1.1 in combination with the powerful CSS flexbox techniques

When utilizing the fade functions in JQuery, an element that initially has 'display: none' and is then faded out will have JQuery inject 'display: block' when faded in.

In a flexbox layout, this can cause the element to wrap to the next line.

If I remove display:flex from the parent container, it behaves as intended.

Is there a way to remove display:flex only from specific elements that should be hidden initially?

One workaround is to use:

$('el').fadeIn().css('display','inline-block');

However, this approach may not be suitable for this situation. Any alternative suggestions?

Check out the demo below:

$('#clickme').click(function() {
  $('#test').fadeToggle();
  return false;
});

#flex {
  display: flex; /* BREAKS JQUERY FADE, JQUERY INJECTS DISPLAY:BLOCK; */
  flex-direction: column;
}
#main {
  flex: 1;
}
.hidden {
  display: none;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<body id="flex">
  <div id="main">
    <span class="tools"> 
      <a class="a" href="" id="clickme">Click Me</a>
      <span id="test" class="hidden">I should be inline!</span>
    </span>
  </div>
</body>

If you remove display:flex from #flex, the behavior is as desired.

jquery css flexbox

Answer 1

Answer №1

It is a known fact that when you display an element using jQuery, it has to guess the appropriate display style because of CSS's flawed design. The existence of dislay: none should never have been allowed.

jQuery tackles this issue through its getDefaultDisplay function:

function getDefaultDisplay( elem ) {
    var temp,
        doc = elem.ownerDocument,
        nodeName = elem.nodeName,
        display = defaultDisplayMap[ nodeName ];

    if ( display ) {
        return display;
    }

    temp = doc.body.appendChild( doc.createElement( nodeName ) );
    display = jQuery.css( temp, "display" );

    temp.parentNode.removeChild( temp );

    if ( display === "none" ) {
        display = "block";
    }
    defaultDisplayMap[ nodeName ] = display;

    return display;
}

This function essentially creates a temporary element of the same type and places it in the body to determine the default display value for the element being shown. While this method may seem naive, some argue that older versions of jQuery handled this better.

The main issue arises when styling the body as a flex container, causing child elements to become blockified. As a result, the computed display of the dummy element inserted by jQuery will be set to "block", affecting the target element even if it is not part of the flex layout.

To avoid this problem, it is recommended to refrain from using display: flex on the body and instead wrap the content in a separate container.

$('#clickme').click(function() {
  $('#test').fadeToggle();
  return false;
});

#flex {
  display: flex;
  flex-direction: column;
}
#main {
  flex: 1;
}
.hidden {
  display: none;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="flex">
  <div id="main">
    <span class="tools"> 
      <a class="a" href="" id="clickme">Click Me</a>
      <span id="test" class="hidden">I should be inline!</span>
    </span>
  </div>
</div>

Answer 2

It is a known fact that when you display an element using jQuery, it has to guess the appropriate display style because of CSS's flawed design. The existence of dislay: none should never have been allowed.

jQuery tackles this issue through its getDefaultDisplay function:

function getDefaultDisplay( elem ) {
    var temp,
        doc = elem.ownerDocument,
        nodeName = elem.nodeName,
        display = defaultDisplayMap[ nodeName ];

    if ( display ) {
        return display;
    }

    temp = doc.body.appendChild( doc.createElement( nodeName ) );
    display = jQuery.css( temp, "display" );

    temp.parentNode.removeChild( temp );

    if ( display === "none" ) {
        display = "block";
    }
    defaultDisplayMap[ nodeName ] = display;

    return display;
}

This function essentially creates a temporary element of the same type and places it in the body to determine the default display value for the element being shown. While this method may seem naive, some argue that older versions of jQuery handled this better.

The main issue arises when styling the body as a flex container, causing child elements to become blockified. As a result, the computed display of the dummy element inserted by jQuery will be set to "block", affecting the target element even if it is not part of the flex layout.

To avoid this problem, it is recommended to refrain from using display: flex on the body and instead wrap the content in a separate container.

$('#clickme').click(function() {
  $('#test').fadeToggle();
  return false;
});

#flex {
  display: flex;
  flex-direction: column;
}
#main {
  flex: 1;
}
.hidden {
  display: none;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="flex">
  <div id="main">
    <span class="tools"> 
      <a class="a" href="" id="clickme">Click Me</a>
      <span id="test" class="hidden">I should be inline!</span>
    </span>
  </div>
</div>

Answer 3

Answer №2

To achieve the desired layout, flexbox must be applied to the .tools span.

  $(document).ready(function() {

    $('#clickme').click(function() {
      $('#test').fadeToggle();
      return false;
    })

  });

#flex {
  display: flex;
  /* Applying this property breaks the jQuery fade effect as it injects display:block; */
  //flex-direction: column;

}
#main {
  flex: 1;
}
.tools {
  display: flex;
}
.hidden {
  display: none;
}

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

<body id="flex">

  <div id="main">

    <span class="tools"> 
    <a class="a" href="#01" id="clickme">Click Me</a>
    <span id="test" class="hidden">I should be inline!</span>
    </span>

  </div>

Answer 4

To achieve the desired layout, flexbox must be applied to the .tools span.

  $(document).ready(function() {

    $('#clickme').click(function() {
      $('#test').fadeToggle();
      return false;
    })

  });

#flex {
  display: flex;
  /* Applying this property breaks the jQuery fade effect as it injects display:block; */
  //flex-direction: column;

}
#main {
  flex: 1;
}
.tools {
  display: flex;
}
.hidden {
  display: none;
}

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

<body id="flex">

  <div id="main">

    <span class="tools"> 
    <a class="a" href="#01" id="clickme">Click Me</a>
    <span id="test" class="hidden">I should be inline!</span>
    </span>

  </div>

Answer 5

Answer №3

Finally, a solution like this is the key:

$.fn.inline = function() {
    this.css({'display':'inline'});
};

To implement:

$('element').fadeToggle().inline();

Answer 6

Finally, a solution like this is the key:

$.fn.inline = function() {
    this.css({'display':'inline'});
};

To implement:

$('element').fadeToggle().inline();

Exploring JQuery 3.1.1 in combination with the powerful CSS flexbox techniques

Answer №1

Answer №2

Answer №3

Similar questions

Place a list with scrolling and overflow features side by side

Using flexbox auto margin within nested elements: A guide

Struggling to center a div within another div using margin auto

Pair up balls that have matching numbers

Send a JavaScript variable to Twig

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Aligning a picture with a heading

jQuery has identified the JSON object as a string

javascript code for subtracting values in arrays

The jQuery toggle function is malfunctioning when applied to the rows of a table

Add rows to the table dynamically and then execute the script

Printed pages featuring neatly organized two-column div layout

Ways to determine if an AngularJS modal is currently displayed

Looking to remove a specific field from a URL with jQuery

I encountered a frustrating issue with saving user input data using localStorage

Utilize jQuery to dynamically assign classes to list items within a unordered list based on the length of an array

How can I prevent CSS styles from affecting all the tables on my website?

Manipulating Width in CSS

Why isn't my output being shown on the screen?

At times, the animation in SetInterval may experience interruptions