Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Dynamic list padding

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #156092
    fooman
    Participant

    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.

    #156124
    noahgelman
    Participant

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

    #156125
    noahgelman
    Participant

    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?

    #156129
    __
    Participant

    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.

    #156151
    fooman
    Participant

    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.

    #156152
    fooman
    Participant
    #156228
    Merri
    Participant

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.