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

[wyotim]

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.

[CMee]

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.

[wyotim]

@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.

[tahoon]

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

[v-xida-msft]

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

[wyotim]

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!

[tahoon]

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.

[wyotim]

@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!

[wyotim]

@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.

[wyotim · Accepted solution]

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!