Answered

Strange text input behavior: text not centering and exceeding text box size

(1) Share

Report

Posted on by wyotim

2,545

I have an issue in one of our apps where the text in a text input box is not showing up. The app is a work hour entry app and the particular place this issue is showing up is when users try to edit time they previously entered. When they show the entry form, which is a hidden form that pops up over the viewing area, the previously entered time appears to be blank. On further inspection, it is actually hidden in the right hand side of the input box and can be shown by using a click/drag of the mouse and pulling the area until the text is viewable or by resizing the text input box. Once this has been done, the entries stay where they were until the app is closed and reopened. I attached some pictures to help illustrate the point.

Anyone have suggestions on why this is happening? The text input is aligned to center. Changing alignment only puts the text on the far end of the selected spectrum but still has the same oversized area where the text doesn't show up until click/dragged.

Text input in web studio appears as expected.Text input when app is launched looks blank.Resizing the text input box from 80 to 200 reveals the "centered" text in the app.

Categories:

Building Power Apps

I have the same question (0)

All responses (15)

Answers (1)

CMee 72 on at

Like (0)

Report
Copy link

Link copied!

If the PaddingLeft and PaddingRight are set to high values (larger than the width of the textbox for instance) then it can cause some strange behaviour. I'd start by making sure they are set to appropriate values.

Was this reply helpful? Yes No
wyotim 2,545 on at

Like (0)

Report
Copy link

Link copied!

@CMee While that is a good suggestion, my padding is at 5 per side with a width of 80. I actually tried to use the padding to center it to no avail. This seems to be something else unfortunately.

Was this reply helpful? Yes No
tahoon Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Do you have aspect ratio unlocked? See File > App settings > Screen size + orientation.

Was this reply helpful? Yes No
v-xida-msft Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
Hi @wyotim,

Which version of the PowerApps on your side?

I have made a test on my side and don't have the issue that you mentioned. The screenshot as below:

Please check if you have set the Align property of the TextInput control to Align.Center. In addition, please set the Padding property of the TextInput control as below:

TextInput1.PaddingTop=5 TextInput1.PaddingBottom=5 TextInput1.PaddingLeft=12 TextInput1.PaddingRight=5

Please let me know if above solution could solve your problem.

In addition, please also take a try to re-create your app, then check if the issue is solved.

Best regards,

Kris

Was this reply helpful? Yes No
wyotim 2,545 on at

Like (0)

Report
Copy link

Link copied!

Apologies for the late reply; I am off this week.

@tahoonA great suggestion, but my aspect ratio is indeed locked.

@v-xida-msftAgain, good thoughts but my padding is set at 5, which is the default I believe, and my Align is indeed set to Center. As noted above, the issue doesn't show up in the web studio; it only happens when using the published app through PowerApps itself. I also haven't seen this issue in any of our other apps which use similar techniques. The version is 3.18061.12, but has probably been occurring for a while as I am pretty sure it was happening in 3.18045.15 as well. This one goes back to 2.0.730, so I am curious if that has something to do with it (like a change that didn't carry over so well or something like that).

For clarification, what do you mean by "re-create the app"? If you mean build it again from scratch, that would actually take a week or more, which isn't possible for me right now. This app has a pretty heavy custom UI. If you mean rebuild components, that would be more feasible.

Again, I appreciate the suggestions. Any other things for me to try? When I get back on Monday, I am going to try to set the padding to force the text into the center. The area is vastly oversized for the box it is in but maybe I can find a ratio that gets it fairly centered and allows the user to see the text. I will reply if that works, but all suggested remedies are welcome!

Was this reply helpful? Yes No
tahoon Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Another thing to check is if the value contains spaces, tabs, or other whitespace characters. For example, " 10" instead of "10". Probably unlikely, but worth a shot.

Was this reply helpful? Yes No
wyotim 2,545 on at

Like (0)

Report
Copy link

Link copied!

@tahoon Another great suggestion but I don’t think it could contain any other characters. It is coming from an Azure SQL table and that particular item is a two decimal place number. The text box is a set as a number type and limited to 5 characters (a previous attempt to remedy this issue that had no impact). Also, when using the mouse to drag the text into view, only the number is highlighted; there is no white space selected. I will look into this aspect more on Monday when I get back.

I do appreciate the suggestions on this!

Was this reply helpful? Yes No
wyotim 2,545 on at

Like (1)

Report
Copy link

Link copied!

@tahoon, I attempted to find white space characters as you suggested but I couldn't find any. When I use the mouse to highlight the text in the box, it is only the text in the box and nothing else. I also can only make the cursor go to the front or back of the text, no further.

I attempted to see what size the box is by changing the width until the text was centered (again, by checking in the app as launched from shortcuts on the Start menu in Windows 10 or from the Windows 10 app, not the web studio where everything looks okay). After contending with the rendering issue the new release has ushered in , I found that it is treating my text box with a width of 80 as if it has a width of 300. I tried to use a padding of 110 on either side, thinking that 300 - (2 * 110) = 80, leaving the usable area centered. Unfortunately, this did not work. I am not sure how 300 plays in to this as the text boxes in question have always been 80 in width.

I will try creating new text boxes and deleting the old ones to see if that helps and will report back when that is done. Again, I appreciate everyone who has commented on this! It's a strange issue and I can't seem to replicate it anywhere else but in this app.

Was this reply helpful? Yes No
Verified answer

wyotim 2,545 on at

Like (0)

Report
Copy link

Link copied!

So I decided to try an easy solution: I set the alignment to Left. I can now see the text but the text area still seems to be bigger as I can drag over with the mouse and hide the text. I am going to call this good enough as rebuilding the text boxes will actually take some hours due to the nature of the UI and calculations and data authentication/checks in place. Thanks again for all the comments and suggestions!

Was this reply helpful? Yes No
ITACDan 6 on at

Like (0)

Report
Copy link

Link copied!

Hey wyotim I'm seeing the same behavior in our AzureSQL app, whereby the center justify pushes the text off to the right. Did you ever find an answer to this issue?

Was this reply helpful? Yes No