How to resize objects to fit any phone size

[PacMan Programador]

Hello, I have a code editing app, based on the ace js editor, it is written in HTML and it is seen through a WebView, the problem is that when the app is in a device of approximately 5 inches it fits perfectly, but in the biggest ones, there is a blank space, how can I fix this?

[t4]

i think, you can use css media queries:

http://htmlbook.ru/css/value/media

[Steve Garman]

It always used to be the case that there are all sorts of things ace.js won't do on Android, including resizing itself.

That was why DroidScript did not use it as an editor on the device although they use it for the WiFi IDE.

It might be worth looking at the ace faq to see if it is still declaring that they have no intention of fixing it for Android.

[PacMan Programador]

And what can I do? what alternative do I have

[Steve Garman]

It looks like recent versions of Ace work much better on Android than they used to, so there is a possibility your problem is just your css or your ace settings.

I doubt you will find any ace experts here but if it is an html or css problem someone may be able to help if you put together a simple example that demonstrates the problem and post an spk.

[John]

Sounds like the issue I ran into making a demo of using CodeMirror in a webview. Had to adjust the CSS of one of the CodeMirror containers. Worked out.

See my demo here: https://dspk.justplayer.de/browse/view/62

[PacMan Programador]

CodeMirror I have already tried it and it works perfectly, the problem of Codemirror is that it has many failures during the writing of codes.
And in ace I do not have these failures, only that it does not adapt to the screens since it asks for obligatory measures why if the editor is not shown, if they give me a demo or a solution I would be very grateful.

[John]

I didn't encounter any issues trying out Ace Editor in a webview, maybe you could post your code?

Here's what I have: https://www.dropbox.com/s/sa2ixz7m3qdm17d/Ace%20Demo.spk?dl=0

[PacMan Programador]

What problem do I have in my code? When the screen changes size, part of the editor is hidden in the top bar of the app. and also I have another problem, when writing several lines of code the lower lines remain under the keyboard, how do I achieve that the active line is always above the keyboard?

My SPK
https://drive.google.com/file/d/1-A1pB7-c7ySDyaN5nJa5r7ySPbNJ3Fvx/view?usp=drivesdk

[John]

While 'layeditor' is Linear, the layout 'lay' it sits on is Absolute. Try adding 'layeditor.SetPosition(...' to move it below the top bar.

[John]

Not sure about making sure the active line is above the keyboard... Have you tried 'app.SetOnShowKeyboard(', maybe with a change of size to 'layeditor' or 'web' when the keyboard shows?

[PacMan Programador]

Oh, thanks for the 2 things, the 2 worked for me

[John]

You're welcome! I really liked your app.

[PacMan Programador]

Thanks, one more question, when using the "OnShowKeyboard" function I did what you told me, I reduced the size of the editor, but in larger phones there is a blank space, how can i make it fit all sizes?

SPK

https://drive.google.com/file/d/1-Lu7NrUbh30kTXXfNbhG2VqHigskshjO/view?usp=drivesdk

[Steve Garman]

It probably wants something like this (untested)

function keyActive(key)
{
var kh = app.GetKeyboardHeight()/app.GetScreenHeight()
web.SetSize( null, 0.911 - kh );
}

[John]

Steve, its tested and works great on my phone!

~~~~

Only hiccup was that if you click folder icon to open file, the file picker closes the keyboard but doesn't call the function to resize the webview --- you may want to call app.HideKeyboard from the open_file function *before* app.ChooseFile