I have some labels (not buttons) and try to set the margins. Settings are, unfortunately not adopted. The text remains in the same position as default no matter how wide I set the margins.
The labels are placed in the header of a form in listview…
on labels a margin only works if the label has a border…
(the margin is always something between the text and the border of the component)
I have been trying to do the same thing and cannot get it to work. Not with an ‘empty’ border-style, not with a solid border-style and border-width of 0px. When I customize the margins of a label in the properties with borderType set to ‘empty’ and margins set to my specs it works. But not in the style sheet.
The margins work flawless with fields though. Elp!
I am using 2.1.
field <!- This works →
{
background-color: #606060;
border-style: solid;
border-width: 0px;
color: #ffffff;
font: 10px “Trebuchet MS”;
margin: 0px 0px 0px 3px;
}
label <!- This doesn’t →
{
background-color: #909090;
border-style: solid;
border-width: 0px;
color: #ffffff;
font: 9px “Trebuchet MS”;
margin: 0px 0px 0px 3px;
}
this is fixed in 2.1.1
Whooo-hooo!
What is the CSS to get a border along the bottom of a label? This doesn’t work:
label.h1
{
color: #003366;
font: bold 9pt Verdana;
margin: 0px 0px 3px 0px;
background-color: white;
border-bottom-color: #003366;
border-bottom-style: solid;
border-bottom-width: 1px;
}
David
I haven’t used it myself in Servoy but knowing a little bit of CSS I would say try this syntax:
border-width: top right bottom left;
So that would make:
border-width: 0px 0px 1px 0px;
I’ve tried all the ways listed and then some. I’m also finding quite a few other little discrepancies with CSS. I’m on 2.1.1 build 311.
David
such as?
give us a small solution that demonstrates them with a stylesheet.
Off the top of my head:
(1) None of the border stuff works when trying to do just one side of an object. This is half the properties listed!
(2) Many of the values that are listed for a property don’t do anything for the object listed. Example #1: the “transparent” value for background-color on a field does nothing. Example #2: the listed values for the border-style property work with some objects but not others.
(3) I can’t get anything to work for the formBody object. I would at like to set the background-color with this.
Besides a bunch of stuff not working, the documentation needs to specify what properties are required for other properties to work. A good example is that if you have no border property, the margin property doesn’t work.
My general viewpoint is that styles with CSS rocks. In the future: I want to be able to change the subclass of a named object at runtime. I also want to be able to grab and set complete style sheets at runtime (this was mentioned elsewhere as well). Not only on the developer level (which would affect all users) but at the user level (affect just the user).
If this functionlity were added, it would be easy to write functionlity where the user can specify the look and feel of the application. For the developer, a tool could be written where they can mess around with easy to use controls that immediately change the look of a template and when they are done tweaking, they can copy the resultant CSS code and use in their own application.
David
jcompagner:
on labels a margin only works if the label has a border…
(the margin is always something between the text and the border of the component)
johan, just wondering why you called it “margin” while according to the CSS specs (the box model), it should be called padding instead.
http://www.w3.org/TR/CSS1#box-properties
For me it was a bit confusing at first, well, nothing so critical, but unless specific requests i ignore, to prevent future incompatibility with CSS specs it could worth a look.
we call it margin because it the same property as you see in the properties panel of an element.
david:
1>
this works fine:
label
{
border-color: #ff00ff;
border-style: dashed;
border-bottom-width: 5px;
border-left-width: 10px;
}
so what do you mean by “just one side of an object” ?
2>
a> “transparent” yes that doesn’t seem to work in the current CSS implementation of java. So currently we can’t do much about this.
b> Please give me an example solution with one or more example styles where you see things working on one object and doesn’t work on another.
3>
form
{
background-color: #ff00ff;
}
jcompagner:
this works fine:
label
{
border-color: #ff00ff;
border-style: dashed;
border-bottom-width: 5px;
border-left-width: 10px;
}so what do you mean by “just one side of an object” ?
LOL!!! Johan, check the CSS chart in the latest documentation and “dashed” is NOT a listed value for the “border-style” property. OF COURSE it would have to be the only value that works as advertised (otherwise I would have figured it out with all the testing I’ve done). Replace “dashed” with “solid” for example and your code doesn’t work (at least on the field and label objects).
It so happens that I want a SOLID border along the left and top sides of a field.
jcompagner:
a> “transparent” yes that doesn’t seem to work in the current CSS implementation of java. So currently we can’t do much about this.
Fine, remove it from the CSS chart then.
jcompagner:
b> Please give me an example solution with one or more example styles where you see things working on one object and doesn’t work on another.
It would take me all day to do this with all the combinations possible.
jcompagner:
3>
form
{
background-color: #ff00ff;
}
Yes, this works. This following doesn’t work though (and it’s listed as possible in the CSS chart):
formBody
{
background-color: #ff00ff;
}
David
Font pt size doesn’t work with “regular” text:
label.field
{
color: #666666 ;
font: regular 9pt Verdana;
background-color: white;
text-align: right;
}
It does work with “bold” text:
label.field
{
color: #666666 ;
font: bold 9pt Verdana;
background-color: white;
text-align: right;
}
To get around this issue, this does work:
label.field
{
color: #666666 ;
font: regular 9pt Verdana;
font-size: 9pt;
background-color: white;
text-align: right;
}
David
EDIT: figured this one out – font weight should be “normal” and not “regular.”
The margin property order of values is “t, r, b, l” instead of “t, l, b, r” as documented (at least for a field). To get a 2px left margin in a field:
field
{
font: normal 11pt "Verdana";
text-align: left;
border-style: inset;
border-width: 1px;
margin: 0px 0px 0px 2px;
}
David
Hello All
Is there still now way to set left or right margins for a label when border-style: empty is used in the CSS style? It works with a solid label border, but that’s not what one (usually) wants…
If it is a Java related problem, is this may be fixed in Java 1.6? Can anybody comment on this?
Thanks and best regards, Robert
add margins to this:
border-style: solid;
border-width: 0px 0px 0px 0px;
Thanks Marcel!
Unfortunatly, it doesn’t work with column labels for table view forms, as the header (title) background get’s white (instead of the “normal” appearance of a table view column header).
Or do you know of a enhancement of this workaraund to even fix that?
Best regards, Robert
david:
add margins to this:border-style: solid;
border-width: 0px 0px 0px 0px;
Table headers have their own set of issues.
You can’t adjust the spacing (margins or alignment) in table headers with a Servoy style.
You have to do it directly with html in the text property or lableFor element. The following will work for a field with left anchoring that is 200px wide (note the css width difference is 3/4’s off):
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table>
<tr>
<td>
Title
</td>
</tr>
</table>
</body>
</html>
If you’re on a mac, you also have this issue:
http://forum.servoy.com/viewtopic.php?p=54815
For all the quirkiness, graphics in headers is pretty cool:
<html>
<head>
</head>
<body>
<p style="margin-top: 0">
<img src="media:///help_question.png">
</p>
</body>
</html>
