Arpeggio

Arpeggio

Hiding last divider on each row of buttons

I have the following HTML structure, which is dynamically rendered from a Sightly (HTL) page in a new AEM component we’re building, so I can’t make any modifications to the HTML. Unlike another post on Stack Overflow, I have to keep those .flex-divider divs and can’t convert to ul li tags, like in a similar post.

Content editors can author in one to four buttons. I’m using simple CSS to hide the last divider, but if there were a way to hide the last divider on each row, that might be a better approach.

When the window width is too narrow to display all buttons in the same row, the last button will wrap underneath to the next line. When the window width is reduced even more, then two buttons might wrap to the next row. When that happens, there’s a trailing divider on the first row that needs to be hidden. How can I target the last divider on the first row, or on both rows, so that it can be hidden?

Here’s what I have so far for my HTML:

<div class="container">
  <div class="multi-cta-group">
    <a class="btn btn-primary">
      Button number one
    </a>
    <div class="flex-divider"></div>
    <a class="btn btn-primary">
      Button number two
    </a>
    <div class="flex-divider"></div>
    <a class="btn btn-primary">
      CTA button number three
    </a>
    <div class="flex-divider"></div>
    <a class="btn btn-primary">
      Button number four
    </a>
    <div class="flex-divider"></div>
  </div>
</div>

CSS

.container {
  justify-content: center;
  margin: 16px auto;
  padding: 16px 0;
}
.multi-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.multi-cta-group a {
  color: #fff;
  justify-content: center;
}

.flex-divider {
  width: 1px;
  background-color: gray;
  height: auto;
}

.flex-divider:last-child {
  display: none;
}

.bg-gray-400 {
  background-color: #bdc2c7;
}

@media (max-width: 768px) {
  .multi-cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .multi-cta-group .btn {
    justify-content: center;
    width: auto;
  }
}

Marked As Solved

Eiji

Eiji

I would rather use display: none on flex-divider and create dividers using CSS. This is because we don’t have to worry that said divider may be wrapped. Then I would add a negative margin-right property value on multi-cta-group element. This way a border (instead of element) would be “hidden” (overflow). While this sounds very tricky it’s hard to do similar thing without modifying the HTML code.

Popular Frontend topics Top

PragmaticBookshelf
It’s hard to have a Rails application without integrating some client-side logic. But client-side coding tools, and the Rails tools for i...
New
PragmaticBookshelf
The Elm language offers safer applications and fewer errors that come with functional programming, while being type-safe and easy to use....
New
CommunityNews
Microsoft’s Introduction to JavaScript video series will equip users with the basic skills to start building apps with the popular progra...
New
AstonJ
Yew looks really interesting!! What is Yew? Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssem...
New
First poster: bot
Dream is an easy-to-use, boilerplate-free Web framework, whose entire API fits on this page! It supports TLS, WebSockets, and GraphQL. H...
New
First poster: AstonJ
A new Svelte blog post/announcement has been posted! Get the full details here: What's new in Svelte: May 2021
New
mrmurphy
The situation Hi there! I’m working on a live view app right now that encrypts sensitive user content (text and images) using the browser...
New
Ayushk
Hello, This is pretty basic. I was trying to explore the front-end development as I was not from a tech background. But, very much inter...
New
jubocade
What is the best course of front end (live webinars or recorded)? So I already have basic understanding of HTML CSS JS and React but I wa...
New
mtmattei
A few months ago, Uno Platform unveiled Uno Platform for Figma plugin, a plugin created to turn your high-fidelity Figma design into XAML...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1017 16924 373
New
AstonJ
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
New
AstonJ
What chair do you have while working… and why? Is there a ‘best’ type of chair or working position for developers?
New
brentjanderson
Bought the Moonlander mechanical keyboard. Cherry Brown MX switches. Arms and wrists have been hurting enough that it’s time I did someth...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
PragmaticBookshelf
Author Spotlight James Stanier @jstanier James Stanier, author of Effective Remote Work , discusses how to rethink the office as we e...
New
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
PragmaticBookshelf
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New
AstonJ
This is a very quick guide, you just need to: Download LM Studio: https://lmstudio.ai/ Click on search Type DeepSeek, then select the o...
New