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

Remove space before and after the slider bar #98

Open
canyavall opened this issue Aug 20, 2019 · 9 comments · May be fixed by #648
Open

Remove space before and after the slider bar #98

canyavall opened this issue Aug 20, 2019 · 9 comments · May be fixed by #648
Assignees
@draggie
Labels
bug report Something isn't working

Comments

@canyavall
Copy link

When a new Slideer is created, it is created inside a view and I can see an space before and after the slider (just set backgroundColor='red' on the style)

This is quite annoying in order to make it if with other components as the slider is always a bit smaller

Is this done in purpose? Can those spaces (padding or margin) be removed and make the bar use 100%

I tried setting the padding, margin, left, right to 0, but nothing...
@ogabrielsantos
Copy link

ogabrielsantos commented Oct 17, 2019 •
edited
Loading

You could temporarily put it inside a view with negative margins:

<View style={{ marginLeft: -10, marginRight: -10 }}>
  <Slider />
</View>

@wojteg1337 wojteg1337 added the good first issue Good for newcomers label Oct 22, 2019
@satya164 satya164 mentioned this issue Oct 23, 2019
Open
@lukewalczak lukewalczak mentioned this issue Oct 30, 2019
Merged
5 tasks
@brunoziie
Copy link

This behavior affects both platforms?

This was referenced May 28, 2020
Open
Closed
@moriyuu
Copy link
Contributor

moriyuu commented Jun 14, 2020

Is this issue still alive? I'd like to work on this issue but the example app doesn't reproduce this.

@charitha95
Copy link

Or with marginHorizontal: -10

@lucidlive
Copy link

lucidlive commented Apr 12, 2021 •
edited
Loading

I see this issue only on Android. I applied the following style to the slider:

marginLeft: Platform.select({ ios: 0, android: -15 }),
marginRight: Platform.select({ ios: 0, android: -15 })

Kinda annoying but it works.

@lirkang
Copy link

lirkang commented Jun 27, 2022 •
edited
Loading

I see this issue only on Android. I applied the following style to the slider:

marginLeft: Platform.select({ ios: 0, android: -15 }),
marginRight: Platform.select({ ios: 0, android: -15 })

Kinda annoying but it works.

it works, thanks

@BartoszKlonowski BartoszKlonowski mentioned this issue Jan 19, 2023
Closed
@BartoszKlonowski BartoszKlonowski added bug report Something isn't working and removed good first issue Good for newcomers labels Jan 19, 2023
@Chr1k0
Copy link

Chr1k0 commented Jul 19, 2023

The issue seems to be still there. The "margin trick" works on android for me but it causes that one tick extra is added to the upper/right limit - with no change in value. so not very useful. :(

@matt-dalton
Copy link

Anyone got an idea of how to select the margin values - are you just doing it by eye? It looks better with -3 for iOS on our app, but unsure if this is due to different screen sizes/resolutions etc.
Is setting a constant value for each platform robust?

@AlexanderHott
Copy link

Any update on this, I still see this on version 4.5.2

@BartoszKlonowski BartoszKlonowski mentioned this issue Sep 9, 2024
Closed
@draggie draggie self-assigned this Sep 11, 2024
@draggie draggie linked a pull request Sep 17, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@draggie draggie

Labels
bug report Something isn't working
Projects
Slider-Board
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: custom padding on android callstack/react-native-slider