custom css x-type list Sencha

Question

We are using Sencha Touch 2.3.0 framework for our app. We have a list of items that is grouped by date. We are trying to adjust the group header's layout with css. All documentation on the internet says that we had to add the cls:'CustomClass' item, and add the class to the app.css file. Alle other classes in that file are working problerly. So it cannot be the css file.

We did, instead it isn't working, we still see the default layout. Might anybody be able to help?

.groupedHeader .x-list-header{
    background-color: #C4C9CC !important;
    background-image: none !important;
    border-color: #C4C9CC !important;
    color: #fff;
    font-weight: none;
    text-shadow: none !important;
}

List definition:

{    
    xtype: 'list',
    onItemDisclosure: false,
    scrollToTopOnRefresh: false,
    itemId: 'listOrderItemsId',
    id: 'listOrderItemsId',
    grouped: true,
    store: 'OrderStore',
    infinite: true,
    cls: 'groupedHeader',
    variableHeights: true,
    itemTpl: '<div style="padding: 12px 15px;border-top:1px solid #e6e6e6">{firstName} {lastName}</div>'
}

Answer 1

Try this:

.groupedHeader .x-list-header .x-innerhtml {
    background-color: #C4C9CC !important;
    background-image: none !important;
    border-color: #C4C9CC !important;
    color: #fff;
    font-weight: none;
    text-shadow: none !important;
}

Use the inspector of your browser to find out the right DOM element, when you are not sure which one you need exactly:

Answer 2

Are you adding the css to resources/css/app.css file?

Then when you test are you using Sencha CMD? Maybe running $ sencha app watch or $ sencha app build commands before testing your change?

If so during the build the app does a compass compile and recreates the app.css file from the MyApp/resources/sass/app.scss file. Anything you write in the .css file that has a matching sass/scss file will be over written.

You may want to include a css file that can be in the css folder but you name it uniquely. Maybe call it overrides.css.

Now you need to let the app know about the css file. For that you can add it to the head of the index.html file but I would recommend adding it in the MyApp/app.json file around line 73.

"css": [
    {
        "path": "resources/css/app.css",
        "update": "delta"
    },                                    //<-- DON'T FORGET THAT COMMA :)
    {
        "path": "resources/css/overrides.css",
        "update": "delta"
    }
],

Make sure your css loads after app.css by placing it after the app.css reference.

Once you clear your cache and refresh you should hopefully see your changes.

If your css doesn't override Sencha's you may need to target the dom item more specifically. Sencha generates an ID for almost every element. I don't recommend using those because they can change between projects.