"document.body.style.zoom" property support

[martintaal]

Smartclient 10.1p, Chrome 47, Windows 10

While manually zooming the browser by pressing CTRL + "+" or CTRL + "-" there is a proper adaptation of the components to the new measures. However, doing the same with the javascript attribute "document.body.style.zoom" it doesn't work, and there are some things (modal layers, scrolls, ...) that are not properly handled.

Here it goes a video showing it:

http://screencast.com/t/cPvihbdMG

Regards.

[martintaal]

Hi, any news regarding this issue?

Thanks and regards.

[Isomorphic]

It looks like you have not read Native Browser Zoom Support. Intractable bugs (described in that overview) make it impossible to actually support zoom (whether initiated by Ctrl +/- or programmatically).

[martintaal]

The Native Browser Zoom (Ctrl +/-) has nothing to do with the CSS property zoom http://www.css3.com/css-zoom/ (that could apply to the whole page or to a particular <div>)
In fact the visualization, not only in Smartclient by in most web sites, is different. In Smartclient also there is the problem that with the Native Browser Zoom (Ctrl +/-) everything works more or less ok, but with the CSS property there are some problems detected.
Since the problems are very isolated (Layouts with % width/height don't adapt and vertical cursor position is lost in grids/lists) I don't know if you could provide a workaround although it implies redraw the whole interface.

Thanks again.

[Isomorphic]

At least when the zoom is applied to the whole page, it looks like the same underlying problems are there. Vertical cursor position in grids and problems with auto-sizing / layouts are exactly the same issues we have with Native Browser Zoom, and the underlying cause is as described in the docs: the browser basically provides completely wrong information for element sizes and positions, so it's impossible to write any logic that works with sizes or coordinates.

[martintaal]

Hi, going back to this topic we are now trying to use the font-size property (instead of document.style.zoom) to control the size of all screen elements. In a pure CSS html web, we have no problem since we use "rem" units to all componentes, so they scale properly following the .html font-size property. The problem we have with Smartclient is that several sizes are defined in javascript.
By the moment we have a workaround consisting of multiplying all the js sizes (of load_skin.js) by a variable which is set on load time to the proper value to do the rem to px transformation based on the .html font-size.
The question is if there is something already implemented out-of-the-box in Smartclient to handle to dinamically transform all the sizes.

Thanks and regards.

[Isomorphic]

Have you seen Canvas.resizeFonts() and Canvas.resizeControls()? That would seem to be what you're looking for.
(It's how we achieve the "density" control on the showcase)

Regards
Isomorphic Software

[martintaal]

Hi, thank you. We have not been able to find the "density" control on the showcase.

The resizeControls seems that works by incresing all lengths by a fixed number of pixels. What we pursue is to increase all lengths (that use px) in a percentual way, so instead of adding X pixels to each measure, multiply them by X%

Thank you once more time.

[Isomorphic]

The density chooser is right next to the skin switcher, with options such as "Compact", "Medium", "Expanded" etc

Read the docs for resizeControls() - all controls work off of a certain base size (the size of a text input). So if you want a percentage increase, multiple your desired percentage by the current size of a text input, and use resizeControls() to expand to that many pixels.

[martintaal]

Let's suppose that I have two controls.
Control A: 60px x 30px
Control B: 70px x 20px

If I want both controls increase their size by a 200%, I would want to have
Control A: 120px x 60px
Control B: 140px x 40px

Since resizeControls and resizeFonts seems that add/substract "n" pixels to all controls/fonts at once, it is not possible to find a single value of "n" that converts my two controls to the desired size.

In my case, since I want to zoom the whole application (in a proportional way), resizeControls and resizeFonts cannot be used, unless they would accept a percentual value instead an absolute one.

PS: If all controls would change proportionally, some problems that currently exist like "all other FormItems (eg selects) need to be the same size or mixed controls will look odd. This includes Buttons" would be avoided too.

[Isomorphic]

PS: If all controls would change proportionally, some problems that currently exist like "all other FormItems (eg selects) need to be the same size or mixed controls will look odd. This includes Buttons" would be avoided too.

This is not a "problem", this is correct visual design. The docs for resizeControls() actually explain this to you:

The size of a text input control implies the size of most other controls:

• all other FormItems (eg selects) need to be the same size or mixed controls will look odd. This includes Buttons
• anything that potentially contains a FormItem needs to be as tall or slightly taller: this includes grid row (inline editing), Window headers, TabBar and SectionHeaders

If you fail to keep the size of a basic input control in mind when sizing other controls, you will end up with things like misaligned editors when using inline editing in grids, or controls that are either clipped off or force a TabSet or Window to be taller than normal when FormItems are present.

So, if you are looking to create misalignment and other problems along these lines, that's up to you - it's not something Isomorphic would pursue. The skinning system allows you to size controls however you'd like, and you can look at the implementation of resizeControls for the specific size properties that need to be applied for each type of control.

[martintaal]

Who is talking about pursing to create misalignments?

From the very beginning of the thread I was asking about a way to zoom the whole application. If before zooming I have a 12px font inside a 20px tab, after the zoom I will have, for example if I apply 200%, a 24px font inside a 40px tab. So no misalignment.

The answer to the zoom feature was:

Have you seen Canvas.resizeFonts() and Canvas.resizeControls()? That would seem to be what you're looking for.

And I have just pointed that these functions increase the components/fonts by a fixed amount of px. For example, if I have just two controls "component A -> 60px" and "component B -> 500px" and I apply resizeControls(10) I will end up with "component A -> 70px" and "component B -> 510px", and I would want a function to apply resizeControls('110%') and end with "component A -> 66px" and "component B -> 550px"

So resizeControls doesn't work for me. At least it doesn't if I want to use it one time instead of calling it each time for each control. I would have to create my own function to perform something similar to resizeControls but instead adding a fixed amount of px to all componentes, just multiply each component size by a factor.

Anyway, thank you for your time.

Regards.

[Isomorphic]

You've now switched from talking about component sizes to talking about relative component and font sizes. Again, resizeControls() and resizeFonts() can be used in tandem to achieve the resize you describe here.

Your previous examples of resizing two components by percentages would produce misalignment, clipping (already discussed) or wasted space (eg, resizing the tabBar or grid rows such that there would be space above and below input controls).

There is of course crudely scaling the entire screen by X%. That necessarily produces scrolling, another non-goal.

We still don't have a specific example of *actual controls* where resizeControls() cannot achieve a result, where that result is actually desirable.

[yulian69]

Have you seen Canvas.resizeFonts() and Canvas.resizeControls()? That would seem to be what you're looking for.
(It's how we achieve the "density" control on the showcase)

Regards
Isomorphic Software

Hi,

I try to use Canvas.resizeFonts(), but nothing is changed. I tested Canvas.resizeControls() and it is working fine.

Here is the code:
public void onModuleLoad() {
Canvas.resizeFonts(14);
Canvas canvas = new Canvas();
canvas.addChild(new HTML("Hello world!"));
canvas.draw();
}

Any ideas?

Regards