Streaming live at 10am (PST)

How to remove borders on the end items of a list dynamically?


#1

Hi guys,

At the bottom of Kotaku.com there is a list of tabs in their 'popular tags' section. As you resize the window this list flows as you would expect. The dividing lines are created with a 1px border on the right side. The end boxes don't have this divider though and this divider will be on or off depending on whether the list item is on the end or not.

How would I go about doing this? I assume this is some custom code?

Thanks
Ben


Here is my public share link: LINK
(how to access public share link)


#2

Hi @Aerodyll this article may help with the custom css you're looking for

https://www.w3schools.com/cssref/sel_last-child.asp


#3

Thanks. I didn't realise there were so many selectors.

I have been looking into this and I wonder do any of those selectors relate to the list item in the way I specified above? In a table I could use the last child of the table row to get this effect but in the box model i don't think there is a specific way to identify the last list item in a row when the list flows this way.

(Also I do not understand how to input the selector in the Webflow UI. I've found where its meant to go but am not sure how to actually input it in there)

Thanks
Ben


#4

I found the solution to this problem. A bit of creative googling and I found the method on StackExchange.

Use flexbox and set it to expand so the right hand margin is always butted up against the right hand side of its container then set the parent to -1 on the right margin so it covers up that border. Set overflow on the parent to hidden obviously.


#5

Ok the plot has most certainly thickened!

After fighting with this again I put a post up on stackoverflow and a helpful person pointed out that for some reason adding an link to an inline list item made the ends of the rows lose their borders. Even they had no idea why this jiggery pokery happened but it did. Though it didn't work in Firefox only chrome.

I was able to recreate this in Webflow pretty quickly. Unfortunately it didn't work for me as my in-line list items now flowed great but they would break on spaces bwteen words in list items themselves.

The solution was to set the link to inline-block and set the list item to inline. While I understand the rules for inline content are very different to other display types I do not fully get why the border is not being rendered for the end elements.

This is the final solution, it works exactly as I needed it to though I would be more satisfied if I understood why it does this.


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.