Grow your CSS skills. Land your dream job.

Dynamic list padding

  • # November 14, 2013 at 1:31 pm

    I have a list, which has a sub list, and sub list, etc. Nothing crazy.
    The way I have my list(s) set up is with no margin/padding so they all are aligned directly to the left, and each list item has a label that allows the user to select the list item without having any padding or space to the left.

    I would like to use Sass perhaps to give each label more padding than the list above it. The list would end up looking like a normal one, yet each list item would be fully-selected. I have no idea how to do this dynamically. If I knew I’d for sure have 3-4 levels within the list, that’d be ok. But this is set by the user and could have 1-x levels.

    Pen Example.

    I apologize if my explanation is confusing.

    Ed
    # November 14, 2013 at 4:59 pm
    ul li {
        li {
            padding-left: 20px;
    
            li {
                padding-left: 40px;
            }
        }
    }
    

    You should change ul I used for a more descriptive and unique identifier that contains the nested lists you want to indent so that this selector doesn’t hit all nested lists on your site.

    This will leave alone all li‘s on the first level, and pad any li‘s on the second level left 20px, and any on the third level left 40px. Repeat as often as you want (obviously add +20 to the padding number each time).

    # November 14, 2013 at 5:05 pm

    Let me get this straight, you want the list items to be 100% across but the labels indented as if they were list items?

    # November 14, 2013 at 5:13 pm

    Im confused as to what you want the end result to look like. Do you want the the label 100% and just the text indented via padding? The list 100% and the label indented via padding?

    __
    # November 14, 2013 at 5:34 pm

    Looking at your pen, I would think that you could simply do li ul{ padding-left: 1em; }. This way, each nested list would automatically be padded another em (or however much padding you choose), and you don’t need to worry about how deep the nesting is.

    However, I’m with @noahgelman on this one:

    each list item has a label that allows the user to select the list item …

    What do you mean by “select the list item”?

    … without having any padding or space to the left

    To the left of the list? I don’t understand how the label helps with this.

    The list would end up looking like a normal one

    Then why remove the default padding in the first place?

    yet each list item would be fully-selected

    Again, I don’t understand what you mean by a “selected” list item.

    # November 14, 2013 at 8:52 pm

    I think I left out one key piece of info here, I am going to have a hidden radio button in each label, controlled by the label. The label will show the on/off state through CSS. Hence, ‘selectable’ by the user.

    By “indenting” the label, I mean have it LOOK like it’s being padded like a normal list would be. But by using a label, I can control the radio-buttons that will be hidden and still have that padded left-hand side be selectable. It’d be more user-friendly… right?

    I didn’t think leaving out the radio buttons would be a huge deal in describing this, but I was definitely wrong! I’m going to be updating my pen to show this. I’ll post back once I’m done.

    # November 14, 2013 at 8:57 pm

    Once again, le Pen

    # November 15, 2013 at 5:29 pm

    You only want to have position: relative; in the outermost ul element and then make labels have pseudo elements that will the whole width of the parent element, but maintain the correct Y position by NOT defining and bottom or top value. Instead you can fix the Y position by using margin-top (atleast if you don’t define any padding to the label element itself).

    http://codepen.io/Merri/pen/uHkCj

    And there you go. Also, no SCSS really needed here, plain CSS would get the job done. Just a little bit of thinking outside the box :) Pun indented.

    Ed
    # November 16, 2013 at 11:00 am

    Sorry I didn’t understand your question. Looks like @Merri has achieved what you want.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".