search

ualibraries / Guide-on-the-Side

The University of Arizona Libraries will no longer provide support for Guide on the Side. The code will remain openly available; however, UAL can no longer provide code fixes or upgrades.
https://ualibraries.github.io/Guide-on-the-Side/about.html
Other
66 stars 48 forks source link

"Next" and "Previous" show up out of place on long tutorials #136

Closed simpsonw closed 7 years ago

simpsonw commented 8 years ago

Steps to reproduce

  1. Create a tutorial with lots (> 40) of chapters/page breaks.
  2. Scroll through the tutorial.

    Expected result

Only the arrow navigation will show below the content.

Actual result

The "Previous" and "Next" text partially displays:

gots_prev_next_bug

Notes

It appears that the text is coming from a "step" div that has not yet been navigated to and is some how wrapping around. Decreasing the width on the .items form seems to help, but I'm not sure if that has any weird side effects.

caosborne89 commented 7 years ago

I think this has to do with how the height for each "scrollable" container is being set. One way to get a better look is to uncheck overflow-x for div#scrollable and scroll a little to the right. It almost looks what's being cutoff from the other steps is leaking into the current step. Take a look at app/webroot/js/tutorials/view_tutorial_only.jsview_tutorial_only.js

caosborne89 commented 7 years ago

So I've committed the only fix that I could come up with. It seems to work correctly, though I'd really appreciate it if someone could review this before merging. I'm not sure why we needed the inner html (Next and Previous) in the first place, so I maybe overlooking something.

zensense commented 7 years ago

This seems to work where we leave an empty string for the title parameter of HTML->link() signature. I feel this is a bit hacky, but maybe necessary due to Cake internals for templates. https://book.cakephp.org/2.0/en/core-libraries/helpers/html.html

@caosborne89 Can you check your code and make sure that you only leave the title parameter empty.