Why wont this div adjust to viewport width?

Design help General
1

I’m completely stumped on this. I rebuilt the accordion component on my website, and for some strange reason, the div for the toggle won’t adjust to the viewport width. But everything elce is behaving as expected.

I tried taking it out of the container to see if that was the issue, but no dice. I also tried turning everything into a block element and using a flexbox as the wrapper, and still nothing. Any suggestions would be much appreciated.

Here is my site Read-Only: LINK

2

Hi there,

Here’s how to make your dropdown fill its parent element’s width.

First, for the parent dropdown:

  1. Select the parent dropdown element and give it a class
  2. Go to Style panel > Size
  3. Set Width to 100%

For the dropdown toggle to fill the horizontal space:

  1. Select the dropdown toggle and give it a class
  2. Go to Style panel > Layout
  3. Set Display to flexbox
  4. Set Align to center

These adjustments will ensure your dropdown properly fills the viewport width.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Unfortunately, this didn’t work.

4

OK. So I’ve narrowed it down to the animation. Apparently, when you use the Size animation vertically, it causes an odd glitch horizontally. Switched over to Hide/Show, and it seemed to fix it.