how can i change font size in Label ???

:girl:

You need to specify a style name for the label and have a custom theme for your application. Then you can specify the font size in your theme’s CSS like so:

.v-label-stylename {
    font-size: 24px;
    line-height: normal;
}

Remember to adjust the line-height for the label as well. Use the value “normal” if you wish for the browser to decide which is best for the given font size.

hy Jouni its not worked :frowning:

This is my Style Sheet and Source Code -------------
@import url(…/runo/styles.css);
/@import url(…/reindeer/styles.css);/
/* Using the old default theme (runo) as the basis for now */

/* Add some padding to the tree */

.welcome {
font-size:xx-large;
color:green;
font-weight: bold;
padding-top: 8px;
padding-left: 4px;
border:activeborder

}

.toolbarTitle {
font-size:large;
color:orange;
font-weight: bold;
padding-top: 8px;
padding-left: 4px;
border:activeborder

}

.text_error{

font-family: Georgia,'Times New Roman',times,serif;

}
/* border-color: #92a2aa;
border-top-color: #7c7d90;
border-bottom-color: #a1b3bc;

*/

.lblTitle {
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
}

/*.v-label {

font-weight:bold;
font-family: Georgia,'Times New Roman',times,serif;
font-size: 12px;

}*/

.v-tree {
padding-top: 8px;
padding-left: 4px;
font-size: 14px;
font-family: Geneva,Arial,Helvetica,sans-serif;
text-align: left;
}

.toolbar .v-button {
display: block;
width: 65px;
height:10px;
background: transparent;
border: none;
text-align: center;
}

.toolbar .v-button img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}

.toolbar .v-button span {
font-size: x-small;
text-shadow: #fafafa 1px 1px 0;
}

.v-app {
background:#a3cfe2;
font-family: “Lucida Grande”, Helvetica, Arial, sans-serif;
color:black;
}

.toolbar {
background: #ccc url(images/TestBak.png) repeat-x bottom left;
}

.toolbar-icon {
background-color: #a3cfe2;
}

.toolbar-white {
background:white;
}

.v-panel-caption-view {
color: #004b98;
}

.view {

/* background-image:url(images/bg4.png);/
/
background-repeat:inherit;*/
position:absolute;
}

.viewMain {
position:fixed;
}

.left-meue {
background:olive;
}

.main-body {
background:gray;
}

/* Theme table to look bit lighter */
.v-table-header-wrap {
height: 20px;
border: none;
border-bottom: 1px solid #555;
background: transparent url(images/table-header-bg.png) repeat-x;
}

.v-table-caption-container {
font-size: 11px;
color: #000;
font-weight: bold;
text-shadow: #fff 0 1px 0;
padding-top: 1px;
}

.v-table-body {
border: none;
}

.v-table-row-odd {
background: #f1f5fa;
}

.v-table-row:hover {
background: #fff;
}

.v-table-row-odd:hover {
background: #f1f5fa;
}

.v-table .v-selected {
background: #3d80df;
}

.v-table-cell-content {
padding: 2px 6px 2px 3px;
line-height: normal;
font-size: 85%;
}

.v-label label {
color: #8f7239;
}

.v-menubar {
font-size:16px;
color:#000000;
font-weight:normal;
border:activeborder;
background-color:#d4e7f3;
}

