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

davearonson
I’m unit-testing some JS, with Jasmine, and I’d like to check our coverage. We’re not using any front-end framework, nor much JS, so no ...
New
Sally_san
So I’ve got a client that wants to build a site like this: Specifically 3 things from the website: The fullscreen sections that chang...
New
beberardinelli
Hi! I just started coding a few months ago and I am trying to get all the help I can get. My friend showed me this debugging tool called...
New
david-j-m
Hi, have a svelte spa gallery site - repl here. Have a couple of category buttons - Oil on Canvas and WaterColor… Sidebar contains all im...
New
AlessandroDsgroup
Hi to everyone, we are experiencing a 401 error related to the connection of the websocket (in reference to our web app); we are unable ...
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
harwind
I’m currently working on a front-end development project and I’m facing an issue with aligning items using CSS Flexbox. I want to horizon...
New
sona11
I’m currently working on a JavaScript project that involves converting user-supplied text to numbers. Dealing with different areas and th...
/js
New
Fl4m3Ph03n1x
Background I have Phoenix umbrella application. When inside said application, I can run it without issues if MIX_ENV=prod. However, if I ...
New

Other popular topics Top

axelson
I’ve been really enjoying obsidian.md: It is very snappy (even though it is based on Electron). I love that it is all local by defaul...
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
New
New
AstonJ
Thanks to @foxtrottwist’s and @Tomas’s posts in this thread: Poll: Which code editor do you use? I bought Onivim! :nerd_face: https://on...
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
AstonJ
Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
New
wmnnd
Here’s the story how one of the world’s first production deployments of LiveView came to be - and how trying to improve it almost caused ...
New
gagan7995
API 4 Path: /user/following/ Method: GET Description: Returns the list of all names of people whom the user follows Response [ { ...
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
New