Search code examples
layoutsproutcoresproutcore-views

How to set the text size of a LabelView in SproutCore

This may be obvious, but I can't find how to enlarge the font size of an SC.LabelView. What I have now is

title: SC.LabelView.design({
    layout: { centerX: 0, centerY: 0, height: 36, width: 200 },
    tagName: "h1",
    value: "Contacts"
})

Although it is an h1, it stays 'normal' text, but it is a title, as suggested by the property name.

Solution

  • SproutCore includes a CSS reset so that you can style your page and make it look the same across all browsers.

    The best way to edit your styles is to add some CSS to my_app/resources/main_page.css using the font-size property.

    $theme h1 {
  font-size: 30px;
}

    There are some comments and links to additional resources in the main_page.css file, but you can learn more from the Chance guide.