The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet:

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px; // I want it to be 100% of the content
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  right:0;
}

You can view the full code on jsfiddle: https://jsfiddle.net/kg0tjLr9/1/

htmlcss

Answer №1

I recommend using max-content instead of specifying pixels like this:

$(document).ready(function() {
  $('.dropbtn').click(function() {
    //$('.dropdown-content').css('display','block');
    $('.dropdown-content').toggle();
    $('#overlay').toggle();
  })
   $('#overlay').click(function(){
    $('#overlay').css('display','none');
    $('.dropdown-content').toggle();
   });
});
#main_content{
  z-index:-1;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float:right;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: max-content;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  right:0;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2;
  cursor: pointer; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque veritatis blanditiis porro asperiores quas quasi minima. Laudantium consequatur obcaecati dignissimos ducimus aliquam culpa, libero animi odit! Laboriosam ipsam rem, quas.
</div>


<div class="dropdown">
  <div id="overlay"></div>
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="">Lorem ipsum dolor sit amet, consectetur</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

max-content is not compatible with Internet Explorer ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-content)

If you need IE compatibility, use 

width: auto; white-space: nowrap;
instead of max-content like this:

$(document).ready(function() {
  $('.dropbtn').click(function() {
    //$('.dropdown-content').css('display','block');
    $('.dropdown-content').toggle();
    $('#overlay').toggle();
  })
   $('#overlay').click(function(){
    $('#overlay').css('display','none');
    $('.dropdown-content').toggle();
   });
});
#main_content{
  z-index:-1;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float:right;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: auto;
  white-space: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  right:0;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2;
  cursor: pointer; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque veritatis blanditiis porro asperiores quas quasi minima. Laudantium consequatur obcaecati dignissimos ducimus aliquam culpa, libero animi odit! Laboriosam ipsam rem, quas.
</div>


<div class="dropdown">
  <div id="overlay"></div>
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="">Lorem ipsum dolor sit amet, consectetur</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </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

The overlay background is not covering the entire height of the container

The CSS includes a .wrapper with the style min-height: calc(50% - 30px), along with an overlay blur div to cover the entire height of the .wrapper element. Here's a link to a Codepen example showcasing this setup: https://codepen.io/palaniichukdmytro/ ...

htmlcss

Strategies for selecting glyphs in SVG fonts based on their Unicode properties

My goal is to extract specific characters from SVG fonts created for music engraving. Music fonts typically include a large collection of characters (> 3500), but I only require a small subset of them for caching glyphs in compressed form to ensure quic ...

javascriptjquerycsssvgunicode

Navigating the Drift

I am a beginner in HTML/CSS and need some assistance. Here is the layout I am working with: <style> #main {background-color: red; width: 30%;} #right_al{float: right;} #to_scroll{overflow: scroll;} </style> <div id='main'> ...

htmlcss

Continuously spinning loading icon appears when submission button is triggered

We are currently experiencing some issues with our mobile forms. Our users utilize a mobile form to submit contact requests, but the problem arises when they hit 'submit' - the loading icon continues to spin even after the form has been successf ...

javascriptjqueryhtmlajaxforms

Multiple occurrences of IP addresses in MySQL

Looking for assistance. I have categories and comments stored with IP addresses. I need to validate all categories for repeated IPs. For each user who uses the same IP twice, add a CSS class (red) to their name. If they use it three times, add another CSS ...

phpmysqlcssip

Tips for creating a MaterialUI list that wraps to the next line?

import React from 'react'; import { List, ListItem, } from '@material-ui/core'; import { makeStyles, createStyles, } from '@material-ui/core/styles'; import clsx from 'clsx'; import VideoCard from './VideoCa ...

cssreactjsmaterial-ui

"Sparkling div animation with the use of jQuery's .hover() function

<script> $(document).ready(function () { $("#logo_").hide(); $("#logo_learn").hide(); }) function sl() { $("#logo_learn").slideToggle(500); $("#logo_").fadeIn(); } function hl() { $("#logo_learn").slideToggle(500); $("#logo_ ...

javascriptjqueryhtml

When the mouse leaves the area, I would like the iframe within the div to be refreshed

When you hover over the button on the right, a slide panel appears with an iframe. Each time this page loads, it has a different background. I want a new background to load every time there is a new hover, requiring a refresh of the div. How can I achieve ...

jqueryhtmlcssiframe

What is the best way to show and hide text by toggling a link instead of a button?

I need help with toggling between two different texts when a link is clicked. I know how to achieve this with a button in JQuery, but I'm not sure how to do it with a link. <h1>Queries and Responses</h1> <p>Query: What is the larges ...

javascriptjqueryhtml

Can you explain the distinction between "javascript:;" and "javascript:" when used in the href attribute?

Can you explain the distinction between using "javascript:;" and just "javascript:" within an anchor tag's href attribute? ...

javascripthtml

Utilize external cascading style sheets (CSS) to style XML data loaded into Flash

Trying to incorporate formatted xml into a flash game has been quite challenging for me. Despite my efforts, the css styling doesn't seem to be applied properly. Below is the content of my stylesheet woorden.css: .f {color:red;} This is the str ...

cssxmlactionscript-3flash-cs5

Is the "footer" div automatically nested within the "main" div if they are not nested in the code?

Within my code structure, I currently have the following: <html> <head> ... </head> <body> <div id="body"> <div id="main"> ... </div> <div id="foot ...

htmlcss

Scroll to make the div slide in from the bottom

I'm trying to achieve a similar effect like the one shown in this website (you need to scroll down a bit to see the divs sliding in). Although I'm not very proficient in JS, I was able to create a code that makes the divs fade in from 0 opacity ...

javascriptjqueryhtmlcss

"Enhancing webpage dynamics with jQuery: Exploring the

I have a beginner's question regarding my jQuery script. The script I have makes the menu move slightly to the right. My first issue is that the <a> tag seems to be receiving bottom padding, and I am unsure why or how this is happening. My secon ...

jqueryhtmlcssmenu

`The font appears extremely thin when viewed on Safari and iOS devices.`

I'm struggling to resolve the issue with super-thin fonts on Safari/iOS despite trying all recommended solutions. Here is the comparison: https://i.stack.imgur.com/5DVHz.png The _document.js file: import Document, { Html, Head, Main, NextScript } fr ...

cssiosmaterial-uinext.jswebfonts

Focused input filter in a tabular header style

I've been working on customizing the Tabulator header filter to have a more "flattened" style, as requested by my boss. In my CSS, I added the code ...input:focus{border:1px solid #1bb394} to change the input border to 1px green. While this change tak ...

csstabulator

Basic media query does not affect div resizing or font changes in Chrome or Internet Explorer

I am facing an issue with a simple media query that is not working as expected in Chrome or IE, but strangely it works fine in FF. I have tried various formulations of the media query without success. Any assistance would be greatly appreciated. Below is ...

htmlcss

What is the best way to apply background color to match the height of the parent element?

When creating cards, I encounter a challenging issue. I am struggling to fill the background-color of the entire box content as I am new to HTML and CSS and unsure how to achieve this. Below are my codes. .box-container1 { display: flex; justify-con ...

htmlcssbootstrap-4

Left align the CSS menu text next to the menu image

Currently, I have a basic CSS menu that includes background images aligned to the left. My goal is to have the text float to the left of each image as well. <div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "vie ...

htmlcssmenucss-floatmenubar

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...

htmlcssasp.nettelerik