CSS: Overflowing element is not displayed despite overflow: visible

Question

I'd like to add a dropdown menu to a fixed toolbar, but the .toolbar-dropdown-menu element is not displayed as shown in the screenshot below (tested with Google Chrome 80.0):

My first impression was that the behavior of .toolbar-dropdown-menu is as if its parent was set to overflow: hidden: If I make the parent .toolbar-btn wider, the .toolbar-dropdown-menu is shown within the boundaries of its parent:

However, even if I explicitly set all elements to overflow: visible, the .toolbar-dropdown-menu remains invisible, even if its display is set to block and its visibility to visible.

Question: Why is the .toolbar-dropdown-menu element invisible and how do I get it to show up?

Here's a code snippet:

(This is a reduced version of the toolbar. It can usually be assigned to varying positions and expanded to show labels, but I excluded those features to minimize the code you have to go through)

.floating-toolbar {
  position: fixed;
  z-index: 1031;
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

.floating-toolbar.left {
  left: 0;
}

.floating-toolbar.left .toolbar-btn .toolbar-icon {
  right: 0.5rem;
}

.floating-toolbar.left .toolbar-dropdown > .toolbar-dropdown-menu {
  position: absolute;
  left: 21rem;
  top: 0;
}

.floating-toolbar.left.minimized {
  left: -18.5rem;
}

.floating-toolbar .toolbar-btn {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding: 0.5rem;
  font-size: 1rem;
  width: 20rem;
  cursor: pointer;
}

.floating-toolbar .toolbar-btn:last-child {
  border-bottom: none;
}

.floating-toolbar .toolbar-btn.active {
  color: #fff;
}

.floating-toolbar .toolbar-btn .toolbar-icon {
  position: absolute;
  text-align: center;
  width: 1.5rem;
  top: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<div id="studio-toolbar" class="floating-toolbar top left minimized">

    <div class="toolbar-btn maximize-button">
        <div class="toolbar-label">&nbsp;</div>
        <div class="toolbar-icon"><i class="fas fa-bars"></i></div>
    </div>
    
    <div class="toolbar-btn active">
        <div class="toolbar-label">Edit Text</div>
        <div class="toolbar-icon"><i class="fas fa-font"></i></div>
    </div>
    <div class="toolbar-btn">
        <div class="toolbar-label">Element Properties</div>
        <div class="toolbar-icon"><i class="fas fa-edit"></i></div>
    </div>
    
    <div class="toolbar-btn toolbar-dropdown">
        <div class="toolbar-label">Layout Structure</div>
        <div class="toolbar-icon"><i class="fas fa-grip-horizontal"></i></div>
        
        <div class="toolbar-dropdown-menu">
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Offset</div>
                <div class="toolbar-icon"><i class="fas fa-long-arrow-alt-right"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Width</div>
                <div class="toolbar-icon"><i class="fas fa-arrows-alt-h"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Add Row</div>
                <div class="toolbar-icon"><i class="fas fa-plus-square"></i></div>
            </div>
        </div>
        
    </div>
</div>

In your code example I see dropdown. Just background is white so it is not visible. — Jax-p
– Jax-p, Commented Mar 27, 2020 at 11:08
Oh my god I can't believe I didn't see this. Classic example of overcomplicated thinking... Thanks a ton! Please add this as an answer so I can mark it as the accepted answer. — StoryTeller
– StoryTeller, Commented Mar 27, 2020 at 11:12

Jax-p · Accepted Answer · 2020-03-27 11:24:49Z

In your code example I see dropdown. Just background-color is white so it is not visible.

.floating-toolbar {
  position: fixed;
  z-index: 1031;
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

.floating-toolbar.left {
  left: 0;
}

.floating-toolbar.left .toolbar-btn .toolbar-icon {
  right: 0.5rem;
}

.floating-toolbar.left .toolbar-dropdown > .toolbar-dropdown-menu {
  position: absolute;
  left: 21rem;
  top: 0;
  background-color: #333;
}

.floating-toolbar.left.minimized {
  left: -18.5rem;
}

.floating-toolbar .toolbar-btn {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding: 0.5rem;
  font-size: 1rem;
  width: 20rem;
  cursor: pointer;
}

.floating-toolbar .toolbar-btn:last-child {
  border-bottom: none;
}

.floating-toolbar .toolbar-btn.active {
  color: #fff;
}

.floating-toolbar .toolbar-btn .toolbar-icon {
  position: absolute;
  text-align: center;
  width: 1.5rem;
  top: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<div id="studio-toolbar" class="floating-toolbar top left minimized">

    <div class="toolbar-btn maximize-button">
        <div class="toolbar-label">&nbsp;</div>
        <div class="toolbar-icon"><i class="fas fa-bars"></i></div>
    </div>
    
    <div class="toolbar-btn active">
        <div class="toolbar-label">Edit Text</div>
        <div class="toolbar-icon"><i class="fas fa-font"></i></div>
    </div>
    <div class="toolbar-btn">
        <div class="toolbar-label">Element Properties</div>
        <div class="toolbar-icon"><i class="fas fa-edit"></i></div>
    </div>
    
    <div class="toolbar-btn toolbar-dropdown">
        <div class="toolbar-label">Layout Structure</div>
        <div class="toolbar-icon"><i class="fas fa-grip-horizontal"></i></div>
        
        <div class="toolbar-dropdown-menu">
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Offset</div>
                <div class="toolbar-icon"><i class="fas fa-long-arrow-alt-right"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Width</div>
                <div class="toolbar-icon"><i class="fas fa-arrows-alt-h"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Add Row</div>
                <div class="toolbar-icon"><i class="fas fa-plus-square"></i></div>
            </div>
        </div>
        
    </div>
</div>

Collectives™ on Stack Overflow

CSS: Overflowing element is not displayed despite overflow: visible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related