Flyout: overlapping content

[thephez]

Is there a way to customize the location of the flyout? The switch from a static location on the bottom left to this floating thing on the right is pretty invasive for themes that take advantage of the right side of the screen. I didn't see anything on https://docs.readthedocs.io/en/stable/addons.html#enabling-read-the-docs-addons about how to adjust this and don't see an option on the dashboard other than enabling/disabling.

Front conversations

[humitos]

Hi @thephez! Thanks for the feedback. Currently, we only support enabling/disabling the floating flyout as you figured it out already. We are working together with theme authors to integrate this data into their own themes so it doesn't cover the useful content.

[humitos]

Related to

• Flyout: allow users to close it #384

[sciencewhiz]

It also takes up content space on mobile

[ferdnyc]

As @thephez said,

The switch from a static location on the bottom left to this floating thing on the right is pretty invasive for themes that take advantage of the right side of the screen.

I notice that the flyout.css file even supports positioning at the bottom-left, top-left, and top-right... it's just that bottom-right is hardcoded in flyout.js currently. (And because the flyout exists in a ShadowRoot, AFAICT it can't be styled by CSS in the main page.)

Just being able to configure the position class from bottom-right to bottom-left would be a big help, particularly if it could be done from within a theme (since they know best where in their layout the flyout won't interfere with other content).

[humitos]

Just being able to configure the position class from bottom-right to bottom-left would be a big help, particularly if it could be done from within a theme (since they know best where in their layout the flyout won't interfere with other content).

We are working on this approach. The goal is to leave theme authors the chance to define the web component on their theme like <readthedocs-flyout position="bottom-left"></readthedocs-flyout> to display the flyout at the bottom left. However, we also want to give the project owners the ability to change this value defined by the theme from the WebUI/dashboard. Take a look at this PR that explains how it works: #482

@ferdnyc @thephez would that be useful for your use case? We will really appreciate your feedback at this development stage.

[thephez]

Yes, having the option in the dashboard would be helpful for me. Hopefully themes will eventually be able to integrate it well too. But the dashboard option shown in #482, plus the ability to customize the appearance, would definitely be helpful in the near term. 👍

[ericholscher]

We shipped the location in the Addons settings, so you should at least be able to update it now. Let us know if that works for you.

[thephez]

Thanks! This gives us some flexibility. Looks like it worked as expected 👍

[ferdnyc]

@ericholscher Being able to manually set the location in the project setting seems to work fine; I notice it doesn't require a rebuild of the docs (nice!), but does seem to require a force-reload of the page to get it to switch location, at least in Windows Chrome 131.0.6778.266 (Official Build) (64-bit). Still, that's minor.

I'll need to experiment with the theme-driven location feature... I'm using the Furo theme which hasn't been updated to use <readthedocs-flyout position="bottom-left"></readthedocs-flyout> yet... but I'll try with a forked copy, and assuming that works as expected I can open a PR to update Furo accordingly.

Thanks!

[ferdnyc]

Hmm. Sorry, I guess I'm not clear from the discussion here or in #482 exactly where the <readthedocs-flyout position="bottom-left"></readthedocs-flyout> tag is expected to be.

I created a fork of Furo and added it to the footer code for the page, and while I see the tag in the source for my test project, the flyout hasn't moved.

Is <readthedocs-flyout> a body tag, or a head tag? If body, does it need to be set at any specific level of the DOM?

[humitos]

Is <readthedocs-flyout> a body tag, or a head tag? If body, does it need to be set at any specific level of the DOM?

It's a body tag, yes. It doesn't have to be at any specific location when using position="bottom-left" since it's a floating position. We are currently working on a position="inline" that will behave as an inline HTML element in #500. That positioning will depend on its DOM's context.

[ferdnyc]

@humitos Thanks, that's good to hear.

Augh! And the problem in my test project is that I used <rtd-flyout> instead, dunno how I made that mistake.

[ferdnyc]

I can confirm that when you actually use the correct tag name, it works as expected. 🫢