Width of HTML areas

Classic Servoy
1

There is a difference between the web-client and the smart-client when using HTML Areas.

This is what I’ve got in servoy:

a HTML field with the size: 260,20, so far so good… The datasource of this HTML area is a calculation which returns a HMTL with a DIV

<html><body><div style="width: 260px; height: 18px; background-color: #FFCC00"> </div></body></html>

But now we have the problem!

In smartclient it shows a scrollbar:
[attachment=1]Screen shot 2011-04-06 at 09.24.09.png[/attachment]

And in the webclient is just works as it should be!
[attachment=0]Screen shot 2011-04-06 at 09.24.18.png[/attachment]

To fix it in the smartclient i have to reduce the width (in the DIV) to 195px and the height to 14px, this is very strange, isnt it? Or just do a dirty work-around, and disable the scrollbars!

Screen shot 2011-04-06 at 09.24.18.png

Screen shot 2011-04-06 at 09.24.09.png

2

and if you configure the html area to never have scrollbars?
Or are the scrollbars really inside the html? Then you must make sure that the style you use in html sets the scrollbar policy

3

If I disable the scrollbars on the element its gone, however the problem still is, that I CANNOT use the 260px width in HTML without a scrollbar in the element which is not a expected behavior !!! As you can see at the screenshots in my first post. This only happens in the smartclient!

4

i don’t get it now you do say “if i disable the scrollbars then it is gone”
so if it is gone what is then still the problem?

5

Hi Rick,

It seems the problem is not the width, but the height.
When I use a HTML_AREA field with an empty border (having a border will reduce the width/height as well) then the 200px width fits perfectly inside the 200px wide field. But I have to reduce the DIV height to 16px to make it fit inside the 20px high field. So it looses 4 pixels somewhere.
Adding a border will require you to tweak with the DIV width/height as well in ways that are unexpected (reduce 1 or 3 pixels for instance…instead of the expected 2 or 4).

I did my testing on Mac.

6

@jcompagner & @ROCLASI: see sample, i just cant express it in words… So I made a solution!

Smartclient:
[attachment=2]Screen shot 2011-04-06 at 15.23.53.png[/attachment]

Webclient
[attachment=1]Screen shot 2011-04-06 at 15.23.55.png[/attachment]

Sample
[attachment=0]rep_div_width_prob.servoy[/attachment]

rep_div_width_prob.servoy (3.95 KB)

Screen shot 2011-04-06 at 15.23.55.png
Screen shot 2011-04-06 at 15.23.55.png453×298 15.4 KB

Screen shot 2011-04-06 at 15.23.53.png
Screen shot 2011-04-06 at 15.23.53.png592×331 18.2 KB

7

it seems that it is a mixup between pixels and points…

if you make it 260pt then it is 260 pixels in the smart client (but 360 or something in the web)

can you create a case with this sample? I don’t know if we do something or if it is the java renderer itself

8

@jcompagner ok filed it under caseid: #374263

9

Ok Johan,

Found out that this not only occurs with HTML-areas… Also in the CSS of Servoy.

I have the following CSS:

field
{
	background-color: #F5F5F5; /* E1E1E1 */
	border-style: solid;
	border-width:0px; 
	font: 9px "Verdana"; 
	text-align: left; 
	margin: 1px 2px 1px 1px; 
	border-color: #CCCCCC;  /*60696E */
}

Normally 9px is pretty small in HTML but in Servoy its very huge… When I use 9pt is smaller which not should be…

You can try this in a HTML, and you will see what happens:

<html>
<head>
<style>
p.pix
{
	background-color: #F5F5F5; /* E1E1E1 */
	border-style: solid;
	border-width:0px; 
	font: 9px "Verdana"; 
	text-align: left; 
	margin: 1px 2px 1px 1px; 
	border-color: #CCCCCC;  /*60696E */
}

p.pount
{
	background-color: #F5F5F5; /* E1E1E1 */
	border-style: solid;
	border-width:0px; 
	font: 9pt "Verdana"; 
	text-align: left; 
	margin: 1px 2px 1px 1px; 
	border-color: #CCCCCC;  /*60696E */
}


</style>
</head>

<p class="pix">Dit is een test tekst (9px)</p>

<p class="pount">Dit is een test tekst (9pt)</p>

</html>

Also included screenshots:
[attachment=1]Screen shot 2011-04-14 at 13.32.09.png[/attachment]

[attachment=0]Screen shot 2011-04-14 at 13.32.30.png[/attachment]

I guess that the PX and the PT are mixed up in the smartclient or something!

Screen shot 2011-04-14 at 13.32.30.png

Screen shot 2011-04-14 at 13.32.09.png