Results 1 to 8 of 8

Thread: How do I remove padding from list items?

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Raleigh, NC
    Posts
    17

    Default Answered: How do I remove padding from list items?

    How do I remove the padding that is being applied to list items via the x-list-item-label div?

    Using Chrome's Developer Tools I can see that it is applying padding.
    Code:
    .x-list .x-list-item .x-list-item-label {
    
    
    
    • min-height: 2.6em;
    • padding: 0.65em 0.8em;
    My attempt to override the default padding values does not seem to work.

    Code:
    .x-list, .x-list-item, .x-list-item-label
    {
      padding: 0;
    }
    If I comment out the default styling import for list items my code above will work:
    Code:
    //@include sencha-list;
    However, then I loose all the other list item styling that I do want. I imagine I could copy all of that desired functionality into my stylesheet but that seems like the incorrect way to go about things.

    Any pointers on how to handle this properly?

    Thanks,
    bclover

  2. You may need to use the !important flag

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    You may need to use the !important flag
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Raleigh, NC
    Posts
    17

    Default

    Thanks Mitchell that worked like a charm! Can you point me to some documentation on what and when to use the !important flag. This is the first time I've come across it.

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    Raleigh, NC
    Posts
    17

    Default

    I see, so does this mean that the custom CSS I specify is compiled into the CSS before the default Sencha CSS styles? Thus why the Sencha styles override my stuff unless I use the important flag?

  6. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    It's just a CSS flag that will tell the browser to use that rule over others no matter the order of CSS rules you have.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Raleigh, NC
    Posts
    17

    Default

    Using !important sounds like a bad practice.

    "!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then youre abusing it, and you (or those that inherit your projects) will suffer the consequences."

    http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

  8. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    It depends on how your app.scss is setup. If your custom classes go after the @include then you should be fine.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  9. #8
    Sencha User
    Join Date
    Feb 2012
    Location
    Raleigh, NC
    Posts
    17

    Default

    Quote Originally Posted by bclover View Post
    I see, so does this mean that the custom CSS I specify is compiled into the CSS before the default Sencha CSS styles? Thus why the Sencha styles override my stuff unless I use the important flag?
    For anyone else that is new to Sencha, I just wanted to point out that custom style settings are compiled in with the default css and added in at the bottom of the file...AFTER the default css setttings. Earlier in this post I had assumed it was compiled in BEFORE the default css. After opening the file compiled by compass, I realized my default style info was at the bottom.

Posting Permissions

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