Skip to content
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.

Sign up for GitHub

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

Jump to bottom

bug: Range knob is clipped with modern form syntax in ion-item #27199

Closed
3 tasks done
sean-perkins opened this issue Apr 13, 2023 · 2 comments · Fixed by #28199
Closed
3 tasks done

bug: Range knob is clipped with modern form syntax in ion-item #27199

sean-perkins opened this issue Apr 13, 2023 · 2 comments · Fixed by #28199
Assignees
@sean-perkins
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@sean-perkins
Copy link
Contributor

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

When a modern ion-range is rendered inside of ion-item, the range knob is clipped when at the start or end of the control.

Comparison of standalone vs. inside ion-item:
CleanShot 2023-04-13 at 11 44 51

Note: This behavior only happens when rendered inside ion-item. When ion-range is rendered by itself, it does not clip.

Expected Behavior

The range should adjust styling when used inside of ion-item, so that the range knob is always visible and never clipped.

Steps to Reproduce

  1. Render <ion-range aria-label="Volume"></ion-range> inside of ion-item.
  2. Observe: The range knob is clipped (for both iOS and MD)

Code Reproduction URL

https://stackblitz.com/edit/angular-9scsxd?file=src%2Fapp%2Fexample.component.html

Ionic Info

N/A

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Apr 13, 2023
@liamdebeasi
Copy link
Contributor

Looks like these legacy range styles still apply when used in an item:

MD:

ionic-framework/core/src/components/range/range.md.scss

Line 32 in 7ad84cb

@include padding($range-md-padding-vertical, $range-md-padding-horizontal);

iOS:

ionic-framework/core/src/components/range/range.ios.scss

Line 22 in 7ad84cb

@include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);

@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels Apr 13, 2023
@ionitron-bot ionitron-bot bot removed the triage label Apr 13, 2023
@sean-perkins sean-perkins self-assigned this Apr 13, 2023
This was referenced Apr 13, 2023
Closed
Merged
@mapsandapps mapsandapps mentioned this issue Sep 1, 2023
Closed
3 tasks
@liamdebeasi liamdebeasi mentioned this issue Sep 19, 2023
Merged
2 tasks
github-merge-queue bot pushed a commit that referenced this issue Sep 20, 2023
@liamdebeasi @sean-perkins @Ionitron
fix(range): knob is not cut off in item with modern syntax (#28199)
0104d89 
Issue number: resolves #27199

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using the modern range in an item, the knob will get cut off by the
item when the value is at either the min or the max.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Range knob is no longer cut off by the item

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


This is an extension of
#27188. I decided to
make a separate branch/PR since I added tests and changed the
implementation a bit. Feel free to take all/some/none of this code.

---------

Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: ionitron <[email protected]>
liamdebeasi added a commit that referenced this issue Sep 22, 2023
@liamdebeasi @sean-perkins @Ionitron
fix(range): knob is not cut off in item with modern syntax (#28199)
8169741 
Issue number: resolves #27199

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using the modern range in an item, the knob will get cut off by the
item when the value is at either the min or the max.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Range knob is no longer cut off by the item

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


This is an extension of
#27188. I decided to
make a separate branch/PR since I added tests and changed the
implementation a bit. Feel free to take all/some/none of this code.

---------

Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: ionitron <[email protected]>
liamdebeasi added a commit that referenced this issue Sep 26, 2023
@liamdebeasi @sean-perkins @Ionitron
fix(range): knob is not cut off in item with modern syntax (#28199)
9050a74 
Issue number: resolves #27199

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using the modern range in an item, the knob will get cut off by the
item when the value is at either the min or the max.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Range knob is no longer cut off by the item

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


This is an extension of
#27188. I decided to
make a separate branch/PR since I added tests and changed the
implementation a bit. Feel free to take all/some/none of this code.

---------

Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: ionitron <[email protected]>
@ionitron-bot
Copy link

ionitron-bot bot commented Oct 20, 2023

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Oct 20, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@sean-perkins sean-perkins

Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(range): knob is not cut off in item with modern syntax ionic-team/ionic-framework
2 participants
@liamdebeasi @sean-perkins