cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Super User
Super User

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

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.

 

2018-06-08.pngText input in web studio appears as expected.2018-06-08 (1).pngText input when app is launched looks blank.2018-06-08 (2).pngResizing the text input box from 80 to 200 reveals the "centered" text in the app.

1 ACCEPTED SOLUTION

Accepted Solutions
Super User
Super User

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

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!

View solution in original post

15 REPLIES 15
Highlighted
CMee
Level: Powered On

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

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.

Super User
Super User

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

@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.
PowerApps Staff tahoon
PowerApps Staff

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

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

Community Support Team
Community Support Team

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

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:6.JPG

 

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

 

 

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Super User
Super User

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

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!

PowerApps Staff tahoon
PowerApps Staff

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

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.

Super User
Super User

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

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

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

@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 Smiley Happy, 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.

Super User
Super User

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

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!

View solution in original post

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 182 members 5,362 guests
Recent signins:
Please welcome our newest community members: