Cropping in label when using large fonts

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I am using a label to display a status messgge. This message wants to be very large, so I have set the label to use a css style giving a font size of 36pt. Unfortunately the label appears cropped at this size. I have inspected the generated html using firebug and it shows the DIV that containing the label is easily large enough to display the text at this size, but the text seems to be offset insiode this div so the upper part is invisible. I have tried progressively reducing the font size and 21pt seem to be the largest I can do without cropping. I have tried setting the Alignemnt of the label to BOTTOM and setting the css vertical-align property to bottom, but nothign seems to work.

Has anyone any ideas?

Thanks.

2

You may need to set the line height as well.

For example:

.v-label-title {
    font-family: sans-serif;
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
}

Hope this helps.

3

Yes that’s got it, thanks very much :slight_smile: