[css] changing font-size in TextField

Flow
1

Hi. I’m trying to chage font-size of TextField.


TextField title = new TextField();
title.addStyleName("mycooltitle");

and at the end in my styles.css in my custom theme named notes
which was extended from
runo
 theme,
a have such lines.


.mycooltitle{
    font-size: 24px;
}

But the font-size in not changing actually. it seems like it’s beeing overrieden by some other css.
Can you help with this? Thanx

2

I recommend using FF with Firebug (though developer tools in IE8 may also help, along with similar tools for Safari, etc.), so that you can see how the CSS is being determined.

Your technique will end up resulting in your style not being used. Instead, the CSS debuggers show it uses the font-size from this:

.v-app, .v-window, .v-popupview-popup, .v-app input, .v-app button, .v-app textarea, .v-window input, .v-window button, .v-window textarea, .v-popupview-popup input, .v-popupview-popup button, .v-popupview-popup textarea, .v-filterselect-suggestpopup, .v-datefield-popup, .v-datefield-calendarpanel-header button, .v-contextmenu, .v-Notification, .v-menubar-submenu, .v-table-header-drag, .v-filterselect-select-button .v-filterselect-input, .v-drag-element

And it finds that before your theme’s styles.css specification, so it’s overrides it.

While I don’t know the best/recommended way to do this, I found that when I’m putting a TextField for example into a Form (subclass of Form), on the Form itself I use something like the following in my Mycoolform’s constructor:

setStyleName(“mycoolform”);

Then if your CSS uses .mycoolform .mycooltitle { … } it will find your style before the others. If your TextField is inside a Layout, too, if you set a stylename for the Layout, it will also work similarly.

I’m not a CSS expert, so it’s not always clear why this is the case, but I do know that if you can style the container and then the component, using .containerStyle .componentStyle in my CSS seems to have it be found and used ahead of anything else.

Good luck…

3

David, thanks very much for this (several months old) post. You saved me a lot of work.

4

HI All,

I want to change the default font of all textfield’s in my application.
So i gave the CSS style as

.v-textfield {
    font-family: 'sans-serif';
    font-size: 16px;
}

But this style is being over rideen as mentioned in the previous post.
Can you please let me know the correct option to achieve this.

Same applies for button also. (.v-button)

Thanks

5

Hi,

I think you’ll find the standard style sheets selector for textfields is “.v-app input” which is more specific that your “.v-textfield” definition, which is why your style is not being used.

How do I know this? Firebug, as mentioned in posts above.

We us the following declaration in our application to change the default font-family, color and size in most (all?) components.

.v-app, .v-window, .v-popupview-popup, .v-tooltip, .v-app input, .v-app select, 
.v-app button, .v-app textarea, .v-window input, .v-window select, 
.v-window button, .v-window textarea, .v-popupview-popup input, 
.v-popupview-popup select, .v-popupview-popup button, 
.v-popupview-popup textarea, .v-filterselect-suggestpopup, 
.v-datefield-popup, .v-contextmenu, .v-notification, .v-menubar-submenu, 
.v-drag-element, .v-customoverlay, .v-button-link .v-button-caption {
  color: #222;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

Cheers,

Charles.

6

The only way I could make this work was via:

  input[type="text"]
 {
    font-size:24px;
  }

i.e. settig the font generally for all input fields.