Issue with Bootstrap 4 collapse not functioning properly within a flex container

I'm encountering an issue with Bootstrap 4 collapse. Everything works as expected unless I add the "d-flex" class to my form tag.

When I include the "d-flex" class, the form is initially displayed. Upon clicking #reservas_button, the form toggles from hidden to shown and back again.


    <!--reservas-->
<div id="reservas" class="container d-flex flex-column flex-sm-row align-items-center align-items-sm-start">
  <h2 id="reservas_button" data-toggle="collapse" href="#reservas_form">RESERVAS</h2>
  <form id="reservas_form" class="collapse d-flex flex-wrap">

    ...

</div>
<!--/reservas-->
jquerycssflexboxbootstrap-4

Answer №1

Place the flex-displayed div inside a container and then hide the container (another div) to achieve the desired effect.

Answer №2

Avoid using the d-flex class within a form element as it may interfere with the collapse functionality. Your code snippet should function properly if you remove the d-flex class.

Answer №3

Consider including the following:

style="display:flex;"

as an alternative to using d-flex in your CSS class.

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

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

I have a simple question because I'm feeling a bit lost. Check out this JSFiddle link It seems that in Internet Explorer, the contents of my span won't update even though the input is valid. However, in other browsers, the span content changes ...

javascriptjquerycsshtml

Trouble incorporating JSON in JQuery and MVC

I am attempting to trigger my controller using JavaScript and jQuery. Below is the jQuery code I have: <script type="text/javascript> $('form').submit(function (e) { e.preventDefault(); $.ajax({ type: "POST", url: $(this).attr(" ...

c#.netjqueryasp.net-mvcjson

Choosing a subset of data within a JavaScript object with the help of jQuery/jHashtable

Here is an object that I am working with: var data = { "info" : [{ "title": "Desemberkonsert", "description": "MangerFHS 09/10" }], "playlist" : [ { "title": "In This Place", "description": "Excalibur", "href": "desemberkonsert_in-this-place", "url": "flv ...

javascriptjqueryjsonobject

Placing a picture within a box that is 100% of the viewport height

After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the s ...

htmlcss

Smooth Div Scroll experiencing display issues

Trying to integrate the smooth div scroll, specifically the "Clickable Logo Parade" found at: Successfully implemented it on a blank page exactly as desired, but encountering issues when inserting it into the current layout. Could something be causing int ...

javascriptjqueryajax

What is the best way to manage the appearance of multiple elements in React simultaneously?

I have a fun little game that I've been working on. Check it out - here In my game, when you hover over a square, it turns blue. If you hover over it again, it turns white. I achieve this by applying styles to the event target on hover. const handleM ...

cssreactjsreact-hooksmaterial-ui

Troubleshooting Rails 5 and AJAX modal login issues

In my pursuit of implementing ajax authorization in Rails 5.0.0, I have tried numerous guides without success. Here's what I've done: 1. Cloned the Devise Controllers Users::SessionsController < Devise::SessionsController def create re ...

jqueryruby-on-railsrubyajaxdevise

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

csspaddingcss-tables

The JsHelper::domReady function is malfunctioning!

While developing a website with CakePHP, I have encountered an issue... Utilizing the latest version of jQuery... and using JsHelper to accomplish something like this: $this->Js->domReady ( $this->Js->alert ('Page loaded !') ); ...

phpjquerycakephphelper

Vertically center the container

I am struggling to center my container div vertically, similar to how it is horizontally aligning with margin: auto;. Despite searching online for solutions, I have not been successful in finding a method that works for me. It is surprising to me that in t ...

htmlcssvertical-alignment

Converting a Jquery object into a Javascript object

Can someone help me decipher this piece of code? //... obj.dd.on('click', function(event){ $(this).toggleClass('active'); return false; }); //... $(function() { var dd = new DropDown( $('#dd') ); $(doc ...

javascriptjquery

How can I prevent this image from expanding within the section?

I am currently utilizing Bootstrap 4.6 and WordPress along with the ACF Plugin, and I find myself in need of assistance. I am facing an issue where the height of a row in a section needs to adjust according to the content within a column, but the image wit ...

htmlcssbootstrap-4

Retrieve various elements using a loop and dynamic identifiers (perhaps within a multi-dimensional array)

Apologies for the confusing title. I am currently working on a piece of code which can be found here: https://jsfiddle.net/8ers54s9/13/ This code creates a basic text area and compares it to a predefined array to identify common words within a string. If ...

javascriptjquery

top margin is functioning properly in Internet Explorer, but not in Google Chrome

margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...

javascriptjqueryhtmlcss

What could be causing the .hover function to malfunction and how can I make it so that the .hover function only applies within the corner radius area?

I am attempting to make circles react to my jquery .hover function. Below is the JavaScript code I am using: jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + ...

javascriptjquerycssjquery-hover

The horizontal layout for the Bootstrap 3 sub menu is not displaying beneath the dropdown as expected

Check out my testing site here. I envision the navigation of my website to look like this in the near future, albeit at a lower resolution. While experimenting with the inspector tool, I noticed that changing the display property to inline-block causes t ...

csswordpresstwitter-bootstraptwitter-bootstrap-3submenu

The margin-bottom attribute does not display any vacant area

I recently attempted to center the inner box within the outer box in this codepen. To achieve this, I utilized a workaround by applying margin-bottom: 20px;. However, it appears that this approach did not generate any visible space between the bottom line ...

htmlcss

Creating visual content on a website

I'm currently working on a project where I need to showcase the results of a numerical model I am operating. My goal is to gather user input in the form of latitude/longitude coordinates, utilize php (or a similar tool) to trigger a python script that ...

javascripthtmlcssweb

In the Opera browser, the closing script tags seem to mysteriously vanish

I recently built a website using bootstrap and implemented the JQuery load function to merge separate HTML files into one for better organization. The site is currently live on github pages. However, I've encountered an issue specifically with Opera ...

javascriptjqueryhtmltwitter-bootstrapopera

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

htmlcssanimationsvg