Material Design text fields

Feature Requests
#1

Is it possible to reproduce this behavior of the text field labels / placeholders in Anvil?

label

I would like to avoid hardcoding the text field labels into the form, and still follow the Material Design guidelines

#2

Welcome to Anvil.

Out of the box, no. But when I get a moment later I’ll see if I can create a custom component to do that.

#3

Hi @renrengabas, and welcome to the forum!

Here’s a clone link to an app with a custom component, ‘TextBoxWithPlaceholder’, that reproduces the behaviour you were looking for.

https://anvil.works/build#clone:MIQOXAY2UEYTRRTB=LTAU6XJ3JWON2X2NTF7VYKME

Let me know if you have any more questions :slight_smile:

Apologies for beating you to it, @david.wylie!

3 Likes
#4

haha - by about 5 minutes :slight_smile:

@bridget - but can you do the smooth animation :slight_smile:

#5

Ok, here’s a slightly different take on it using some javascript to perform the animations.

No where near as Anvillic as @bridget’s one, and probably fragile, but what the hell, I offer it up for sacrifice :slight_smile:

https://anvil.works/build#clone:6IL6SQTPPFVVRVQP=FFFUPS4QXFCQG7AOHT5C37LC

2 Likes
#6

Wow, that was quick. Thanks! Will definitely check it out

#7

Hi @bridget,

Your solution works great for me. I’ve even standardized it into a component that can accept also accept Form Validation.

https://anvil.works/build#clone:VZN53VSXBEWTGGVN=5JENX6MTKLUQGWW7PPY567J6

I just have one question: How did you manage to make the top and bottom spacings tight?

Best regards,
Ren²

1 Like
#8

@renrengabas glad to hear it!

I tweaked some of the padding in the App’s CSS to adjust the spacings:

/* You can find this around line 30 in theme.css  */
.anvil-label>.label-text, a>.link-text {
  padding-top: 0px;  /* change from 8px to 0px */
  padding-bottom: 0px; /* change from 8px to 0px */
}
...
/* You can find this around line 646 in theme.css  */
input.anvil-component, .anvil-component select, .anvil-datepicker input {
  padding: 0px 0 4px;  /* change from 8px 0 4px to 0px 0 4px */
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.42);
...
}
2 Likes