Skip to content

input[type=range] styles not scoped to .uv #962

@HussainVAM

Description

@HussainVAM

UV version:

 universalviewer@4.0.25

I'm submitting a:

  • bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below
  • feature request => please use the user stories repo
  • support request => Please do not submit support requests here, use stackoverflow

Current behavior:

Styles from the universal viewer package are effecting range slider elements outside of .uv scope.
Elements with input[type=range] are being affected by styles in the following file /src/content-handlers/iiif/modules/uv-shared-module/css/range.less. Other partials in this directory are scoped or more specific so don't effect elements at a global level.

For an example of the bug please see the input range slider on the following link :
https://www.vam.ac.uk/articles/john-constables-sketches#layerstack1
The range slider element normally has a width of 100% but is being overridden to 300px from the range.less file in the Universal viewer package.

Expected behavior:

Styles from stylesheets in universal viewer should be scoped so don't affect unclassed input elements across the rest of the page.

Steps to reproduce:

Please see the range slider found on the following link. This input[type=range] element should have 100% width, but is being overritten by the universal viewer range.less partial.
https://www.vam.ac.uk/articles/john-constables-sketches#layerstack1

Related code:

Pull request created with the fix here : #961
Demo with fix in place : https://universalviewer-git-fork-hussainvam-main-mnemoscene.vercel.app/#?xywh=-684%2C-197%2C3936%2C3936
Please see the gallery view / thumbnail view on the above link to make sure fix has no unintended side effects.

Other information:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions