Responsiveness of the element along the vertical axis

I have an element that, when clicked, should display additional content. However, when the headline contains a lot of text, the element does not expand vertically as it should.

Thank you for your help!

Check out how it looks currently

This is my HTML code:

<div class="faq-default-content faq-content">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test... </a>
          </h4>
        </div>
        <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">
            <div class="panel_body_up">
              <p>Additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is another test ... </a>
          </h4>
        </div>
        <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">
            <div class="panel_body_up">
              <p>More additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

This is my CSS:

.faq-default-content.faq-content {
  margin-top: -10px;
}
.faq-content .panel-group .panel {
  border-radius: 0;
  margin-top: 10px;
}
.faq-content .panel-group .panel {
  background: #fff none repeat scroll 0 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 10px;
}
- Rest of original CSS -
htmlcssresponsive-designresponsiveness

Answer №1

Eliminate fixed height from .panel-heading

.faq-default-content.faq-content {
  margin-top: -10px;
}

.faq-content .panel-group .panel {
  border-radius: 0;
  margin-top: 10px;
}

.faq-content .panel-group .panel {
  background: #fff none repeat scroll 0 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 10px;
}

.faq-content .panel-group .panel.panel-default {
  border: medium none;
}

.faq-content .panel-group .panel.panel-default .panel-heading {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #e6e8ed;

  padding: 15px 0;
}

.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a {
  color: #333;

  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  padding-left: 65px;
  line-height: 1.6;
  position: relative;
}

.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a::after {
  color: #fff;
  content: "\f056";
  font-family: "FontAwesome";
  font-size: 20px;
  height: 47px;
  left: -1px;
  padding: 9px 15px;
  position: absolute;
  top: -16px;
  width: 47px;
  background: #276398;
}

.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a.collapsed:after {
  border: 1px solid #e6e8ed;
  border-right: 0;
  color: #276398;
  content: "\f055";
  font-family: "FontAwesome";
  font-size: 20px;
  height: 47px;
  left: -1px;
  padding: 9px 15px;
  position: absolute;
  top: -16px;
  width: 47px;
  background: #FFF;
}

.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body {
  border-top-color: #fff;
  padding-bottom: 14px;
  padding-top: 17px;
}

.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body .panel_body_up p {
  color: #8b8b8b;
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
  font-family: 'PT Sans', sans-serif;
  font-style: italic;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="faq-default-content faq-content">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test...Tampered!</a>
        </h4>
      </div>
      <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          <div class="panel_body_up">
            <p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a></div>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test...Tampered!</a>
        </h4>
      </div>
      <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          <div class="panel_body_up">
            <p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a></div>
        </div>
      </div>
    </div>
  </div>

Answer №2

I believe this is the solution you are seeking 

.faq-content .panel-group .panel.panel-default .panel-heading {
    background: #a66464 none repeat scroll 0 0;
    border: 1px solid #e6e8ed;
    /* height: 47px; */
    padding: 15px 0;
}

The specified fixed height is preventing it from expanding

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

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

How to arrange table data in Angular based on th values?

I need to organize data in a table using <th> tags for alignment purposes. Currently, I am utilizing the ng-zorro table, but standard HTML tags can also be used. The data obtained from the server (via C# web API) is structured like this: [ { ...

htmlcssangulartypescript

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

What is the best way to adjust a wide HTML table to make it narrow enough to fit perfectly within the screen width?

I need assistance with formatting an HTML table that contains multiple columns: <table id="req_header" border="2" style="overflow: auto;"> <tr> <th><i class="fa fa-solid fa-check"> ...

javascripthtml

Is a responsive mega menu with rollover effects available for Bootstrap?

Looking to develop a responsive megamenu for bootstrap 3, I recently came across one that caught my eye: I decided to implement it into my own project at However, I encountered a major issue with the menu functionality on desktop devices, as it requires ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

The attribute aria-required is necessary for a radio group

When creating a required radio group, how should the aria-required="true" attribute be assigned? Specifically, I have multiple <input type="radio"> elements with the same name grouped under a <fieldset>. Should the aria-required be placed o ...

htmlradio-buttonaccessibilitywai-aria

Help with guiding and redirecting links

Here's the code snippet: <script> if(document.location.href.indexOf('https://thedomain.com/collections/all?sort_by=best-selling') > -1) { document.location.href = 'https://thedomain.com/pages/bestsellers'; } </script& ...

javascriptcssif-statementshopifyhttp-redirect

PHP Content File for Dynamic Ajax Website

I recently came across a very informative article that discussed how to create crawlable and link-friendly AJAX websites using pushState. The author provided detailed instructions on the process, but left out a crucial detail - how to store data in a PHP f ...

phpjqueryhtmlajax

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

Duplicate multiple "li" elements using jQuery and place them in a designated position within the ul element, rather than at the end

I am currently working on developing a dynamic pagination bar. This pagination bar will dynamically clone the "li" elements based on a number received from an external webservice. Here is the structure of my pagination element: <ul class="pagination"& ...

javascriptjqueryhtmlcss

Effective Ways to Add Space Between Label and Textfield in React Using MaterialUI

Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column t ...

cssreactjsmaterial-ui

Issue with iPad Pro displaying Bootstrap 4 Navbar toggle icon

Having trouble with my Bootstrap 4.1.1 navbar on iPadPro. It's not displaying the correct data from the div and it's not collapsing properly. However, it works fine on small devices. Any suggestions on how to fix this issue? Here's the code ...

cssangulartwitter-bootstrap

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

Can anyone recommend any drag-and-drop jQuery plugins that offer similar functionality to Gmail's attachment dragging and dropping feature? I would like the ability to track the upload progress. However, I am specifically looking for options without ...

jquerycsshtmldrag-and-drop

Placing images inside a div causes them to vanish

I encountered a strange issue where the images I added to a background disappeared. .Background1{ position:relative; top:0%; left:0%; height:100%; width:100%; content:url("/assets/backgroundlayer1.jpg") } .Background2{ posi ...

htmlcssangular

ReactJS: Want to update card design by utilizing the onClick event handler

Currently, I am aware that there will be a need to refactor this code later on to separate things into their own components. However, due to time constraints, I have to wire this up as is at the moment. To achieve this, I utilized array.map() to create car ...

javascriptcssreactjsonclick

Converting images to greyscale or transparency within a ReactJS component

I am exploring ways to transform an image into grayscale or make it transparent before using it as a background in ReactJS. Is there a way to achieve this in ReactJS? My current code snippet is shown below: <GridListTile> <img style={{ -we ...

javascriptcssreactjs

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

https://i.stack.imgur.com/GQAMy.jpg I am facing a challenge with joining two tables, table1 and table2, in MySQL. I need assistance in creating the resultant table as shown in the attached picture. Your help in solving this issue would be greatly appreci ...

phphtmlmysqllaravelvue.js

Implementing Bootstrap 3 mobile design by necessity

My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates. Type 1 <div class="row"> <div class="col-md-4"> <h1>title</h1> <h3>sub</h3> </div> ...

jqueryhtmlcsswordpresstwitter-bootstrap

On three out of five pages, Mozilla Firefox and Internet Explorer are causing extra spacing in my navigation section, yet not on every page

I've been troubleshooting my website and can't seem to pinpoint the issue. I have 5 pages all connected to the same CSS file and created in a consistent manner. Interestingly, Safari, Chrome, and Opera display everything correctly. However, in Fi ...

csspadding

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

jquerycssgoogle-plus