Floating labels in Angular material are a permanent feature no matter the input type used

Question

Floating labels in Angular material are a permanent feature no matter the input type used

In order to have a fixed floating label without any animation displayed on every md-input-container that contains either md-input, md-select, md-datepicker or md-autocomplete, I have successfully implemented it for md-input by adding the class "md-input-has-placeholder" to the md-input-container. However, this method is not working for other types of inputs.

<md-input-container class="md-input-has-placeholder">
    <label style="font-size:15px;">Name</label>
    <input type="text" name="name" ng-model="user.name">
</md-input-container>

Check out the expected result example here

html css angularjs input angular-material

Answer 1

Answer №1

If you want to add a placeholder to your field, simply include placeholder="" in the code. I tested this with both input and textarea components but I'm not sure if it works with all components. Hopefully, this solution helps!

<md-input-container>
        <label>Text (always floating)</label>
        <textarea ng-model="ngModel" rows="1" md-maxlength="150" placeholder=""></textarea>
    </md-input-container>

Answer 2

If you want to add a placeholder to your field, simply include placeholder="" in the code. I tested this with both input and textarea components but I'm not sure if it works with all components. Hopefully, this solution helps!

<md-input-container>
        <label>Text (always floating)</label>
        <textarea ng-model="ngModel" rows="1" md-maxlength="150" placeholder=""></textarea>
    </md-input-container>

Answer 3

Answer №2

To achieve your desired outcome, it is necessary to customize certain CSS styles within the angular-material library. By making adjustments as shown below, you can come close to reaching your goal.

md-input-container label {
   -webkit-transform: translate3d(0,6px,0) scale(.75) !important;
   transform: translate3d(0,6px,0) scale(.75) !important;
   -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   opacity: 1 !important;
   top: auto !important;
}

md-input-container .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}

http://codepen.io/kuhnroyal/pen/BQMNyy

Answer 4

To achieve your desired outcome, it is necessary to customize certain CSS styles within the angular-material library. By making adjustments as shown below, you can come close to reaching your goal.

md-input-container label {
   -webkit-transform: translate3d(0,6px,0) scale(.75) !important;
   transform: translate3d(0,6px,0) scale(.75) !important;
   -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   opacity: 1 !important;
   top: auto !important;
}

md-input-container .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}

http://codepen.io/kuhnroyal/pen/BQMNyy

Answer 5

Answer №3

Make sure to include the "active" class in the label tag.

<md-input-container class="md-input-has-placeholder">
    <label style="font-size:15px;" class="active">Name</label>
    <input type="text" name="name" ng-model="user.name">
</md-input-container>

Answer 6

Make sure to include the "active" class in the label tag.

<md-input-container class="md-input-has-placeholder">
    <label style="font-size:15px;" class="active">Name</label>
    <input type="text" name="name" ng-model="user.name">
</md-input-container>

Answer 7

Answer №4

To enhance the appearance of your labels with color, simply apply the md-input-focused class to the md-input-container.

Answer 8

To enhance the appearance of your labels with color, simply apply the md-input-focused class to the md-input-container.

Answer 9

Answer №5

When using @angular/material, you have the option to set the property floatPlaceholder="always" on the <md-input-container> tag. This feature has been working smoothly since version 2.0.0-beta.2. Although this may not directly address your inquiry, many individuals encountering this issue will likely come across your question (just like I did).

<md-input-container floatPlaceholder="always">
   <input mdInput type="text" id="username" formControlName="Username"
    class="form-control" placeholder="Login" required>
</md-input-container>

Answer 10

When using @angular/material, you have the option to set the property floatPlaceholder="always" on the <md-input-container> tag. This feature has been working smoothly since version 2.0.0-beta.2. Although this may not directly address your inquiry, many individuals encountering this issue will likely come across your question (just like I did).

<md-input-container floatPlaceholder="always">
   <input mdInput type="text" id="username" formControlName="Username"
    class="form-control" placeholder="Login" required>
</md-input-container>

Answer 11

Answer №6

Here is an improved version of the solution provided by @kuhnroyal (make sure to upvote!), taking into account the possible presence of ng-required in the inputs. Additionally, a class is provided so you can apply this style selectively:

Copy and paste the following CSS into your page:

md-input-container.floating-label-always label {
  -webkit-transform: translate3d(0,6px,0) scale(.75) !important;
  transform: translate3d(0,6px,0) scale(.75) !important;
  -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  opacity: 1 !important;
  top: auto !important;
}
md-input-container.floating-label-always .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}
md-input-container.floating-label-always .md-select-placeholder > span:not(.md-select-icon):after {
  content: none !important;
}

To use it, simply add the floating-label-always class to your md-input-container.

Answer 12

Here is an improved version of the solution provided by @kuhnroyal (make sure to upvote!), taking into account the possible presence of ng-required in the inputs. Additionally, a class is provided so you can apply this style selectively:

Copy and paste the following CSS into your page:

md-input-container.floating-label-always label {
  -webkit-transform: translate3d(0,6px,0) scale(.75) !important;
  transform: translate3d(0,6px,0) scale(.75) !important;
  -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  opacity: 1 !important;
  top: auto !important;
}
md-input-container.floating-label-always .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}
md-input-container.floating-label-always .md-select-placeholder > span:not(.md-select-icon):after {
  content: none !important;
}

To use it, simply add the floating-label-always class to your md-input-container.

Answer 13

Answer №7

For more information on the md-no-float directive, visit this link. It is important to utilize the placeholder attribute within the input field instead of an actual element.

Answer 14

For more information on the md-no-float directive, visit this link. It is important to utilize the placeholder attribute within the input field instead of an actual element.

Floating labels in Angular material are a permanent feature no matter the input type used

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

The click event is malfunctioning. Could someone demonstrate the correct way to troubleshoot this issue?

Can JavaScript be used to upload a file directly to memory for processing before transferring it to the server?

The Material UI text field on mobile devices causes the screen to zoom in, cutting off the top content and displaying the bottom of the page

What is the best way to emphasize colors in search results?

Gathering all the bugs and issues related to AngularJS and Ionic crashes

Using an Embedded For Loop within an If Statement in JavaScript/jQuery

Stop any accidental double clicks on the <input type="submit" /> to avoid duplicate entries

Issues with binding in Angular

Navigating with Angular and NodeJS

Custom Native Scrollbar

Avoiding HTML (JSX) tag duplication in React Component

Using REST API and AngularJS to sign in to asp.net

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

The animation of the CSS/HTML button is malfunctioning

Deactivate a pair of buttons following a button click

How can I implement a search box on my HTML website without relying on Google Custom Search?

How to create a stunning pixel pattern overlay on a website section

Send the film to Cloudinary from within an AngularJS single page application running within Electron

I'm finding it difficult to grasp the concept of CSS positioning

Tips on adjusting the color of a chosen tab using the CSS :target Property, no JavaScript needed!