How padding/margin works in Input #3305
Replies: 8 comments 2 replies
-
|
I fixed this for me, using a fixed container height: <Input containerStyle={{ height: 55 }} /> |
Beta Was this translation helpful? Give feedback.
-
Agreed. Wish there was a way to easily remove all default styling. |
Beta Was this translation helpful? Give feedback.
-
|
There's an annoying bottom margin you can't get rid of for Input. Not sure why it's there. |
Beta Was this translation helpful? Give feedback.
-
|
FWIW, here's the styling I've applied at the theme-level to the |
Beta Was this translation helpful? Give feedback.
-
|
@wkoutre It looks like this margin is still there for me even with your changes. https://snack.expo.dev/@nmorrell/jealous-cereal . It looks like |
Beta Was this translation helpful? Give feedback.
-
|
@nicholascm I, too, was initially fooled by this and thought just about the same as you! I forgot to add in my previous comment that I've also passed |
Beta Was this translation helpful? Give feedback.
-
|
@wkoutre That is very helpful! Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
The margin on the bottom of the Input is caused by inbuilt error message component which reserves some space. You can disable it with: The margin on the left and right of the Input is caused by the default 10px horizontal padding on the container. You can disable it with In my case that padding was confusing me because it looked like margin instead because I'd set a background colour on the style, whilst the containerStyle had no background making the transparent container look like margin. To fix the issue I moved my backgroundColor from the style to the containerStyle. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
The input object has a 10 pixel margin or padding while for example the button object does not.
Shouldn't all elements simply have no padding/margin at all?
Now I have to compensate in order to make my GUI look consistent.
Beta Was this translation helpful? Give feedback.
All reactions