Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

White box over Input Field and no Text. #54

Closed
Jared-Gross opened this issue Jan 6, 2021 · 15 comments
Closed

White box over Input Field and no Text. #54

Jared-Gross opened this issue Jan 6, 2021 · 15 comments

Comments

@Jared-Gross
Copy link

When I build my project for Android, a white box appears over my Input Field.

Images are here:
https://imgur.com/a/v2y5hMh

I ran the project you provided from this GitHub and built it for android, and everything worked perfectly as expected.

But upon setting up my own project to work for this input method, it didn't work as expected.

I can provide further details if you need, I'm sure it's just a "check box" somewhere that I didn't press, but I've tried almost everything now.

I switched my graphics and rendering settings around.
I using Text Mesh Pro instead of the default Text component,
Used different graphics API.
Changed my camera settings, and Canvas rendering.

I am using Unity 2018.3.0f2.

If there's any other information needed to figure out this problem, I'd be happy to provide. This has been a huge problem for me for weeks.

@mopsicus
Copy link
Owner

mopsicus commented Jan 8, 2021

If you use TMP, you have to edit some code in scripts, else it will not works properly. Did you make it?

@Jared-Gross
Copy link
Author

I had it working with TMP, but I still had that white box over the input field. With or without TMP, it's still there.

I don't have an android manifest file in my project? Could that be an issue? Where would that be stored?

@mopsicus
Copy link
Owner

mopsicus commented Jan 8, 2021

Screenshot at Jan 08 23-14-15

Did you change image background color of your inputfield? Try to set alpha to 0

@Jared-Gross
Copy link
Author

Jared-Gross commented Jan 8, 2021

I tried setting image background to alpha 0, it did not resolve the issue, there is still that white box over the input field.

Since my original image was transparent, I set it to the default input background, and the same white box is covering my input field.

@Jared-Gross
Copy link
Author

It seems the issue arises in my main Scene, I tested by copying over all demo components to the scene my main project uses, and the same white boxes appear blocking and messing up the input. But if I build the project with your Demo scene setup and leave the Canvas and Camera as is, everything works fine.

I'm wondering what Canvas or Camera settings would have effect on this?

@mopsicus
Copy link
Owner

You can test it. You have own settings in your project, so I don't know how it will works with plugin. You can change camera settings in demo and take a look.

@Jared-Gross
Copy link
Author

I looked threw other Issues on this project, and I had to set the alpha of the "input" field to 0. Now there is NO white box over my input.

So basically the issue is fixed, but my text (that i input) is either super small or non-existent right now. Should I open up a new issue?

@mopsicus
Copy link
Owner

Font size calc here. So, check your input field again, maybe your forgot to tune smth again :) Demo seems works properly.

@Jared-Gross Jared-Gross changed the title White box over Input Field. White box over Input Field and no Text. Jan 11, 2021
@Jared-Gross
Copy link
Author

Jared-Gross commented Jan 11, 2021

Probably so 😆.

My Input field is in a Grid layout, that probably causes some issues.

I also tried the solution from here, It showed no promises, I tried switching Canvas from Overlay to Camera and vice versa, but that also had no effect.

I also tried to multiply the ratio by a large number, but that didn't seem to change anything.

I will relook over my Input field rect size, mess around with grid layouts and try and figure out what I messed up again! 😄 almost have it working.

@Jared-Gross
Copy link
Author

Well I've hit another brick wall..

The caret is super small and no matter how much text I add to the input field, it still doesn't show.
The text is there, when I hit enter it tells me what I typed, but I can't see what I typed in the Input field.

This image is what I mean, I set it up for TMPro.

I verified my project settings and built the Demo in perfect working order with my projects project settings.
I copied the canvas settings to my projects canvas.
I copied the Input Fields to my project and I still got the same issue (the image i linked)
I tried all those issues, with and without TMPro.
I tried with and without Grid layout elements and all that stuff.
The text alignment was set to the middle, but moves top left.

The text size seems to be equal to zero or something.

I'm at a lost cause with this right now, messing around with any variables showed no sign of it working.

@mopsicus
Copy link
Owner

I think it might have something to do with your TMP refactoring.
Can you upload your file with refactored code?

@Jared-Gross
Copy link
Author

Here's the modified file for TMPro: MobileInputField.cs

I got both results with or without TMP, but your most likely right, I might have missed something.
It feels like this issue comes down to the size of the textbox, or rect so to speak, setting values myself and seeing results sorta hints me that something's wrong with the math in runtime. If I could set my rect size manually maybe everything would set into place? I don't know where I would do that in the script.

I have made some headway's regarding text size, but there are other issues now.

Fix for small textsize:
I set the fontSize equal to 100 (or any font size that you need), and the text actually shows now, that fixed that issue.

Issue #1:
The text is off center now, half the text is cutoff by the top.

Issue #2:
The text is shown above everything else, this really doesn't matter in my project, but for future sake, it would be great to eliminate this. I did try making a new layer for my overlapping object, but that didn't help.

@mopsicus
Copy link
Owner

Your code seems to work..
About small text size, it could be cuz some camera settings, need check.
Your issue 1 and text size seems is linked.
Issue 2 can't be fixed, I guess, cuz native input create above all other UI and UnityPlayer view.

@Jared-Gross
Copy link
Author

I managed to solve the text size issues.

FIX:
The problem was, that my UI's scale was set to 0 when the app starts, I manually inputted the rect size, and everything works except one more small issue.

The input doesn't disappear when ever the parent object is set to hidden. It doesn't seem to update when the scale of the parent gets changed. I could disable the Input when I please and hide it like that,

If there no way to do that, then you can close this issue as the problem I had is fixed. Unless there are other notes that we can leave.

So to sum up for future viewers.

  1. Check your "Scale" size of parent objects, or the input object if your text is super small.
  2. Make sure alpha for the "Input field" is set to 0 if you have a white rect covering the Input Field.

@mopsicus
Copy link
Owner

Yeah, you should control visibility by yourself. Well, I close this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants