FLUID-6230: In responsive view the tab focusing the contrast panel doesn't centre it in the view.

Metadata

Source
FLUID-6230
Type
Bug
Priority
Major
Status
Open
Resolution
N/A
Assignee
N/A
Reporter
Justin Obara
Created
2017-11-24T13:16:51.284-0500
Updated
2021-07-29T01:51:47.967-0400
Versions
  1. 2.0
  2. 3.0
Fixed Versions
  1. 5.0
Component
  1. Prefs Framework
  2. UI Options

Description

When tab focusing the contrast panel adjuster in the responsive view it isn't centred on screen like the other adjusters.

Steps to reproduce:

  1. Open the UI Options demo
  2. Adjust the window size ( on desktop ) so that the mobile presentation is shown
  3. Open UI Options
  4. Using the keyboard tab to the contrast adjuster

Notice that it isn't centred in the screen.

Attachments

Comments

  • Justin Obara commented 2017-11-24T13:20:23.682-0500

    For UIO+ we can modify the behaviour to add the a modelListener on panelIndex to scroll the panel. This effectively snaps the panels into place on scroll.

    modelListeners: {
    "panelIndex": {
        listener: "fluid.prefs.arrowScrolling.scrollToPanel",
        args: ["{that}", "{that}.model.panelIndex"],
        includeSource: "scrollEvent"
    }
}

    In ArrowScrolling.js we can remove the "excludeSource: ["scrollEvent"]" from the "panelIndex" modelListener" however, there are still some issues. In Firefox it doesn't scroll far enough to indicate that a new panel is on screen so the problem still remains. Also, because this code is still run in the desktop view, it makes scrolling appear jittery.

  • Justin Obara commented 2017-11-24T14:01:25.860-0500

    screenshot.png shows the the contrast panel misaligned after tab focusing it in the mobile view.

  • Justin Obara commented 2017-11-27T08:52:58.695-0500

    The styling of the panel should also be reviewed, as it seems they are slightly larger than the viewport width. I believe this has to do with extra padding in the panel and the border around each panel.