Achieving notification bubble inside flexbox?

Question

Goal

Attempt

Problem

I'm looking for the best practice to achieve what is shown in the above image. Not sure if I'm overdoing it with Flexbox, but everything in my layout is either a flex container (parent or nested) at every level of the hierarchy.

Do I need absolute positioning for this? How does it work with responsive changes?

HTML Snippet

      <div className={styles['admin-panel']} id={styles['management-btn-container']}>
        <button className={`${buttons['btn-default']} ${buttons['btn-admin-1']}`}> Manage Posts</button>
        <div className={`${buttons['test']}`}>
          <button className={`${buttons['btn-default']}`}>✍ Manage Comments</button>
          <div className={`${buttons['notification-bubble']}`}>1</div>
        </div>
        <button className={`${buttons['btn-default']} ${buttons['btn-admin-1']}`}>⏰ Manage Schedules</button>
      </div>

Button CSS

.btn-default {
    border: 2px solid black;
    background-color: transparent;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Lucida Grande';
    border: 1px solid grey;
    border-radius: 2px;
    text-transform: uppercase;
}

.btn-admin-1 {
    min-width: 23.33%;
    max-width: 33.33%;
}

.btn-admin-1:hover,
.btn-admin-2:hover {
    border: 1px solid white;
}

.test {
}

.notification-bubble {
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
    height: 20px;
    width: 20px;
    position: absolute;
    margin-top: -60px;
    margin-left: 230px;
}

Hi:) It's not clear what the problem is between Attempt and Problem. Attempt looks okay, when/how do you get the Problem? — Azu, Dec 30 '21 at 17:57
The attempt looks ok, but I feel it's hacked together. This seems to be because the middle child div breaks the flex flow since I've injected an intermediate div in there. I want the collapsing to all happen together. — Ryan, Dec 30 '21 at 18:03
Could you add the same HTML code rendered by the browser? Copy it from Developers Tools. — Azu, Dec 30 '21 at 18:12

score 2 · Accepted Answer · answered Dec 30 '21 at 18:16

The problem lies in the fact you are positioning from the left of the button and if the width of the button changes your position will be wrong. So it would never work in a responsive layout. The trick is to position relative to the right of the button:

Position:absolute would have no impact on flex layout.

In .btn-default add position:relative;

Remove your .notification-bubble and replace it with the following:

.notification-bubble:after {
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
    height: 20px;
    width: 20px;
    position: absolute;
    right:20px;
    top:-10px;
    content:"3";
    text-align:center;
    position:absolute;
}

Your HTML is

<div class="btn-default notification-bubble">
    Manage comment
</div>

Fiddle with the top:-10px and right:20px until you get your desired position

Here is a working example:

.btn-default {
    border: 2px solid black;
    background-color: transparent;
    color: black;
    width:50vw;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Lucida Grande';
    border: 1px solid grey;
    border-radius: 2px;
    text-transform: uppercase;
    margin-top:100px;
    position:relative;
    margin:5px;
}

.btn-admin-1 {
    min-width: 23.33%;
    max-width: 33.33%;
}

.btn-admin-1:hover,
.btn-admin-2:hover {
    border: 1px solid white;
}

.test {
}


.notification-bubble:after {
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
    height: 20px;
    width: 20px;
    position: absolute;
    right:20px;
    top:-10px;
    content:"3";
    position:absolute;
    text-align:center;
}

.flexlayout {
display:flex;
flex-direction:row;

}

<div class="flexlayout">
<div class="btn-default">
Button 1
</div>

<div class="btn-default notification-bubble">
Button 2
</div>

<div class="btn-default">
Button 3
</div>
</div>

Your next problem is how to change content:"3" in .notification-bubble:after See Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Thanks a lot John! This is working almost perfectly for me. – Ryan Dec 30 '21 at 18:48 — Ryan, Dec 30 '21 at 18:48