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.

Where Next?

Popular Frontend topics Top

pillaiindu
Some days ago I came across a video teaching the internals of git. It had some nice diagrams and animations. The diagrams looked like han...
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
david-j-m
Hi I have a gallery site which displays paintings according to selected category (oils, water-color, etc.) “on:click” event. When this e...
/js
New
sona11
I was working on a project that required me to update data in a SQL database. I initiated a transaction and modified the data with a seri...
New
Fl4m3Ph03n1x
Background I have created a fresh Phoenix app using mix phx.new.web web_interface --no-dashboard --no-ecto --no-gettext --no-mailer insid...
New
WiseDan
hi everybody , am new in gsap.js so i wanted load content in my home page when user scrolling , but since am reading the documentation ...
New
PickyBiker
I have done small amounts of programming for IOS and for Android, but now I need to create something that works with both. What are the ...
New
avipal
I have an application where it is three layer 1st layer- A legacy core routines 2nd layer- built on top of the Core routine using Dotno...
New
Clintonsuck
Hello, I am new and trying to build my first app. So far, everything was going okay, but now I’m stuck and don’t know how to proceed. May...
New
hosseinkhosromanesh
hello , i should code a cluster like image bellow we have no challenge in coding backend but in front need some clue to do this its a dy...
/js
New

Other popular topics Top

wolf4earth
@AstonJ prompted me to open this topic after I mentioned in the lockdown thread how I started to do a lot more for my fitness. https://f...
New
New
AstonJ
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
AstonJ
Inspired by this post from @Carter, which languages, frameworks or other tech or tools do you think is killing it right now? :upside_down...
New
Exadra37
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
New
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New
PragmaticBookshelf
Fight complexity and reclaim the original spirit of agility by learning to simplify how you develop software. The result: a more humane a...
New