# Layout shift after opening volume control

**URL:** <https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110>\
**Category:** Podlove Web Player\
**Created:** [March 21, 2023, 9:56am UTC](https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110 "2023-03-21T09:56:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karl](https://community.podlove.org/letter_avatar_proxy/v4/letter/k/34f0e0/32.png) [@Karl](https://community.podlove.org/u/Karl)\
**Post date:** [March 21, 2023, 9:56am UTC](https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110/1 "2023-03-21T09:56:05Z")

</div>

Hello,

I have an issue with the volume control element with the player. When I click the volume control button and expand the volume control bar, this causes a layout shift, so that the play button gets cut off (see attached  
 ![Screenshot 2023-03-21 104244](https://community.podlove.org/uploads/podlove/original/2X/c/c59cabfb5d5234cae4fbca7e57060e792c0cb3f3.png)

Do you have any tips on how to prevent this?

Best regards,

Karl

---

<div class="post-metadata">

**Author:** ![zusatzstoff](https://community.podlove.org/user_avatar/community.podlove.org/zusatzstoff/32/1026_2.png) [@zusatzstoff](https://community.podlove.org/u/zusatzstoff)\
**Post date:** [March 24, 2023, 6:00pm UTC](https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110/2 "2023-03-24T18:00:28Z")

</div>

It doesn’t seem to be one of the default templates. Can you share the custom template so we can have a look?

---

<div class="post-metadata">

**Author:** ![Karl](https://community.podlove.org/letter_avatar_proxy/v4/letter/k/34f0e0/32.png) [@Karl](https://community.podlove.org/u/Karl)\
**Post date:** [April 6, 2023, 12:34pm UTC](https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110/3 "2023-04-06T12:34:57Z")

</div>

Hey, even without any styling, the layout shift still happens across all themes: So even with this simplified version (without styling) of the “minimal” theme:

```auto
<root>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <play-button variant="simple"></play-button>
                        </div>
                        <div>
                            <progress-bar></progress-bar>
                            <current-chapter></current-chapter>
                        </div>
                        <div>
                            <timer-duration></timer-duration>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <speed-control></speed-control>
                </div>
                <div>
                  <volume-control></volume-control>
                </div>
            </div>
        </div>
    </root>

```

---

<div class="post-metadata">

**Author:** ![zusatzstoff](https://community.podlove.org/user_avatar/community.podlove.org/zusatzstoff/32/1026_2.png) [@zusatzstoff](https://community.podlove.org/u/zusatzstoff)\
**Post date:** [April 7, 2023, 7:42am UTC](https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110/4 "2023-04-07T07:42:27Z")

</div>

Can you share me the link to the screenshot so I can investigate further if this is an issue with the styling or the underlying iframe resizing?

---

<div class="post-metadata">

**Author:** ![Karl](https://community.podlove.org/letter_avatar_proxy/v4/letter/k/34f0e0/32.png) [@Karl](https://community.podlove.org/u/Karl)\
**Post date:** [April 12, 2023, 1:01pm UTC](https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110/5 "2023-04-12T13:01:25Z")

</div>

Hey, if you visit the following page and scroll down a bit you can see the plugin. When clicking the volume control button the iframe seems to shift:

> **[Jobangebote bei codecentric](https://codecentric-website-923068-git-hygraph-impl-46aca6-teamespecial.vercel.app/karriere/jobs)**
>
> Lass dich durch Rollen nicht beschränken. Setze dir mehrere Hüte auf und entwickle dich uneingeschränkt in mehr als nur eine Fachrichtung. Bewirb dich bei codecentric!

Thank you for your time!

---

<div class="post-metadata">

**Author:** ![Karl](https://community.podlove.org/letter_avatar_proxy/v4/letter/k/34f0e0/32.png) [@Karl](https://community.podlove.org/u/Karl)\
**Post date:** [May 3, 2023, 8:58am UTC](https://community.podlove.org/t/layout-shift-after-opening-volume-control/3110/6 "2023-05-03T08:58:06Z")

</div>

Have you had time to take a look at the example I sent yet?