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

What is the process for creating two columns with an input box beneath them?

I am facing a challenge with my code. I am struggling to create the desired design where there are two columns and below them an input box that will be displayed when a button is pressed. The design I am aiming for can be viewed here: enter image descripti ...

javascripthtmlcss

Mastering the alignment of Material-UI Menu items

When using the menu and menu item components of material-ui to create a select dropdown menu, I encountered an unusual issue where the dropdown menu always expands to the left side of the box, as shown in the image below: https://i.stack.imgur.com/ykRrp.jp ...

javascriptcssreactjsmaterial-ui

What is the reason for the disappearance of unordered list bullets when using padding: 0?

Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...

htmlcsshtml-lists

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

javascriptcsshtmlaudio

How can I set the input tag to reset back to 1 when a certain event occurs?

I am currently developing an HTML Snakes And Ladders game. On the settings screen, there is an input field where users can select the size of the board. Depending on their choice, they will be able to choose a maximum number of snakes and ladders. For exa ...

javascriptjqueryhtmlajax

Slowly revealing sticky navigation with slideDown animation using JQuery

Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...

javascriptjqueryhtmlcssless

What is the best method for placing an element above all other elements on a page, regardless of the layout or styles being used?

I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...

javascripthtmlcss

Add the output of an SQL query to an HTML table using Powershell

I have multiple databases from various SQL Servers. I am attempting to output SQL data to an HTML table using Powershell from these different databases/SQL Servers, and then send it via email. Although my current script is functioning, it generates multip ...

htmlsql-serverwindowspowershellautomation

What purpose does '& .MuiTextField-root' serve within the { makeStyles } function of Material UI?

I've been working on a React JS project using Material-UI and came across some interesting styling in my Form.js file. Here's a snippet of the code: import useStyles from './styles'; const classes = useStyles(); <form autoCapitali ...

cssreactjsmaterial-ui

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Is it possible to add a background color for the entire day, rather than just for the event itself? The code I've written currently only displays the events with a background color. <script> $(document).ready(function() { $.ajax({ u ...

cssjsoncodeigniterfullcalendar

Combining GET and POST requests for CSRF attack

Imagine a scenario where a web application includes a delete button. When the button is clicked, the application initiates a GET request that returns a POST form containing a token key. The user is then prompted with a Yes or No question to confirm deletio ...

htmlajaxcsrf

Sorting table data by Table SubHeadings using Jquery

Utilizing jQuery tablesorter in my UI, I encountered a challenge with a table that has 2 rows of headers - one main header and one subheader. My goal is to enable sorting on the subheader. How can I achieve this? Below is an example of my code structure: ...

jquerycsstablesorter

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

javascripthtmlangularjs

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Currently, I am attempting to showcase a large text in a format similar to a book. Each "page" has designated width and height, with content displayed over two columns: left and right. In this layout, page 1 is on the left, page 2 on the right, page 3 on t ...

javascriptjqueryhtmlcsswordpress

Solving issues with malfunctioning Angular Materials

I'm facing an issue with using angular materials in my angular application. No matter what I try, they just don't seem to work. After researching the problem online, I came across many similar cases where the solution was to "import the ...

htmlcssangulartypescript

JavaScript button for displaying and hiding all content in one click

I came across a tutorial on W3Schools that showed how to create collapsibles, and I thought it would be great to have buttons that could expand or collapse all at once. I've been trying to implement this feature using the code provided in the tutorial ...

javascripthtmlcss

How can we determine the total character count of a file that has been loaded into a textarea

I have a textarea where I can count the number of characters as I type. function calculateCharacters(obj){ document.getElementById('numberCount').innerHTML = obj.value.length; } <textarea name="textField" id="my_textarea" class="text_edit ...

javascripthtmlfile-uploadtext-editorcounting

Prevent the page from refreshing when a value is entered

I currently have a table embedded within an HTML form that serves multiple purposes. The first column in the table displays data retrieved from a web server, while the second column allows for modifying the values before submitting them back to the server. ...

javascripthtmlforms

A guide on grouping an entire CSS file under one class umbrella

Is there a way to encapsulate a large number of CSS declarations so they only apply when the parent has a specified class? div { color: #ffffff; } ... a { color: #000000; } Can it be structured like this, with a parent class containing all the CSS r ...

css

Stringified HTML code showcased

When working with Angular, I have encountered an issue where I am calling a function inside an .html file that returns a string containing a table element. My goal is to convert this string into HTML code. I attempted to use [innerHtml]: <p [innerHtml ...

htmlangulartypescript