TextBox font autosize?

Hello and Happy New Year to everybody.

I am trying to have an input box using TextBox. I can't use the "Auto Font Size" because I don't know how to use it/have not been able to. Therefore I tried using the CSS style property font-size, which apparently works fine.

However, I've had situations when using Chrome, or Opera instead of Firefox the text the user inputs looses it's proportions. This gets worse when I try using a smartphone (android) accesing the program published as a web site, not as a smartphone application.

My question, is there is a way in which I can set a font size for the TextBox so that it maintains its proportions/autoscales for different screen sizes?

Thanks in advance.

Here is my capx, in case I didn't explained myself:

dl.dropbox.com/u/39300777/FAQs/TextBox%20AutoSize.capx

Doing some more research I found this post

scirra.com/forum/automatic-text-box-resizing-overrides-css-size_topic53912.html

Which is basically the problem I'm having. Now I see that by using CSS it maintains the font size, although the layout is scaled using an android smartphone (although I'm not making a native app, I'm putting the file on a webserver and accessing it as a normal HTML site). If I choose autosize, this overrides the CSS. I also tried the spritefont plugin but got the same results.

What has ocurred to me: Is there a way to obtain the layout scale size so I can multiply the font em size using CSS to keep the scale?

Of course, if someone has a better idea please let me know. :)

Hello InfinityX!

(sorry for my bad english)

I'm also having the same problem in my TextBox. I also do not know how to use the "Auto Font Size". Ok, it automatically changes the font size according to the layout, but how to set the size of my font? I want my font-size at 30px but when I use "Auto Font Size" it becomes very small, like 10px. My solution was to Resize it every Tick or whatever. Like this:

-Every Tick

             -Set TextBox size to (300*LayoutScale, 40*LayoutScale) (My TextBox initaially have 300px,40px)

             -Set TextBox CSS Style "Font-size" to ""&30*LayoutScale &"px"

The "set size" worked fine, but the "CSS Style" don't. Nothing happens (with Auto Font Size off). All looks right to me, but I don't know why it doesn't work. Does CSS Style doesn't accept this ""&30*LayoutScale &"px" expression?

I searched for my problem, and I found this post.

If anyone has any solution, I will be very grateful!

Hey Oni Lo!

Sorry for the late reply.

Don't worry about your English, mine is worse! :)

Regarding this issue, I still haven't found a solution for it; in fact I had given up for a while. What you describe also happened to me. I tried the Auto Size, and CSS, but still could not get it to work.

I will try to contact Ashley, to see if he has any suggestions.

Regards.

Hello,

I had the same problem as you guys and I have managed to find the solution. You have to go to the folder where Construct was installed in your PC. Then, go to > Exporters>html5>plugins>textboox. And you should open the file "runtime.js".

In the script, you should find a place where is says the following:

if(this.autoFontSize)

jQuery(this.elm).css("font-size", ((this.layergetScale(true) / .....

You should edit this text and place the following:

if(this.autoFontSize)

jQuery(this.elm).css("font-size", (((2*this.layergetScale(true)) / .....

The method consists on editing the plugin so that it can increase the size of the text and then it will continue to resize depending on the layout scale.

IMPORTANT: You should close your project and when you open it again, and you press RUN, it will work.

As Ashley has often said, it is not a good idea to modify the built-in plugins and behaviors. It is much better to just make your own, if needed.

Hi guys, my solution is the following. You can disable the "Auto font size" option, then you create an "Every tick" event (or you can set this on layout start), now you set the CSS style of the textbox with this values: property name = "font-size", value = (WindowWidth/YourLayoutWidthInPixel)*FontSizeYouWantInPixel&"px". I hope this solution help you

weslleymaciel

great tip !!!

I was revisiting the topic and after a long research I came up with a great way to adjust the font size according to the screen size and make sure it looks great in all the resolutions.

You should disable "auto font size" and then set the CSS style to property name="font-size" and value=2.5&"vh".

"vh" sets the size acording to the height of the viewport. You can change the 2.5 unit of the example for the number that better works for you.

I have try it in 7 different devices and looks great in all of them!

Great tip annerosas! Works fine even for resizing List Box font. Thanks so much!

Hi guys, my solution is the following. You can disable the "Auto font size" option, then you create an "Every tick" event (or you can set this on layout start), now you set the CSS style of the textbox with this values: property name = "font-size", value = (WindowWidth/YourLayoutWidthInPixel)*FontSizeYouWantInPixel&"px". I hope this solution help you

Thanks for the tip works great