Handle custom fontsize values in the TextInputLayouts control

[sk1llsh0t]

Description

If I enter larger number values into the FontSize property of the TextInputLayouts control, the title/placeholder label doesn't resize and position accordingly between the placeholder location and the title location. The app I'm creating is being used for people with accessibility issues in mind where the entry fields/labels need to be large.

Code

<freakyControls:FreakyTextInputLayout Title="Outlined TextInputLayout" BorderCornerRadius="10" BorderStrokeThickness="2" BorderType="Outlined" FontSize="40" //CHANGING THIS VALUE TO SOMETHING LARGER BREAKS THE LABEL />

Expected Behavior

Label should resize and position itself proportionally to match the resized entry control.

Actual Behavior

The title/placeholder label is not sized and positioned proportionally to the larger entry size.

Basic Information

Screenshots

The placeholder text is too small and should match more closely to the font size of the entry field

When text is entered, the title fontsize should proportionally be larger and higher up to hover over the border line

Reproduction Link

I just used the sample app that comes in the freakycontrols repo and changed the fontsize value

[FreakyAli]

I see this is based on valued calculations, right now which might be causing this issue, I am not sure if I have the time right now to do the math and do this on a percentage basis but I will try whenever I get a chance, if possible for you can you take an initial look into this and just pin point where this stems from and I can do the rest.

It is okay if you can't by the way i will try to fix this whenever I have the time

[sk1llsh0t]

Sure. I'll take a look and see if i can spot the class/method that handles the resizing and positioning of the title text.

[sk1llsh0t]

Looks like it is doing this in MAUI.FreakyControls/Shared/FreakyTextInputLayout/FreakyTextInputLayout.xaml.cs These values are hardcoded so probably needs to be dynamically calculated based on the entry fontsize: private int _placeholderFontSize = 18; private int _titleFontSize = 14;

I see a couple methods that appear to be doing calculations: TransitionToTitle TransitionToPlaceholder Each of these 2 methods appear to call SizeTo which also handles some of the translation as well.

Anyway, i hope that helps point you in the right direction.

[FreakyAli]

@sk1llsh0t Yeah, I need to do that, initially, I just did it based on the available font sizes in XF and then just used them as is in MAUI, I will try and put in some time and calculate things manually, I will try my best!

I honestly never thought this control would get so popular and get used by so many people

[sk1llsh0t]

What may be easier is leave the logic as is for default behavior. But add 2 new bindable properties for placeholderfontsize and titlefontsize. Then you can just do the translation to those 2 values rather than trying to do the complicated calculations. Let the dev decide what he wants the sizes to be and it frees you from having to figure out the complicated logic.

Only thing I guess you'd have to figure out is placement of the title label to make sure it is positioned correctly at the top.

[sk1llsh0t]

Even with the placement of the label, you could add a titlemargin bindable property so it can be tweaked if it isn't positioned quite right

[FreakyAli]

Yeah I will have to make sure that somehow the title always lands correctly which is gonna be a hassle, may be I'll figure something out, if you have some time I'd really appreciate if you could also try this out maybe tweek it a bit and see if it does something cuz right now I'm a bit occupied with something else

[FreakyAli]

Even with the placement of the label, you could add a titlemargin bindable property so it can be tweaked if it isn't positioned quite right

Not gonna lie that makes sense but then, it will give some Dev's too much control and they might start messing around and raise bugs because they don't understand

[sk1llsh0t]

I got the calculations figured out and it is working well. when i get a chance, i'll send the changes so you can play with it/test it out and make whatever tweaks/code cleanup you want to.

[sk1llsh0t]

I was also able to fix some overrlapping issues with the placeholder and the image as well as fix the full bordertype so the floating label doesn't overlap other controls around it.

[FreakyAli]

Oh wow that's great, please raise a PR on develop if you would like

[FreakyAli]

Also, I am gonna start working on this hopefully in this PR: https://github.com/FreakyAli/Maui.FreakyControls/pull/122

So if you do have any breakthroughs I would love to see them, I am in any case looking into some things in the controls anyway

[sk1llsh0t]

I have created a new branch with my changes but i don't have permissions to push my branch up.

[FreakyAli]

You need to do this by forking, the library and then making the changes on your personal fork and once you do that you can push that fork and create a PR

[sk1llsh0t]

yep. sorry. done.

[FreakyAli]

Don't be sorry bro, you are doing some work you don't need to and I appreciate the time you are putting in 😅

[sk1llsh0t]

I've tested pretty thoroughly with an android device and the changes are to my satisfaction. I don't have any ios device to test with if you could test that out and make any tweaks necessary. Also it couldn't hurt to do testing yourself to make sure it looks fine to you as well.

[sk1llsh0t]

It appears from what I can gather that the TextInputLayouts control on iOS (iPhone 15 Pro Max simulator running iOS 17.5.1) is broken in master. An error occurs when tapping the entry and it calls the focus event. It calls the animate callback routine once and then crashes.

[FreakyAli]

Oh that's interesting, Is this the code in master that you have changed or is it the current code in master?

[sk1llsh0t]

I ran the current code in master b/c i wanted to see if it was something I had changed that broke something.

[FreakyAli]

I will check this when i am a bit free, Don't worry I will see what is wrong

[FreakyAli]

It appears from what I can gather that the TextInputLayouts control on iOS (iPhone 15 Pro Max simulator running iOS 17.5.1) is broken in master. An error occurs when tapping the entry and it calls the focus event. It calls the animate callback routine once and then crashes.

I just tested this, multiple times and I am not facing this issue, but I am running a simulator that has iOS 17.2 running on it, so may be that is the reason it's not crashing, Also is Xcode 15.3 compatible, I am still using 15.2. A stack trace for this would be nice to have!

[FreakyAli]

I also merged and tested your changes on iOS they look amazing, you pretty much completed this on your own, Thanks man, It just needs minor tweaks, which i will do in sometime, but I will probably release this over the weekend hope this is ok with you

[sk1llsh0t]

Sweet! Looking forward to the release this weekend. I'm not an ios developer so it could be my environment isn't setup right regarding the issue I encountered. Anyway glad I was able to help!

[FreakyAli]

fixed in the latest pre-release

[FreakyAli]

@sk1llsh0t Could you take a look at this, its seems to be relevant to our change here https://github.com/FreakyAli/Maui.FreakyControls/issues/135

[sk1llsh0t]

I can take a look when i get a chance. It probably has to do with the default values not getting applied correctly to the hidden title label for animation calculation. if no value is specified, it may be that the font size isn't getting set correctly on that label and it isn't calculating the animation.

[FreakyAli]

@sk1llsh0t no worries brother take your time