Disable float for mdInput text field
up vote
3
down vote
favorite
In an Angular 4 (Material) app, I have a text field for search. When I type in the field, a second field appears showing the entered text. This new field floats as I scroll the page. How do I disable the floating behavior?
It doesn't seem to be default behavior for a text field. I've tried md-no-float, but that's for the placeholder text I understand. Someone suggested setting an empty value, so I added that, but the problem remains.
<md-input-container md-no-float style="width: 100%">
<input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>
angular angular-material angular-material2
asked Sep 26 '17 at 5:43
beachCode
66911128
|
show 5 more comments
up vote
3
down vote
favorite
In an Angular 4 (Material) app, I have a text field for search. When I type in the field, a second field appears showing the entered text. This new field floats as I scroll the page. How do I disable the floating behavior?
It doesn't seem to be default behavior for a text field. I've tried md-no-float, but that's for the placeholder text I understand. Someone suggested setting an empty value, so I added that, but the problem remains.
<md-input-container md-no-float style="width: 100%">
<input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>
angular angular-material angular-material2
asked Sep 26 '17 at 5:43
beachCode
66911128
@Vega I'm not sure I follow. There isn't any interpolation right there. The search input is actually displayed/enabled by a radio button and the next closest tag is the results in an ngFor div.
– beachCode
Sep 26 '17 at 6:06
You may mean the placeholder? material.angular.io/components/input/overview#placeholder
– Vega
Sep 26 '17 at 6:12
Can you provide a plunkr for the problem ?
– Aakash Uniyal
Sep 26 '17 at 6:40
I used your code and tried to simulate what you said but it looks fine. Are you talking about "Search terms" literal floating above the input field after you have entered something ?
– Aakash Uniyal
Sep 26 '17 at 6:44
@AakashUniyal, no it's the text I enter into the field--not the placeholder text. I'm just as confused. It's not standard behavior, so I'm trying to figure out what's causing it.
– beachCode
Sep 26 '17 at 6:46
|
show 5 more comments
up vote
3
down vote
favorite
up vote
3
down vote
favorite
In an Angular 4 (Material) app, I have a text field for search. When I type in the field, a second field appears showing the entered text. This new field floats as I scroll the page. How do I disable the floating behavior?
It doesn't seem to be default behavior for a text field. I've tried md-no-float, but that's for the placeholder text I understand. Someone suggested setting an empty value, so I added that, but the problem remains.
<md-input-container md-no-float style="width: 100%">
<input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>
angular angular-material angular-material2
asked Sep 26 '17 at 5:43
beachCode
66911128
In an Angular 4 (Material) app, I have a text field for search. When I type in the field, a second field appears showing the entered text. This new field floats as I scroll the page. How do I disable the floating behavior?
It doesn't seem to be default behavior for a text field. I've tried md-no-float, but that's for the placeholder text I understand. Someone suggested setting an empty value, so I added that, but the problem remains.
<md-input-container md-no-float style="width: 100%">
<input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>
angular angular-material angular-material2
angular angular-material angular-material2
asked Sep 26 '17 at 5:43
beachCode
66911128
asked Sep 26 '17 at 5:43
beachCode
66911128
edited Sep 26 '17 at 6:40
asked Sep 26 '17 at 5:43
beachCode
66911128
asked Sep 26 '17 at 5:43
beachCode
66911128
asked Sep 26 '17 at 5:43
beachCode
66911128
66911128
@Vega I'm not sure I follow. There isn't any interpolation right there. The search input is actually displayed/enabled by a radio button and the next closest tag is the results in an ngFor div.
– beachCode
Sep 26 '17 at 6:06
You may mean the placeholder? material.angular.io/components/input/overview#placeholder
– Vega
Sep 26 '17 at 6:12
Can you provide a plunkr for the problem ?
– Aakash Uniyal
Sep 26 '17 at 6:40
I used your code and tried to simulate what you said but it looks fine. Are you talking about "Search terms" literal floating above the input field after you have entered something ?
– Aakash Uniyal
Sep 26 '17 at 6:44
@AakashUniyal, no it's the text I enter into the field--not the placeholder text. I'm just as confused. It's not standard behavior, so I'm trying to figure out what's causing it.
– beachCode
Sep 26 '17 at 6:46
|
show 5 more comments
@Vega I'm not sure I follow. There isn't any interpolation right there. The search input is actually displayed/enabled by a radio button and the next closest tag is the results in an ngFor div.
– beachCode
Sep 26 '17 at 6:06
You may mean the placeholder? material.angular.io/components/input/overview#placeholder
– Vega
Sep 26 '17 at 6:12
Can you provide a plunkr for the problem ?
– Aakash Uniyal
Sep 26 '17 at 6:40
I used your code and tried to simulate what you said but it looks fine. Are you talking about "Search terms" literal floating above the input field after you have entered something ?
– Aakash Uniyal
Sep 26 '17 at 6:44
@AakashUniyal, no it's the text I enter into the field--not the placeholder text. I'm just as confused. It's not standard behavior, so I'm trying to figure out what's causing it.
– beachCode
Sep 26 '17 at 6:46
@Vega I'm not sure I follow. There isn't any interpolation right there. The search input is actually displayed/enabled by a radio button and the next closest tag is the results in an ngFor div.
– beachCode
Sep 26 '17 at 6:06
@Vega I'm not sure I follow. There isn't any interpolation right there. The search input is actually displayed/enabled by a radio button and the next closest tag is the results in an ngFor div.
– beachCode
Sep 26 '17 at 6:06
You may mean the placeholder? material.angular.io/components/input/overview#placeholder
– Vega
Sep 26 '17 at 6:12
You may mean the placeholder? material.angular.io/components/input/overview#placeholder
– Vega
Sep 26 '17 at 6:12
Can you provide a plunkr for the problem ?
– Aakash Uniyal
Sep 26 '17 at 6:40
Can you provide a plunkr for the problem ?
– Aakash Uniyal
Sep 26 '17 at 6:40
I used your code and tried to simulate what you said but it looks fine. Are you talking about "Search terms" literal floating above the input field after you have entered something ?
– Aakash Uniyal
Sep 26 '17 at 6:44
I used your code and tried to simulate what you said but it looks fine. Are you talking about "Search terms" literal floating above the input field after you have entered something ?
– Aakash Uniyal
Sep 26 '17 at 6:44
@AakashUniyal, no it's the text I enter into the field--not the placeholder text. I'm just as confused. It's not standard behavior, so I'm trying to figure out what's causing it.
– beachCode
Sep 26 '17 at 6:46
@AakashUniyal, no it's the text I enter into the field--not the placeholder text. I'm just as confused. It's not standard behavior, so I'm trying to figure out what's causing it.
– beachCode
Sep 26 '17 at 6:46
|
show 5 more comments
4 Answers
4
active
oldest
votes
up vote
10
down vote
<md-input-container [floatPlaceholder]="'never'">
this helped me to hide the floating placeholder
Edit: Since Angular Material 6
<mat-form-field floatPlaceholder="never">
answered Sep 26 '17 at 11:38
CodeNoob
91188
add a comment |
up vote
1
down vote
As per version 6.4.5 of @angular/material2 you can control floating labels using floatLabel input property as you can see in their floating label documentation.
<mat-form-field [floatLabel]="'never'">
answered Aug 15 at 4:56
j3ff
1,67911025
add a comment |
up vote
0
down vote
accepted
It turns out it's the Chrome autocomplete popping up.
If you add autocomplete="off" to both the form and the input field, it will go away.
answered Sep 27 '17 at 16:30
beachCode
66911128
add a comment |
up vote
0
down vote
Just remove placeholder attribute
<input matInput placeholder="Input">
to
<input matInput >
answered Nov 5 at 2:18
FlyingTurtle
42111
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
10
down vote
<md-input-container [floatPlaceholder]="'never'">
this helped me to hide the floating placeholder
Edit: Since Angular Material 6
<mat-form-field floatPlaceholder="never">
answered Sep 26 '17 at 11:38
CodeNoob
91188
add a comment |
up vote
10
down vote
<md-input-container [floatPlaceholder]="'never'">
this helped me to hide the floating placeholder
Edit: Since Angular Material 6
<mat-form-field floatPlaceholder="never">
answered Sep 26 '17 at 11:38
CodeNoob
91188
add a comment |
up vote
10
down vote
up vote
10
down vote
<md-input-container [floatPlaceholder]="'never'">
this helped me to hide the floating placeholder
Edit: Since Angular Material 6
<mat-form-field floatPlaceholder="never">
answered Sep 26 '17 at 11:38
CodeNoob
91188
<md-input-container [floatPlaceholder]="'never'">
this helped me to hide the floating placeholder
Edit: Since Angular Material 6
<mat-form-field floatPlaceholder="never">
answered Sep 26 '17 at 11:38
CodeNoob
91188
edited Jul 25 at 13:27
answered Sep 26 '17 at 11:38
CodeNoob
91188
answered Sep 26 '17 at 11:38
CodeNoob
91188
answered Sep 26 '17 at 11:38
CodeNoob
91188
91188
add a comment |
add a comment |
up vote
1
down vote
As per version 6.4.5 of @angular/material2 you can control floating labels using floatLabel input property as you can see in their floating label documentation.
<mat-form-field [floatLabel]="'never'">
answered Aug 15 at 4:56
j3ff
1,67911025
add a comment |
up vote
1
down vote
As per version 6.4.5 of @angular/material2 you can control floating labels using floatLabel input property as you can see in their floating label documentation.
<mat-form-field [floatLabel]="'never'">
answered Aug 15 at 4:56
j3ff
1,67911025
add a comment |
up vote
1
down vote
up vote
1
down vote
As per version 6.4.5 of @angular/material2 you can control floating labels using floatLabel input property as you can see in their floating label documentation.
<mat-form-field [floatLabel]="'never'">
answered Aug 15 at 4:56
j3ff
1,67911025
As per version 6.4.5 of @angular/material2 you can control floating labels using floatLabel input property as you can see in their floating label documentation.
<mat-form-field [floatLabel]="'never'">
answered Aug 15 at 4:56
j3ff
1,67911025
answered Aug 15 at 4:56
j3ff
1,67911025
answered Aug 15 at 4:56
j3ff
1,67911025
answered Aug 15 at 4:56
j3ff
1,67911025
1,67911025
add a comment |
add a comment |
up vote
0
down vote
accepted
It turns out it's the Chrome autocomplete popping up.
If you add autocomplete="off" to both the form and the input field, it will go away.
answered Sep 27 '17 at 16:30
beachCode
66911128
add a comment |
up vote
0
down vote
accepted
It turns out it's the Chrome autocomplete popping up.
If you add autocomplete="off" to both the form and the input field, it will go away.
answered Sep 27 '17 at 16:30
beachCode
66911128
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
It turns out it's the Chrome autocomplete popping up.
If you add autocomplete="off" to both the form and the input field, it will go away.
answered Sep 27 '17 at 16:30
beachCode
66911128
It turns out it's the Chrome autocomplete popping up.
If you add autocomplete="off" to both the form and the input field, it will go away.
answered Sep 27 '17 at 16:30
beachCode
66911128
answered Sep 27 '17 at 16:30
beachCode
66911128
answered Sep 27 '17 at 16:30
beachCode
66911128
answered Sep 27 '17 at 16:30
beachCode
66911128
66911128
add a comment |
add a comment |
up vote
0
down vote
Just remove placeholder attribute
<input matInput placeholder="Input">
to
<input matInput >
answered Nov 5 at 2:18
FlyingTurtle
42111
add a comment |
up vote
0
down vote
Just remove placeholder attribute
<input matInput placeholder="Input">
to
<input matInput >
answered Nov 5 at 2:18
FlyingTurtle
42111
add a comment |
up vote
0
down vote
up vote
0
down vote
Just remove placeholder attribute
<input matInput placeholder="Input">
to
<input matInput >
answered Nov 5 at 2:18
FlyingTurtle
42111
Just remove placeholder attribute
<input matInput placeholder="Input">
to
<input matInput >
answered Nov 5 at 2:18
FlyingTurtle
42111
answered Nov 5 at 2:18
FlyingTurtle
42111
answered Nov 5 at 2:18
FlyingTurtle
42111
answered Nov 5 at 2:18
FlyingTurtle
42111
42111
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46418625%2fdisable-float-for-mdinput-text-field%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
@Vega I'm not sure I follow. There isn't any interpolation right there. The search input is actually displayed/enabled by a radio button and the next closest tag is the results in an ngFor div.
– beachCode
Sep 26 '17 at 6:06
You may mean the placeholder? material.angular.io/components/input/overview#placeholder
– Vega
Sep 26 '17 at 6:12
Can you provide a plunkr for the problem ?
– Aakash Uniyal
Sep 26 '17 at 6:40
I used your code and tried to simulate what you said but it looks fine. Are you talking about "Search terms" literal floating above the input field after you have entered something ?
– Aakash Uniyal
Sep 26 '17 at 6:44
@AakashUniyal, no it's the text I enter into the field--not the placeholder text. I'm just as confused. It's not standard behavior, so I'm trying to figure out what's causing it.
– beachCode
Sep 26 '17 at 6:46