Accordion elements that are active will move all other content on the page

I am currently working on creating an accordion using the following code: https://codepen.io/rafaelmollad/pen/JjRZbeW. However, I have encountered a problem where when clicking on one of the accordion items, the content expands and pushes the title upward. Upon further investigation, I found that if the accordion is not vertically centered, it works as desired, but I need it to be centered. I have tried to center the accordion container by adding the following code:

 position: absolute;
 top: 50%;
 transform: translateY(-50%)

However, removing these lines causes the form to be positioned at the top of the page, resulting in the desired output without the container being centered.

javascripthtmlcssaccordion

Answer №1

Revise your container style as follows

.container {
  width: 90%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  position: absolute;
  top: 50%;
/*   transform: translateY(-50%); */
}

This adjustment will meet your requirements without the need for the transform property.

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

I would like to create a layout featuring 3 columns spread across 2 rows, with each column showcasing only images

I've been experimenting with creating a column layout that spans three columns across the top and two rows down. So far, I've managed to create the first row but I'm unsure of how to split it into the second row. .container { display: ...

htmlcsscss-multicolumn-layout

The ng-include directive is having trouble finding the partial HTML files

I've been working on setting up a basic tabset with each tab pulling content from a separate partial view with its own controller. To test everything out, I created three dummy HTML files with simple text only. However, I'm having trouble getting ...

javascripthtmlangularjsasp.net-mvcangularjs-ng-include

LinkedIn's website consistently displays a "1 min read" indicator when sharing articles or

I am currently attempting to remove the '1 min read' text from the description when sharing content on LinkedIn. Example of '1 min read' Although I have added open graph tags to the page and confirmed that they do not contain '1 ...

htmllinkedin-apimetashare-open-graph

Infinite Scrolling in React: Troubleshooting Issues with the dataLength Parameter

A function called newsFeed is utilized within the useEffect hook to make a request to an endpoint for fetching posts made by the logged in user and users they follow. The retrieved data is then saved to the state: const [posts, setPosts] = useState([]) con ...

javascriptreactjsreact-infinite-scroll-componentreact-infinite-scroll

The Javascript executor in Selenium is delivering a null value

My JavaScript code is causing some issues when executed with Selenium's JavascriptExecutor. Strangely, the code returns null through Selenium but a value in Firefox developer console. function temp(){ var attribute = jQuery(jQuery("[name='q& ...

javascriptseleniumnullpointerexceptionselenium-webdriver

Is there a way to implement a function in Javascript or CSS where hovering over a button will cause a div to scroll either left or right

I am working on creating a unique photo gallery layout with a description block positioned below the images. My goal is to incorporate two arrow buttons, one on each side of the photos, that will trigger a scrolling effect when hovered over - shifting the ...

javascriptjqueryscroll

The firebase collection's model doesn't include an add function within its nested collection

I'm currently developing an application where I aim to utilize Firebase for real-time data storage within the context of the Backbone framework. The issue I am facing is as follows: I have a sub-level model and collection, both of which are standar ...

javascriptbackbone.jsfirebasebackbone.js-collections

Utilizing Vue.js to compare two arrays and verify if the results are identical

I am in the process of developing a theater app that requires me to work with JSON data consisting of two arrays: Sections and Groups. While I have successfully loaded both arrays into my Vue app, I now need to compare them to find matches. The first array ...

javascriptjsonvue.js

Using Conditions in AngularJS: Choosing Between Callbacks and Promises in a Service

I am currently faced with a specific scenario where I am uncertain whether to implement a callback or a promise. As someone who is relatively new to promises and just beginning to grasp their concept, I want to avoid falling into any potential anti pattern ...

javascriptangularjscallbackangular-promise

Deciphering the Mysteries of HTTP Headers

I have been using various applications to evaluate the quality of my websites, and many of the improvements suggested relate to missing http headers. Some examples include Content-Security-Policy, Charset, etc... I decided to visit the Wikipedia page on ...

htmlhttp-headers

VueJs Axios - Managing Request Headers

Edit: Is it possible that this is a CORS issue, considering I am on localhost... When using Javascript, I have the ability to define request headers and handle responses like this: $(function() { var params = { // Request parameters } ...

javascriptvue.jsaxios

The application of CSS rule shadowing is not consistently enforced

Why does the text in the selected element not appear yellow like the "char_t" link above, even though they have the same class? It seems like it should be yellow based on the inspector, but it's not displaying as such on the actual page. This issue is ...

cssfirefox

JavaScript enables Partial Views to load: Potential XSS vulnerability identified by HP Fortify

Fortify has identified a XSS vulnerability in my JavaScript function. I need help finding a solution since this method is heavily used in my app. I am attempting to use ajax to call a partial view and then append the resulting HTML to a specific DOM div e ...

htmlmodel-view-controllerxsspartial-viewsfortify

generate code to automatically output the content of a website

I'm in the process of creating a program that automatically navigates to a website and prints a page. Unfortunately, I'm encountering difficulties in getting it to function properly. I've attempted using the selenium chrome driver, but with ...

javascriptc#selenium-webdriver

"Adding a new and unique document to Meteor's MongoDB collection

Currently, I have a simple Tags Collection in Meteor where I check for duplicate Tag documents before inserting: var existingTag = Tags.findOne({name: "userInput"}) If the existingTag is undefined, then I proceed with the insertion. However, I am wonderi ...

javascriptmongodbmeteor

Converting Umbraco Json to a CSS class named "[]"

I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...

htmlcssjsonumbracoumbraco7

Submitting a form via email without the need for PHP

Currently, I am focusing on a project that is small and emphasizes presentation more than security. The main objective is to create a form where users can input data, then click submit for all the information gathered to be sent to a specified 'mailt ...

phphtmlcss

Implement automatic data replacement using PHP and MySQL triggers

The code provided below pertains to postar.php file include "conexao.php"; $consulta = mysqli_query($conexao, "SELECT titus.titus, titus.des, titus.link from titus"); while($postagem = mysqli_fetch_object($consulta)); echo "<d ...

phphtmlmysql

Is there a way to position the search bar on a new line within the navigation bar when the screen size is at its maximum width for mobile

I have a search bar on my navigation bar, but I am looking to move it to the next line within a maximum width if the screen display is extra small (xs) or for mobile devices. Below is the code snippet: <nav class="navbar navbar-expand-md fixed-top ...

htmlcsssearchlayoutbootstrap-4

React Express Error: Unable to access property 'then' of undefined

I'm facing an issue while trying to server-side render my react app for users who have disabled JavaScript and also for better search engine optimization. However, I am encountering the following error: TypeError: Cannot read property 'then' ...

javascriptreactjsexpressaxiosreact-dom-server