Set hint text value to floating lable

[masoud]

Hi everyone,
I have a problem to find hint text variable. I want to set the hint text value as floating label.

i found a solution in here:

Text field with floating labels

You where heading in the right direction, you just needed to add some conditions for if the input field wasn’t empty. Input text is getting smaller after type something in and deselect the field. I’ve tried to change the style effects but still doesn’t work. Your Focused Style is different that the input’s regular style: [image] I don’t know how to make the X icon only appears after start typing something (not showing up when the field got focused but nothing puts in). The “Text Chang…

but in this solution, label, its just a label and not a variable of hint text.

[mbc66]

I’m not sure what you mean by “variable of hint text” but you can’t style a Text Field widget’s Hint Text to appear outside of its border. You’ll need to use a separate widget, which you can style to look like the Hint Text. You can use the Text Field’s Focus event to hide the “floating hint” widget" and its Lost Focus to show that widget, with conditional case to show it only if the field is blank, just like the Hint would behave. Something like,

Focus
Hide
MyFloatingHint
Lost Focus
If length of value of This equals “0”
Show
MyFloatingHint

[masoud]

i’m so sorry, my english is not very well.
this is what i want:

Floating labels

but i want the label float to the top of the text field.

[mbc66]

That website has CSS code that you can include as an Axure Cloud plugin. Here is the Axure reference documentation for this feature:

Adding Custom Code to Axure RP Prototypes · Axure Docs

If you can’t use Axure Cloud, it is possible to include it in your local prototype via javascript injection. This method is not supported by Axure, but there are plenty of examples of how to do it in this forum. Just search for “javascript injection”.

but i want the label float to the top of the text field.

The examples on that website have labels that do float to the top of the text field… I don’t understand exactly what you want to be different… There is also no hint text used–only labels. The hint property of a text field is not accessible, nor can it be styled, so you don’t want to use hint text for this purpose.

Based on your sketch above, it looks like you want the label to move above and outside the text field. Is that correct? That can be done using the method that @huban posted in your forum link; you just need to adjust the position of the “floating label” widget in the active and error states of the “floating label” dynamic panel.

Or, by “float to the top” do you mean you want the label text to move and shrink at the same time in a fluid, smooth animated way? That kind of animation can be difficult in Axure, but is possible.

See Page 3 of this updated .rp demo file. I styled the look and feel, including animations, to match that getbootstrap.com website example.

input field v2.rp (175.1 KB)

Details:

• The text field widget, named “input”, is styled with no fill and no border so it is transparent.
• The border, fill, and “halo” (blue outer shadow) are all done with basic rectangle widgets in a dynamic panel, named “field background” behind the “input” widget.
  • I did this to better match the styling used in your example site. This method gives you more and better control of the look and feel, as well as ability to animate the state transitions.
  • This panel has 3 states: default, focused, and error.
  • You can adjust the style and size of the widgets in these states as you need.
• The label is in a dynamic panel named “field label” and placed behind “input” and in front of “field background”.
  • This panel has 2 states: default, filled.
  • You’ll need to edit the text in both states to match each other.
  • The text in the “filled” state is a lighter gray and smaller (14 px instead of 16 px) than in the “default” state", but the line height of each text is the same, so the dynamic panel size doesn’t change when it changes states. Thus when “field label” is moved its relative position is easier and more reliable to calculate.
• When “input” gets focus (is clicked or tabbed to) it does three things:
  • Moves “field label” to appear just above “input” with an ease-out animation effect.
    • The position is calculated by referring to the top of “input” and the height of “field label”. In this way, if you need to change the size of any of these it will still work.
  • Sets the state of “field label” to “filled” with a fade effect.
  • Sets the state of “field background” to “focused” with a fade effect.
• When “input” loses focus, it tests its text value to handle things appropriately:
  • If blank, it sets “field label” to default and moves it to the default location (middle-aligned to "input).
  • Else, if not a valid email address format, it sets “field background” to the “error” state.
    • You can remove or edit these conditional cases as needed for your input field types.
  • Else, if “true” (thus a valid input) it just sets “field background” to the “default” state.

[masoud]

wow
amazing
that is all i want.
thank you so much.

[Pierre01]

@masoud
While @mbc66 provided you with a good solution, here is another one that I have been using for all my forms. This will provided you with an error state as well. Sample form field.rp (66.9 KB)

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.