New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve visibility of wizard TOC #3222

Closed
ebruchez opened this Issue May 31, 2017 · 8 comments

Comments

Projects
2 participants
@ebruchez
Collaborator

ebruchez commented May 31, 2017

The Wizard TOC and the Error Summary both easily get hidden when scrolling. If space allows, could we make it so that they stay in the viewport?

I thought that GitHub did this for issues but apparently not (or no longer).

+1 from evaluator

@ebruchez

This comment has been minimized.

Collaborator

ebruchez commented Apr 17, 2018

@ebruchez

This comment has been minimized.

Collaborator

ebruchez commented Apr 17, 2018

Could plain CSS be used to handle the TOC position?

@ebruchez

This comment has been minimized.

Collaborator

ebruchez commented Apr 20, 2018

It looks like position: sticky might be what we need, but it's not supported at all with IE. position: fixed is.

@ebruchez

This comment has been minimized.

Collaborator

ebruchez commented Apr 20, 2018

There is at least one polyfill.

@ebruchez

This comment has been minimized.

Collaborator

ebruchez commented Apr 20, 2018

position: sticky appears to work with Chrome when applied in the right spot. Next step would be to try a polyfill for other browsers.

@ebruchez

This comment has been minimized.

Collaborator

ebruchez commented Apr 23, 2018

  • try polyfill
  • Safari: need -webkit- prefix
  • don't enable on mobile (one-column layout), or TOC moves up/down a little bit
@avernet

This comment has been minimized.

Collaborator

avernet commented Apr 26, 2018

@ebruchez mentioned that he added <xh:div class="fr-toc-inner"> line 422 that he's testing with .fr-toc-inner { position: sticky; top: 0 }.

@avernet

This comment has been minimized.

Collaborator

avernet commented Apr 30, 2018

Implemented in 747f40e. We support this in browsers that properly implement the position: sticky, namely Chrome, Firefox, and Edge, but not Safari (as of 11.1) or IE.

@avernet avernet closed this Apr 30, 2018

@avernet avernet added this to Done in Orbeon Forms 2018.1 via automation Apr 30, 2018

@ebruchez ebruchez changed the title from Improve visibility of TOC and error summary options to Improve visibility of wizard TOC May 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment