Style Effects - change Vertical Alignment?

page-and-widget-styles

#1

Hi all! I’m really liking the Style Effects on RP9. However, the styles you can change appear to be somewhat limited.

Specifically, I’m trying to change the vertical alignment of a form field label on focus. I see you can change horizontal alignment, but no vertical alignment.

I’ve also tried creating a new Widget Style, and set it to that on Focus. While it shows other changes, it ignores the vertical alignment property.

Am I missing something obvious here? Any insight would be greatly appreciated, thanks in advance!


#2

I am assuming you want the label to appear on the input and when the input has focus move it up above the input or something similar.

An alternative to changing the vertical alignment would be the Move action that you can trigger on Got Focus. On Lost Focus you can then move the label back - now even with a condition to only move it back in case the text field is empty.

Another plus of the Move action is that you can animate it.


#3

Thanks for your reply, much appreciated!

That’s exactly what I’m trying to do, so its fairly common I would have thought. I don’t want to open a tin of worms, but I’ve tried to use the Move and set “This by (0,-20)” on focus and then “This by (0,20)” on lose focus. but it ignored the negative y, but moved the positive y position, so my label crawl down the screen! Perhaps I missed something really obvious here too, but can very much settle for this solution if it worked!

I could also look at dynamic panels, but need to keep it a single instance of the label in the Master so i can use overrides when placing instances of form fields.


#4

A few months back (seems like 3 years ago!) someone posted about same issue. I showed a quick demo of how this can work. There is a known bug affecting how widgets get moved when they are in groups.

This might be what is going on with your issue? If so, double check you have the latest release version of RP9–I know they have made some fixes for groups recently. If that isn’t it, Try using a dynamic panel instead of a group (just select your group, right-click, choose Create Dynamic Panel, then click into that dynamic panel, cut the interaction code from the group, if you have any, and paste it to the dynamic panel. If you have interactions on other widgets or page that affects the group, you’d need to update those to point to the dynamic panel.

I haven’t tried this library yet, but perhaps the text field component in this Material Design library has this effect built already:


#5

The attached example is working here. input.rp (59.6 KB)

You can try it here: https://cfgsqy.axshare.com

The interactions are modeled like this:
image


#6

Thank you all for your feedback and help! I’ll check out the solutions and report back, thanks!


#7

Hi All, thanks again for all your input!

I’ve tried the Move which kinda works for my situation. I also need to change the font size of the label as well as moving it, so I tried using Style Effects to change the font size, and set Fire Events (either focus/lost focus, and selected/unselected) to change the style. But for some reason I could either get the Move interaction to work or the Style to change. But not both at the same time - one seems to cancel the other out, even when setting the move action before firing the focus event. So there seems something weird is going on.

I really don’t want to use dynamic panels, as I intend to use this as a form field Master and use overrides to change the form label. I can’t change the design either as this is an existing live functionality I’m modifying, and it’s a bit of a cop-out having to change a design because Axure won’t behave…


#8

I have the same situation here and I workaround this by setting the label to ‘selected’:
image

The label has a selected style then, which has the smaller font size.
image
Note that I am heavily using predefined styles for better maintainability. My style “Label (16|top)” has a smaller font size than “Label (16)”. You can set the font size directly in the style effect here as well.

Here is an example: https://cbalwu.axshare.com (File: vertical-text-input.rp (60.0 KB))

You certainly don’t want to use a dynamic panel. You will have at least two instances of a text input then that you constantly need to synchronize.


#9

May thanks for this! I’ll give this a try.


closed #10

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