Text Alignment for Input and TextArea (BS4)

1

Hi, I’m struggling to centre text in Input and TextArea. The Text alignment in the properties window doesn’t seem to work nor does the Styles in the Properties window work for me either.

Using styles text-align: center; (Works sometimes for TextArea)

Also if I was to put a shadow around an Input, The shadow exceeds the input area to the selected area size?

Using: styles box-shadow:0 0 4px rgba(0,0,0,0.5);

Any ideas please
Will.

2

I don’t have a definitive answer. Here’s something I find useful, though. It’s a list of class names that Bootstrap has. You can add these to the class property of the control to affect its appearance.

1 Like
3

Thanks George.

4

Super helpful.

5

Just for the record
for Input fields:
text-center works in class
box-shadow: 2px 2px 7px 2px #888888; works in style (can’t inset but still makes the input fields pop nicely)

For TextArea
text-align: center works in style
box-shadow: 2px 2px 7px 2px #888888; also works in style.
Will.

6

I think the real problem is in AppStudio V8.3.0.2 and before. For a Bootstrap 4 Input control, if you set align property to center, it generates the following:

<input id="eMailVerify2_contents" type="text" autocomplete="one-time-code" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="1" placeholder="_" data-i18n="_" style="text-align:text-align:center; ; font-family:inherit;" class="form-control text-uppercase">

The style="text-align:text-align:center; ; is of course ignored by the browser. A workaround is to add the correct style to the style property text-align:center;

7

@GaryGorsline - good spotting. This is fixed in the next build, out any day now.

8

Even worse, I had 5 fields with this in the style property that is saved in the elements JSON files. Upon saving it with that style setting, it created invalid JSON for those elements, as the double quotes were not escaped. I hand edited the element JSON files and recovered. The symptom was a blank form is displayed in the IDE.

9

The align property is fixed in AppStudio 8.4, which was just released.

1 Like