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.

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

Dashboard: Slider overlapping with right input field #71282

Merged
merged 2 commits into from
Jul 10, 2023

Conversation

Develer
Copy link
Contributor

@Develer Develer commented Jul 10, 2023

What is this feature?

There is a slider component on the field config right-side component. The slider's top range number is overlapping with the right-standing input field.

Current view:
Screenshot 2023-07-07 at 17 10 33

Possible solution (align number by the right edge of slider):
Screenshot 2023-07-07 at 17 13 24

I decided to go a bit different way and just added left-margin based on Grafana Labs Storybook. Works fine for me. I think in most case scenarios max value is 100 so it shouldn't be any overlapping.

Which issue(s) does this PR fix?:

Fixes #71220

Special notes for your reviewer:

Please check that:

  • It works as expected from a user's perspective.
  • If this is a pre-GA feature, it is behind a feature toggle.
  • The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

@Develer Develer added area/dashboard internal for issues made by grafanistas labels Jul 10, 2023
@Develer Develer added this to the 10.1.x milestone Jul 10, 2023
@Develer Develer requested a review from a team as a code owner July 10, 2023 13:17
@Develer Develer self-assigned this Jul 10, 2023
@Develer Develer requested review from joshhunt and JoaoSilvaGrafana and removed request for a team July 10, 2023 13:17
Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
@Develer Develer changed the title fix(slider): input field left margin Dashboard: Slider overlapping with right input field Jul 10, 2023
Copy link
Contributor

@JoaoSilvaGrafana JoaoSilvaGrafana left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👍

@Develer Develer merged commit 4206a4d into main Jul 10, 2023
14 checks passed
@Develer Develer deleted the 71220-slider-overlapping branch July 10, 2023 19:36
grafana-delivery-bot bot pushed a commit that referenced this pull request Jul 10, 2023
* fix(slider): input field left margin

* fix(slider): use theme spacing variable

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>

---------

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
(cherry picked from commit 4206a4d)
polibb pushed a commit that referenced this pull request Jul 14, 2023
* fix(slider): input field left margin

* fix(slider): use theme spacing variable

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>

---------

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
@ricky-undeadcoders ricky-undeadcoders modified the milestones: 10.1.x, 10.1.0 Aug 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Dashboard: slider component range number overlapping with input field
5 participants