CSS: Element with overflowing content fails to display even with the overflow set to visible

I'm trying to enhance a fixed toolbar by adding a dropdown menu, but the .toolbar-dropdown-menu component isn't displaying correctly, as shown in this screenshot (tested on Google Chrome 80.0):

https://i.stack.imgur.com/r5Cz0.png

Initially, it seemed like the .toolbar-dropdown-menu was behaving as if its parent had an overflow: hidden property set: When I increased the width of the parent .toolbar-btn, the .toolbar-dropdown-menu appeared within the parent's boundaries:

https://i.stack.imgur.com/dxSkm.png

However, even after explicitly setting all elements to overflow: visible, the .toolbar-dropdown-menu remains invisible, despite having its display set to block and visibility to visible.

So, why is the .toolbar-dropdown-menu element not visible, and how can I make it appear?

Below is a snippet of the code:

(This code is a simplified version of the toolbar, excluding some features for easier reference)

.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>

htmlcssoverflow

Answer №1

Your code snippet includes a dropdown element but with a white background color, making it invisible.

.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;

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Outputting PHP code as plain text with jQuery

My aim is to set up a preview HTML section where I am encountering a difficulty. I am struggling to display PHP code when retrieving and printing it from a textarea in the HTML. Here are my current codes, This is the HTML area where the textarea code will ...

javascriptphpjqueryhtml

What causes the accordion class to activate panels with varying names?

Why are some of my accordions triggering other accordions when they have different names? I've been working on resolving the issue where opening the second accordion in the second, third, or fourth panel closes the second accordion in the first panel ...

javascripthtmlcsstwitter-bootstrap-3

What are the steps for implementing this javascript code in an HTML document?

Recently, I've been seeking advice on how to address the issue of wanting a button click to automatically select the search box on my website. Suggestions have pointed towards using Javascript for this functionality, with the following code recommend ...

javascriptjqueryhtml

Validating SASS based on class name

Hi there, I am fairly new to SASS and do not consider myself a programming expert. I have ten aside elements that each need different background colors depending on their class name. Even after going through the SASS documentation, I am still unable to f ...

cssclassvariablessassmixins

I do not prefer output as my optimal choice

My preference is to create drill down buttons rather than focusing on output. Currently, the output appears as: The content of index.html is as follows: <html>　 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ ...

javascriptjqueryhtml

Restricting the number of times a user can click on

I am currently displaying a table with data obtained from a database query. The structure of the table is outlined below: <table id="dt-inventory-list" class="table table-responsive"> <thead> <tr> <th>Field ...

javascriptjqueryhtmldatatable

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Looking to update the HTML view using *ngIf, depending on a local variable that should change based on an observable variable from a shared service. HTML <div class="login-container" *ngIf="!isAuthenticated"> TypeScript code for the same componen ...

htmlangulartypescriptobservable

Tips for inserting an item into the parent window: Chrome-specific (compatible with all other browsers)

In my HTML file, I have an iFrame element like this: <iframe src="frame.html" width="2000" height="1000"></iframe> When trying to use jQuery's append function from within the iFrame to add a DIV to the parent window, it works fine in Fir ...

javascripthtmlgoogle-chromeiframewindow.parent

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

I need assistance with formatting an HTML text input box to only accept numeric values using JavaScript. Specifically, the input should allow digits, a minus sign, or a dot/comma (which will be converted to a dot). However, I want to prevent multiple conse ...

javascripthtmlinputuser-input

Use JQuery to constantly monitor for any changes in HTML Div

I am dealing with a browser-based chat application where separate div elements are generated for each chat conversation. An external module oversees the entire chat process, and I do not have access to its underlying code. It is important to note that the ...

jqueryhtmlcssdom

How can Swipe support help you slide a menu back in?

For implementing swipe support on my landing page carousel, I included jquery.mobile.custom.min.js. However, I am facing a challenge with adding swipe support to "close" the menu. Essentially, swiping left should have the same effect as clicking the butto ...

javascriptcsstwitter-bootstrapmenu

There seems to be an issue with the functionality of Angular Material on iOS devices

I recently developed a website using Angular and Angular Material. While the site functions properly on Windows and Android across all browsers, I encountered an issue with iOS devices running Safari. Some elements on the page do not display correctly on i ...

htmlcssiosangularangular-material

Creating a seamless vertical marquee of several images that continuously scroll from bottom to top without interruption can be achieved by following these

Currently, I am seeking to design a mobile-friendly HTML page that features a border with multiple color images moving smoothly from bottom to top on both the right and left sides of the mobile screen. The transition should be seamless without any gaps o ...

javascripthtmlcss

The modal dialog feature in HTML5 and CSS3 seems to be experiencing some issues when used in Opera browser

This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...

htmlcss

Tips on arranging the layout to prevent text from shifting alongside the image

Is there a way to prevent the positioning and size of an image from affecting the layout of my list? I'm new to coding and struggling with this issue in my first project. Any advice or guidance would be greatly appreciated. <!DOCTYPE html> <h ...

htmlimageformathtml-lists

What is the best way to create a JQuery function that fills a div based on the selected option from an HTML select

Check out this simple JavaScript function below. <html> <head> <script> $(document).ready(function() { $.get('getImage.php', function(data) { $('#imageSelector').html("<select>" + d ...

phpjqueryhtml

Developer server experiencing CSS issues in Django admin interface

Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this: This obviously isn't what I want, so I'm trying t ...

cssdjangodjango-admin

What causes the difference in output between passing p=3+3 using GET, which results in 3 3, and using POST, which results in

It's really quite puzzling - I've noticed that sending the same parameter through various methods yields different results. ...

phphtmlformspostget

What is the maximum width allowed for a WordPress site on mobile devices?

I have been tasked with addressing the responsiveness issues on mobile for this particular site. However, I am struggling to understand why the website is displaying horizontal scrolling on the landing page in a mobile view. Any assistance in resolving t ...

csswordpressresponsive-design

Ways in which elements can be toggled through jquery or javascript?

There are various words listed below: word1 word2 word3 ... Every word in the list is linked to 1 to 3 examples. When a user clicks on a word, certain actions should take place. I want the examples to display when the associated word (e.g., word1) is c ...

javascriptjqueryhtmlcss