FLUID-5708: On off toggle styling needs to be update due to overflow into adjacent panels

Description

To replicate navigate to infusion/examples/framework/preferences/conditionalAdjusters/

Make sure there are no elements before the toggle as the vertical spacing providing by the elements will prevent the bug from triggering.

Click on/off toggle, in the "on" state, there will be overflow onto the adjacent panels.

figure 1. In css, remove overflow hidden for the toggle. Toggling "on" in the speaking panel causes overflow into the increase size panel pushing the header down

figure 2. In css, remove "list-style: hidden". Assuming it's an overflow issue, the overflow onto adjacent panels is entirely fixed but the styling for the on-toggle is broken. Meanwhile the off-toggle is not affected.
Removing resetting list-style to default in css fixes the overflow issue.

figure 3. There is an input checkbox hidden with css according to a foundation hack (see link below) that requires a "position: absolute" that when revealed is about the same size as the overflow space.
Unhiding the hidden checkbox also fixes the overflow issue

Other notes: figure 4. display-inline will temporarily fix the issue as it will align the space for the hidden checkbox with the space for the visible toggle. However it introduces the overflow issues into the prefs framework demo. Most likely caused by some combination of the toggle styling and hidden checkbox.

Suggested solution is to completely refactor the styling and semantics of the on/off toggle to make the toggle more robust and resolve this issue moving forward.

—

The foundation hack that is applied to the checkbox to make it visibly hidden but accessible:
Show for screen readers only
http://foundation.zurb.com/docs/components/visibility.html

.show-for-sr {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}

Attachments

Comments

• Kaye Mao commented 2015-08-12T09:58:21.112-0400

  New user interface styling includes new toggles FLUID-5738

• Justin Obara commented 2016-07-11T14:48:32.365-0400

  The figures attachments are missing; however due to the detailed descriptions, complexity of recreation, and need to completely refactor, I have not replaced them at this time. If someone has time to do that in the future before the on/off toggles are refactored, it would be appreciated.

• Justin Obara commented 2017-01-19T13:54:35.662-0500

  The on/off toggles should be restyled as per new designs ( https://wiki.fluidproject.org/display/fluid/(Floe)+User+Interface+(Learner)+Options+Mobile+and+Responsive+Design )

• Justin Obara commented 2017-01-19T15:08:29.757-0500

  Look into reusing code developed in this PR https://github.com/fluid-project/infusion/pull/726

• Justin Obara commented 2017-02-09T15:05:54.535-0500

  The on/off toggles should respond to the "inputs larger" adjuster.

• Justin Obara commented 2017-02-14T09:44:10.660-0500

  First pass at styling using :before and :after pseudo elements. I'm afraid that this will be brittle though.
  https://jsfiddle.net/cu09c3st/6/

• Justin Obara commented 2017-02-14T15:06:09.589-0500

  Another options with more structure. Could clean up the CSS and class usage.
  https://jsfiddle.net/zxm507Lg/1/

  Working implementation on Safari and Chrome:
  https://jsfiddle.net/zxm507Lg/8/

  Cross-browser working implementation:
  https://jsfiddle.net/zxm507Lg/11/

• Cindy Li commented 2017-04-03T15:18:18.781-0400

  The pull request https://github.com/fluid-project/infusion/pull/811 has been merged into the project repo master branch at bc7374793cd254f84b56750e9c10c3660398d4e1

• Cindy Li commented 2017-04-10T15:12:41.035-0400

  The respective infusion-docs pull request has been merged into the project repo master branch at 47114433f7ac15feafffc594080118e1f6732eae