.gwt-MenuItem {
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size:12px;
color:black

}
.gwt-MenuItem-selected {

font-family: Geneva,Arial,Helvetica,sans-serif;
font-size:12px;
color: lime

}
.menuitem {
font-size:12px;
color:green;
font-weight: bold;[color=#E33030]

[/color]
border:activeborder

}
.v-label-caption {
font-size: 24px;
line-height: normal;
}


this is my Source Code----------->

// lblTitle
Label lblTitle = new Label();
lblTitle.setImmediate(false);
lblTitle.setHeight(“60px”);
lblTitle.setWidth(“50px”);
lblTitle.setCaption(“Basic Information”);
lblTitle.setStyleName(“caption”);
mainLayout.addComponent(lblTitle,
“top:53.0px;right:1199.0px;bottom:693.0px;left:60.0px;”);


also i was assign above main style to Main Window … its wrong ?

----->code—>

public WinLayout(String caption, String them, MainForm mainfrm) {
this.setMainFrm(mainfrm);
this.setWin(this);
window = new Window(caption);
window.setTheme(them);
window.setSizeFull();
layout = new VerticalLayout();
layout.setSizeFull();

    createLayouts();

}

Sorry, but I just couldn’t figure out anything out of that blurb of code you pasted. Please post working code or attach source files directly to the forum post, and maybe I can look at it then.

In the meantime, check out the chapter about themes in the Book of Vaadin:
8.3 Creating and Using Themes
and
8.4 Creating a Theme in Eclipse

Eranga,

This is an old thread but I still want to say my similar problem. This may be of help to you or to somebody having a similar problem. I did some quick tests on Label’s “setCaption” method and noticed the ff. below;

  1. In my case, calling Label.setCaption does not work after reconstructing (add and remove) parent layouts or neighboring layouts that may affect the immediate parent layout of a Label.

  2. Sometimes it makes me think that Label “content” and “caption” are different things ( need to verify with the Book of V ). This is because at creation time of a Label it’s CSS style applies to the “content” while styles doesn’t apply after calling setCaption. Ex.


//css
.v-label-newLabel {
 font-size: 20px;
}
//end css
Label newLabel = new Label("content");  // font-size applies
newLabel.setStyleName("newLabel");
// ... layout restructuring or not
newLabel.setCaption("new caption"); // font-size doesn't apply, and this creates a new Label below newLabel with this caption - weird

So what I did for a workaround is that everytime I want to set newLabel’s content/caption whatever it is, I recreated it just like doing at first creation of newLabel. This is just a workaround, I’m still trying to figure out why this problem happened. But I’m again more convinced that there might be a bug when restructuring layouts, I have somewhat a similar problem to this where I need to remove and add again child components to redisplay them correctly (see "
Removing components in a window w/o affecting others.- AbsoluteLayout" thread).

:wacko:

Hey!
I had the same problem so I looked for some other methodes to change the labeltext.
Label.setValue(String) does the thing for me. No second label and the text is shown in the correct size.

Greetings,

Steve

Just to clarify this: label cation is not the contents of the label - the label value is.

Cations are in general not a part of the component, but the layout around the component may (or may not) display them, usually above (most layouts) or to the left (FormLayout) of the component. This is perhaps made a little confusing by the fact that a few components (e.g. Button) do manage their own captions and show them inside the component, rather than letting the layout do it.

The label can have a caption and a value, and its value can also be wired to a (property) data source.

Here is my lazy-person’s way to style Label: Assign one of the built-in “h1”, “h2”, …“h6” styles defined by the Reindeer theme.

Label title = new Label( "Very Important Report" );
title.addStyleName( "h1" );

Label subtitle = new Label( "Total Cases, Red Wine: 42" );
subtitle.addStyleName( "h2" );

See attachment for screen-shot example.

15636.jpg

I’m also trying to change the font size of a lable … without success.

I have defined following css rule:

/** title font */
.v-label-dfFontTitle {
  text-align: center;
  vertical-align: middle;
  font-size: 150%;
/*  font-weight: bold; */
  padding-bottom: 5px;
  border: blue solid 1px;
}

And on Java side I use following label:

    Label lblTitle = new Label(Lng.get(I18N_LBL_TITLE_P2, loginCtlr.getCompanyName(), loginCtlr.getShortProjectName()));
    lblTitle.addStyleName(CSSStyleNames.dfFontTitle.name());
    layoutTitle.addComponent(lblTitle, 0, 0);
    layoutTitle.setComponentAlignment(lblTitle, Alignment.MIDDLE_CENTER);

If I run the application the blue frame is shown like it is was defined in CSS. So my defined CSS rule will be taken. But the font size is not bigger as normal font size. Also If I look in the CSS rules on browser side (via WebDeveloper) the font-size rule is shown (150%) and I cannot find any reason why the font has normal size.

Any tips?

Thanks,
Steffen

Found this post here
https://vaadin.com/forum#!/thread/176268/176359

And yes, that’s right. Seems that my font-size definition is overridden by a font-size defined in .v-widget .

But the question is still there: How is the official way to change the font-size? The “h1-h6”-solution of Basil B. sound to me like a work around. Also the solution of David W.
https://vaadin.com/forum#!/thread/176268/176359
with a additional form cannot be the official way, or not?

Hey Steffen,

Which theme are you using? If you’re using Valo, this should help you define the font-size:
https://vaadin.com/book/-/page/themes.valo.html
.

Otherwise, it sounds like a specificity issue. Have you read this?
https://vaadin.com/book/-/page/themes.css.html
. In other words, I think you might just need to be more specific with your selectors.

Thanks Joacim and sorry for the late answer. I have also a other second project which has claimed my time …

I use a chameleon based theme.

But I think the problem with the font size is another. The generated HTML code is:

[code]

Hello Vaadin!
[/code]The style class (v-label-)dfFontTitle is defined by me. In this style class I try to set the font size for this label.

/* Zeile 107 */ .dfFontTitle { ... ... font-size: 150%; } But the problem is, that in “v-widget” the font size will be overridden with the default font size of the theme.

/* Zeile 324 */
.docFlow .v-widget {
  text-align: left;
  display: inline-block;
  white-space: normal;
  vertical-align: bottom;
  font-size: 13px;
  line-height: 1.4;
}

Hey Steffen,

Yeah, you need to be more specific. Try using
.v-label.dfFontTitle
instead of just
.dfFontTitle
.

Hi Joacim,

not really sure what you mean, but I have tried now also following CSS rule:

/* Zeile 107 */
.dfFontTitle,
.v-label.dfFontTitle,
.v-label-dfFontTitle,
.v-label .dfFontTitle {
  ...
  ...
  font-size: 30px;
}

… But it’s not working … :frowning:

And I’m really not sure if it’s possible to override the definition in .v-widget. The only point where I can override the definition of .v-widget is in .v-label. But if I change this CSS rule I change it for each label. And this is not what I want …

Hey Steffen, what does the inspector say? .dfFontTitle.v-label is more specific than .v-widget and thus should override any style coming from the widget style.

.dfFontTitle.v-label {
  font-size: 20px;
}

See attachment.
17113.png


AAAARRRGGHHHH!!!


Found it!
I have placed my own CSS rules beheind the closing “}” in the scss file.

Wrong:

[code]
@mixin vaadintest {
@include chameleon;

// Insert your own theme rules here
}

.dfFontTitle.v-label {
font-size: 20px;
border: red solid 1px;
}
[/code]But correct is this:

[code]
@mixin vaadintest {
@include chameleon;

// Insert your own theme rules here

.dfFontTitle.v-label {
font-size: 20px;
border: red solid 1px;
}
}
[/code]Found this while creating a new project for testing your hint.

Thanks Joacim for your support!

Steffen

Nemas problemas, you’re welcome :slight_smile:

Thanks it’s work!