Results 1 to 6 of 6

Thread: Unable to style ListView with css

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    17

    Default Unable to style ListView with css

    Hi all

    I am trying to change the row height and font size of my ListView via css but the new style is just not reflected. Could anyone point me to what could be wrong?

    Code:
    MYListView<BDto, String> bListView = new MYListView<BDto, String>(store, props.name());
    bListView.addStyleName("list-row-height");
    Code:
    .list-row-height 
    { 
        line-height: 100px;
        font-weight: bold;
        font-size :20px; 
    }

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    49

    Default

    Your css might not be getting applied to the right part of the list view...it may be better to customize the css through a new Appearance. See http://www.sencha.com/blog/ext-gwt-3-appearance-design

  3. #3
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737
    Answers
    109

    Default

    The CSS you've written there is being added to the listview itself, not to each row - is that what you want it to do?

    To add it to each row, make a custom cell that adds that css class each time render is called.

    Beyond that, you'd need to post a runnable sample (i.e. add BDto, propertyaccess and sample data), what is currently happening in firebug/etc, and what you expect it to do.

  4. #4
    Sencha User
    Join Date
    Dec 2012
    Posts
    17

    Default

    I don't get the runnable sample part.

    What I wanted to do is to change the font/sizes of the text in the listview, its seems rather complicated to get it done.

  5. #5
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737
    Answers
    109

    Default

    Without a runnable sample, I can't tell what else might be interfering.

    CSS isn't nearly as simple to learn as most people think it is - if there is a specific set of styles being applied directly to the element, those will take precedence over styles applies at a higher level (like what you are doing). This is why I suggested applying them directly on each item.

    Use firebug in firefox, or the inspector in chrome to see why your styles are being overridden - this should give you clues to see how to change them so that they do what you expect. I asked for a runnable sample to try to help you in these steps - if I can't run it, then I can't help debug it.

  6. #6
    Sencha User
    Join Date
    Dec 2012
    Posts
    17

    Default

    So much easier to change the font size of text in a grid. Will try it on listview again when I'm done with some other stuff.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •