I need a quick and easy way to vertically center text in a label (the Servoy kind - “Label/Button”).
I am printing a page of address labels (the Avery kind, 30 to a page). I’ve got the form sizes and everything right - I just need my label text to be centered vertically (top to bottom). I have no problem centering the text horizontally…
The label content is HTML. I have tried every CSS trick I know of, and also other HTML but non-CSS tricks like
. I haven’t found anything that works so far! Servoy does not interpret the 100% as the entire height of the label - just the height of the HTML. And vertical-align in CSS does not appear to have any effect at all.
Has anyone found a way to do this, perferably a simple one?
Here is the code for the calculation I use for the label. This is the simplest way I tried, without using CSS:
var tLab = '<html>\n<head>\n';
tLab += "\n</head>\n<body>\n<table border=\"0\" height=\"100%\"><tr><td valign=\"middle\"><center>";
if (short_name && short_name.length > 0)
tLab += "<b>" + short_name + "</b>";
tLab += "
"; //add a break even if there is no short name
if (addr_line_1 && addr_line_1.length > 0)
tLab += addr_line_1;
tLab += "
"; //add a break even if there is no address
if (addr_line_2 && addr_line_2.length > 0)
tLab += addr_line_2 + "
";
if (city && city.length > 0)
tLab += city + ", " + state;
if (zipcode != 0)
tLab += " " + zipcode;
tLab += "</center></td></tr></table>\n</body>\n</html>";
return tLab;
If you copy the code this generates into a web browser, it will center in the middle of the screen. The text label in Servoy that uses this as a dataprovider is taller than the text it generates, but the text remains at the top. You can also set the table border to a non-zero value if you are having trouble visualizing what Servoy is doing.
Can you check the verticalAlignment property of your label?
(select the label in designer mode , and look for the property in prop. list
at your right)
Try setting it to CENTER and see what happens.
(also experiment with horizontal alignment property)
I removed variables from your script to test and it seems to center
with verticalAlignment property set to DEFAULT or CENTER.
(note: if set to DEFAULT, and having a servoy stylesheet attached to the form, it will follow the rules defined in that stylesheet.)
var tLab = '<html>\n<head>\n';
tLab += "\n</head>\n<body>\n<table border=\"0\" height=\"100%\"><tr><td valign=\"middle\"><center>";
tLab += "<b>SHORTNAME</b>";
tLab += "
"; //add a break even if there is no short name
tLab += "ADDRESS1";
tLab += "
"; //add a break even if there is no address
tLab += "ADDRESS2
";
tLab += "CITY , STATE";
tLab += " ZIPCODE";
tLab += "</center></td></tr></table>\n</body>\n</html>";
elements.testLabel.text = tLab;
Yes, that fixed it. I should have caught that one - just didn’t look at the inspector closely enough. Why is verticalAlignment way up at the top of the list, 9 entries away from horizontalAlignment? Either way, I admit fault…
That begs the question: when do Servoy properties override the HTML or CSS? For instance, even though I have horizontalAlignment set to CENTER and the text set to center (using the button on the toolbar), I still have to use tags within my HTML in order to get the text to center properly. I have also noticed that fonts I set with CSS are usually ignored. Why is this?
Why is verticalAlignment way up at the top of the list, 9 entries away from horizontalAlignment?
I admit this doesn’t make much sense. For one thing, I would like properties sorted on alphabet, since I pretty much know their names by heart. But I can imagine others would like them grouped by context. Font stuff, event stuff etc… Definitely room for improvement here…
when do Servoy properties override the HTML or CSS?
Basically servoy properties will take control of the html if you don’t specify that property inside your HTML.
IN other words, if you specify in your html that the font should be Arial,
then servoy property fontType will not do anything
