Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ITEM] Floating label input with icon bug

See original GitHub issue

I have gone through these following points

Check latest documentation: https://docs.nativebase.io/
Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/

react-native, react and native-base version, expo version

React-Native : 0.59.8 React : 16.8.3 Expo : SDK33 Native Base : 2.13.4

Expected behaviour

Should print Icon in input with the floating Label

Actual behaviour

Icon missing and input bug (if you have many inputs, next one’s floating label doesn’t float up)

Steps to reproduce

<Item floatingLabel={true}> <Label>Input Label</Label> <Input/> <Icon name="checkmark"/> </Item>

Is the bug present in both iOS and Android or in any one of them?

Android : Yes iOS : Yes

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

smddzcycommented, Aug 7, 2019

We had the same issue with a recent project. Downgrading native-base to 2.12.1 fixed the issue for us.

1reaction

PlabanJrcommented, Aug 16, 2019

The issue has been addressed and will be available in the next release, which is coming soon. Thank you!

Top Results From Across the Web

Input field with floating label and icon - Ionic Forum

I see a problem here. Float tag and placeholder don't go together (tag and the placeholder sort of are on top of each...

ion-input with icon at the end - Stack Overflow

i tried ion-item with slot="end" works but i dont want use that beacuse textbox show slightly right side ..I need some alternative solution ......

Icons and Floating Inputs: Ionic - Prototype A - WordPress.com

Hi all, i stuck on mixing an `ion-icon` with an `floating label` like in this the *Angular Material Bootstrap Inputs Demo* ...

Floating labels · Bootstrap v5.0

Create beautifully simple form labels that float over your input fields. ... method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

react-native-floating-label-input - npm

Start using react-native-floating-label-input in your project by running `npm i ... Element, undefined, Add right component to your input.