Material Floating Input Labels using CSS3

ionic-v1
1

Hi Guys,

I found an interesting tutorial to create Material design floating input labels using CSS3.

Tutorial link

I did some testing on Ionic and it works to some extend by making easy modifications on Ionic’s Floating labels directive.

Not sure though why it doesn’t work on codepen but it works on real device/emulator :
codepen

Remaing problems:

1.Highlighted bar is not full width
2. Height of the input field is more.

If some CSS lovers could help to make it better ,we would be able to recreate Material design using CSS3 here.

Thanks :smile:

1 Like
2

Sooo…

this happened today.

3 Likes
3

Same:

2 Likes
4

That was fast. Thank you guys!

5

@xAlien95 There is a bug. Placeholder gets word-wrapped on real device and is shown as two lines.

6

look at ngMaterial project.

7

Add the following CSS to ion-md-input label:

width: 280px;
white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;

Updated coddepen below:

4 Likes
8

@mhartington and @xAlien95 you guys are CSS beasts!!!

This is beautiful!!!

9

@xAlien95 A quick question here…

I started playing around with your solution and it works great thank you :slight_smile: I do have 1 comment though…

When you click on the input, there’s an initial blue “flash” that occurs on the left of the input. It’s not immediately obvious as you have it, but when you want to center the input you get this blue “flash” that occurs to the left of the input and looks very strange, any idea how to get around that?

@mhartington playing around with your solution as well. Does one have to use SCSS to get it to work? I took your directive, the HTML and the CSS and incorporated it into my app but it didn’t work at all. I’m just using a regular css file though, no SCSS. I’m also not referencing the nightly, not sure if that’s required?

Thanks :slight_smile:

10

[quote=“edwrede_ZA, post:9, topic:15267”]
When you click on the input, there’s an initial blue “flash” that occurs on the left of the input. It’s not immediately obvious as you have it, but when you want to center the input you get this blue “flash” that occurs to the left of the input and looks very strange, any idea how to get around that?
[/quote]It’s based on the original material design animation and it has it. To remove that “flash” simply remove from the directive template:

<span class="md-highlight"></span>

and the relative CSS styles.

1 Like
11

Thanks @xAlien95 :slight_smile: I do quite like the animation.

Is there anyway you can keep the animation, but have it trigger on the edge of the component instead of the far left of the screen.

If you take your codepen and center the ion-md-input you’ll see what I mean :smile:

12

Nope, you don’t have to use SCSS, I did because its what I prefer to author in.
I have made a directive for this as well and to simplify the process and have angular events.

$ bower install ion-md-input -S
3 Likes
13

What about select input, how can i make same style for it ?

14

@mhartington thanks for your solution! It works perfectly except for one thing. If I stack more than 2 labels ontop of each other an test in the iphone simulator. By highlighting the third, fourth… label the whole ionic app moves down for a split second and then back up. When this happens the black background is shown on top. (It looks as if there was a margin-top on the whole app)

Any suggestion?

15

@tarends can you make a simple codepen example?

16

Hi. For some reason both the example provided here have some issue in actual ios device. When you tap on the text box to write the entered text comes on the top of placeholder and place holder never goes to top. But if you tap somewhere else first then come back to second text box it works.

17

@xAlien95 Can you add taking input as text, password, email etc…
How i can take input-type as password or other type?
Please help me
Thank for help.

18

its not working for me

19

What about required attribute? How to make it working? How to add some validation text?

20

I love this directive. But, when I include in my project, I get White Screen Of Death. Not sure why. Nothing outputs to console telling me there is an issue. Stumped. i’ve written/included directives before without issue. Ever experienced this?