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

Input inputStyle="floating" vs inlinePlaceholder={true} #181

Closed
ButuzGOL opened this issue Dec 26, 2014 · 2 comments
Closed

Input inputStyle="floating" vs inlinePlaceholder={true} #181

ButuzGOL opened this issue Dec 26, 2014 · 2 comments
Labels
component: text field This is the name of the generic UI component, not the React module! package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.

Comments

@ButuzGOL
Copy link
Contributor

What the difference between inputStyle="floating" and inlinePlaceholder={true} ?

When I do

<Input ref="state" type="text" name="state" inlinePlaceholder={true} placeholder="State" description="Your state as it appears on your credit card." />
<Input ref="state" type="text" name="state" inputStyle="floating" placeholder="State" description="Your state as it appears on your credit card." />

The looks the same
screen shot 2014-12-26 at 9 45 33 am

The difference is that
inlinePlaceholder={true} leaves input placeholder
inputStyle="floating" adds <span class="mui-input-placeholder" data-reactid=".0.2.0.0.1.0.1.6.1">State</span> but on focus just hide it

So the behaviour and looks the same

May leave one option remove inlinePlaceholder prop ?
Or it has some benefits ?

@ButuzGOL
Copy link
Contributor Author

I check
http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels
And it says

Floating labels
With floating inline labels, when the user engages with the text input field, the labels move to float above the field.

But in our case when set inputStyle="floating"
It works like inlinePlaceholder

?

@hai-cea
Copy link
Member

hai-cea commented Jan 22, 2015

The new TextField component that was just added fixes this problem.

Thanks @ButuzGOL

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module! package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.
Projects
None yet
Development

No branches or pull requests

4 participants