We know that UI elements with a fixed position cause layout issues even resulting in a rejection in case of plugins submission.
Is there any chance that it will be fixed in the next XD release?
1 Like
Should be fixed in XD 23. I’ll double check.
Perfect, thank you very much.
Can we submit now using fixed position or such plugins would be still rejected?
How does this correspond to position: absolute, which seems to work in 21/22?
position: fixed allows content to be positioned irrespective of scroll position, whereas position: absolute just positions content based on the nearest positioned element, while allowing the content to scroll.
In XD 21/22, the fixed positioning offset was based on the plugins panel coordinates, not the plugin’s coordinates. This meant that you needed to add like 90 or 100px vertically to avoid the header that plugins have in the panel. It also allowed the plugin to escape its own UI container.
In XD 23/24, you can now use position: fixed. In fact, there are some plugins that clearly used it and are now slightly broken due to use. If you do use position: fixed be sure to detect the version of XD or set your plugin’s minVersion to 23, since XD 21/22 will render differently than 23/24.
3 Likes
I’ve just tried, but page navigation and footer with fixed position scroll with the plugin’s content, though initially well positioned at the bottom.
Tested in XD 24 Prerelease (Mac).
2 screenshots showing the result:
Where’s the XD 24 prerelease? Special access?
Ah, I see it now in the private prerelease forum. Wasn’t there two days ago…
It just went up – sending out an announcement on it today.
1 Like
… and depending on which group you’re a part (users or developers), you may get different prereleases…
1 Like
Looks like one hell of a release–congrats to the whole team!
2 Likes
From the Adobe Tech Blog on Medium:
- Fixed the issue where plugins using
position:fixedcould take over the entire plugin panel. This means you can now safely useposition: fixedin your plugins ( if yourhost.minVersionis23or greater ). Also note that you also don’t need any offset to account for the plugin panel header.
What could make my elements scroll with the entire panel?
FYI: You can create your own fixed positioning by moving an element outside of the group it’s part of.
For example, change this:
<div id="myContainer">
<div id="fixedElement" style="position:fixed">...</div>
...
</div>
to this:
<div id="myContainer">
...
</div>
<div id="fixedElement" style="position:absolute;top:0;left:0" >...</div>
1 Like
And that’s all inside a panel or modal, of course.
1 Like
Very strange. They’re already out of any container as they are appended to the panel itself. Tried both with ‘fixed’ and ‘absolute’: they keep scrolling with the rest of the content.