Flyout: define position="inline"
#500
Conversation
Allow theme developers to define `position="inline"` to adapt the flyout to its container. It uses `bottom: 0` to make it open up side, and it should probably use `top: 0` to make it open down side.
|
Here is a very rough example of inline positioning: #501 It doesn't take much more but there is some cleanup required and working into themes might require experimenting with overflow clipping on the theme elements. |
Here is a quick example of using inline positioning. I've reused `top-left` position to indicate "downward expanding menu" but this could be something more explicit. It would be nice as `position="inline down"` perhaps. There are two basic examples, one truly inline and one flyout inside a mock sidebar menu -- just to illustrate a theme maintainer nesting the flyout element inside another element. The tricky part here is making the `main` menu "float" over other content, and we use `overflow: visible` and absolute positioning to allow content to reflow around the element. There are some fixes required here: too narrow of a parent clips the collapsed menu, we probably want a max width on the popup menu (keeping the collapsed menu width 100% (this is to fill the parent element). https://github.com/user-attachments/assets/413d7c03-38d3-48e0-a88a-4cf53cc8dd92
|
This is an example of what I currently have. It shows the current default floating bottom right position, then the bottom inline position and finally the top inline position. I think we should probably change
|
Read the Docs theme
|
Sphinx with Furo theme
|
|
The furo theme isn't showing properly in the sidebar, right? |
|
It works for me. I uploaded a GIF in my previous comment. Why are you asking? |
|
It's overlapping? The red line is the sidebar divider, right?
|
|
Ah, yes. I think that is responsibility of the theme author, not the flyout itself -- but I'm not 100% sure. I understand the flyout container has to be adjusted with CSS properties to make the flyout behave as expected. |
|
By the way, removing the |
|
I was able to fix the in Furo adding CSS in the flyout container without changing anything in our code. So, this is responsibility of the theme developer.
|
|
I tested this implementation on Note that it works fine, it just requires adding some specific style to the flyout container already defined in the theme. These are the override changes used in test-builds: readthedocs/test-builds@
Note there is an extra pixel in the left side. I'm trying to fix that. I need to find the correct formula for |
|
Boom! I was able to find the CSS combination that works 👍🏼 Example for Insipid, Read the Docs and Furo themes.
|
|
I used JavaScript to calculate the |
| ); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
So we should always avoid doing anything with JS, especially with Element.style. What this property does is add inline style="" attribute to the element, which causes trouble with secure CSP rulesets and causes problems when users try to override our styles.
What value do we not know that we need to perform calculations in JS to get?
There was a problem hiding this comment.
I know, but I did it in JS to show this is possible at least.
I wrote what I need to do in #500 (comment)
There was a problem hiding this comment.
Do you know how to do that with pure CSS? 🤔
Allow theme developers to define
position="inline"to adapt the flyout to its container. It usesbottom: 0to make it open up side, and it should probably usetop: 0to make it open down side.readthedocs-flyoutexplicitly usingposition=inlinesphinx_rtd_theme#1637position=inline#495