Material: Floating label support for md-chips

[mightyselva]

Hi, How to integrate floating label for md-chips. Styles are collapsing when doing so

[tamsler]

+1

[dmackerman]

Agreed. Pretty much every component should support floating labels, as I've almost never seen a desktop web application that just has a single form field living on it's own.

[ionTea]

+1

[alexcriss]

+1

[fxck]

+1

[evhen14]

+1

[WalterWeidner]

+1

[tirana]

+1. it should be same as the other input components

[hsstan]

+1

[ptesser]

+1

[humana]

+1

[mounitsyna]

+1

[mounitsyna]

If you include md-autocomplete in your chips, you can add the md-floating-label to that, but it requires a few CSS tweaks to get it to line up properly. Something like:

md-chips.with-floating-label{
    margin: 18px 0;
    display: block;
}
md-chips.with-floating-label md-chips-wrap{
    padding-left: 0px;
    padding-bottom: 0px;
}
md-chips.with-floating-label md-autocomplete[md-floating-label] md-input-container{
    margin-top: 0px;
}
md-chips.with-floating-label .md-chip-input-container:not(:first-child){
    margin-top: 28px;
}

[mimani]

HI,

Can we update the milestone for this?

@alphatwit Can you please provide codepen for your workaround, I tried this but floating label were started after added chips.

[mounitsyna]

It's not the most attractive solution, and it does put the floating label after the chips unfortunately.
http://codepen.io/anon/pen/VvoGBa

There's no obvious way to add a floating label to it without something looking weird. if it floats up above the chips, it might end up five miles up the screen, depending on how many chips you have. On the other hand if you leave it above the input box and you have a full row of chips, the input will be positioned a little too far from the rest of the chips in order to make room for the floating label.

[gpopovic]

+1

[StefanFeederle]

+1

[chrislambe]

+1

[bluebirdtech]

+1

[Wingie]

+1

[Wykks]

+1

[thatguyyoulove]

+1

[Rid]

+1

[nicolac18]

+1

[Knoxvillekm]

+1

[vzinoviev]

+1

[leocaseiro]

+1

That would be nice having md-floating-label for md-chips

[zzo]

+1

[vbanuelos]

+1

[prayagpavithran]

You can find the solution for floating label here
http://www.increvcorp.com/floating-label-support-for-md-chips-in-angularjs/

[guillaume-fr]

Would be nice also for md-contact-chips

[ariefurtado]

Would be nice to have md-floating-label for md-contact-chips... any workaround?

[mih-kopylov]

@ThomasBurleson , is there an ability to use floating label for chips and autocomplete?
You've marked it as deprecated, but I can't find any replacement for this.

[jcooley8]

@ThomasBurleson ,Are hacks still needed or will this be supported soon? Thanks!

[talamaska]

So basically every major bug that we find is just deprecated in favor of the v2.
Why would you reject pull request that fix those issues? Ok I got it, you need resources(developers) than leave it to the community. I want to continue to use Angular 1.x and Material 1.x.
Should we fork the repo and start on our own. Do you track how many such issues were just deprecated?
1529 critical bgs were just ignored by the google team.

[Wingie]

This is a serious problem for those of us who are using Angular 1 in production environments and cannot for business reasons afford a rewrite. The cavalier attitude of the angular developers in treating this framework as disposable is just unacceptable.
Maybe for the Google team, v1 is an experiment gone wrong and they feel they have solved the various issues in their v2 version, but wtf do i do with a critical client facing application that i had the misfortune to inherit running on top of their God Forsaken Travesty of a framework?
I think forking Angular is a right step provided there is significant community involvement. If anyone is interested in such a step, do not hesitate to contact me.

[talamaska]

I see there are like 3000 forks, and it is impossible for github to show the graph. So we cannot be sure what where was fixed or customised

[eqbalsajadi]

try this:

.md-chips .md-chip-input-container md-autocomplete { position: relative; top:-15px }

[Splaktar]

Please submit a new feature request using the issue template. This issue is closed.

Please do not post +1 comments and instead just use the emoji responses available in the first post to express your support for the issue.