Restrict the width of an absolutely positioned element to the width of its

FIDDLE

I have a situation where I need to position an element absolutely, like a drop-down menu. However, when the window is resized and becomes narrow, there is not enough space for it.

My requirements are:

- The right edge of the dropdown should not go beyond its container. It should have a style like max-right: 0;

- Cross-browser compatibility is necessary

- Ideally, avoid using JavaScript. If impossible, keep the JavaScript simple and efficient.

Answer №1

If you want the child element to be of full width, you can set its width property to 100% while making the parent relatively positioned.

Check out this demonstration: http://jsfiddle.net/ABCyk/4/

li {
    ...
    position: relative;
}
.b {
    ...
    width: 100%;
}

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

Acquire JSON data structures using Node.js

I've been struggling to find a solution using just keywords - endless scrolling, yet all I can find are tutorials on getting data from JSON structure, rather than getting data structure from JSON. If you're unsure what my end goal is, here are s ...

The perspective property creates discrepancies in transform behavior between Firefox and Chrome, resulting in unexpected outcomes

While I found a similar question here, the solutions provided are outdated and do not help in my case. My issue revolves around a turning page effect that utilizes the CSS properties of transform-style:preserve-3d and perspective to create a 3D page. The ...

Click the button to access the provided link

I need to add a link for redirection to some buttons. Here is an example of the button code: <Tooltip title="Open New Ticket"> <IconButton aria-label="filter list"> <AddTwoToneIcon /> </IconButton> </T ...

"Unraveling the Mystery: In Javascript Vue, what is the secret behind the origin of the variable 'e' found in the function

Where does the mysterious variable e in onFileChange(e) come from? In the code snippet below, we see a variable e being used in onFileChange(e). However, this variable is not declared or imported anywhere in the code. How is it possible for this to be val ...

Using JQuery's appendTo method with a lengthy string of elements that includes a mix of single and double quotes: a step-by-step guide

My content script is fetching data from the server in the form of an array of objects. The structure looks something like this: [ { "lang": "English", "videos": [ { "embed": "<iframe width='100%' height='421px&apo ...

Loop through php array following ajax request

I have an AJAX function that makes a call to a PHP file which returns an array: <?php $testing = array("one","two","three", "four"); echo json_encode($testing); ?> The AJAX call looks like this: $.ajax({ url:"ajax_response.php", type:"P ...

Guide on using react-highlight-words to emphasize various keywords using different color schemes

I am currently working on implementing a search feature for my React project. At the moment, I am only required to enter a single keyword and search for it within the text. Once found, I need to extract and display the sentences containing this keyword sep ...

The issue of slides overlapping in a Javascript slideshow during auto play mode

I encountered an issue while creating an automatic slideshow with 4 slides. Upon autoplay for the first time, slide 1 overlaps slide 4, as well as slide 2 and 3. This only happens once after the site loads. However, on subsequent playthroughs or when using ...

Authentication in HTML5 beyond the internet connection

Seeking feedback on the most effective way to control access to an HTML5 application that is primarily used offline. This application utilizes IndexedDB, local, and session storage to securely store data for offline use, all served via HTTPS. The main go ...

Enhancing User Experience with React-Redux: Implementing Subcategory Visibility based on Main Category Selection

How can I implement action logic to show and hide elements based on user interaction with main categories? Currently, all subcategories are being displayed at once, but I want them to be shown only when a user clicks on the corresponding main category. For ...

Having trouble setting the select value with JavaScript in the Selenium web driver

I am working on a web page that includes a cascaded dropdown feature. The data in the second dropdown appears to be generated via ajax based on the selection made in the first dropdown. Here is the code for the first select option: <select class="form- ...

What is a straightforward method to showcase prototype nodes in PHP?

It's like a different flavor of UI, function DisplayUI($elements) { } This function will display the specified elements with name, id, and type in a flexible manner. UPDATE Create an array and get HTML as output. Has anyone experimented with thi ...

The behavior of JavaScript replace varies between Chrome and IE

This JavaScript code successfully replaces a string in Chrome: myUrl = someUrl.replace('%2C%7B%22itn%22%3A%5B%22%20guidelines%20%22%5D%7D', ''); However, when tested in Internet Explorer, it does not replace the string as expected. T ...

Using Vue: Save user information in the Vuex store prior to registration

Hello fellow members of the Stackoverflow Community, I am currently working on a Vue.js application that involves user registration. The registration process is divided into three components: Register 1 (email, password), Register 2 (personal information) ...

Keep the Bootstrap modal open while the JavaScript validation is running, and redirect the form action if the validation is successful

When trying to execute the submit event from a form, my code is supposed to keep the modal open if validation fails. However, for some reason, this functionality is not working as expected. var myForm = document.updteform; var condition = true; if ...

"Trouble with props: List items not showing up after refreshing the page

I am facing an issue with my "Event Selector" component where it is not displaying the list items as expected. The component is supposed to create a button for each item in the 'lists' passed via props. Strangely, the items do not show up upon re ...

Sending an array from the front-end to the back-end in Laravel with JavaScript

I am experiencing difficulty passing a objs array to a function in a Laravel controller using ajax. Unfortunately, I am not receiving any data after the post request. <script> var itemCount = 0; var objs=[]; $(document).read ...

What is the reason for substituting a reference to an object with its actual value?

I am utilizing node.js and express. Within the 'req.session', I have stored a complex object containing an array of objects. Additionally, I store a reference to one of the objects in the array. For example: var value = { name: "name" , ...

What is the best way to initiate the handling of newly inserted values in a Vuex store?

I am working with a Vuex store that stores entries: const store = createStore({ state() { return { entries: [ { id: 1, date-of-birth: "2020-10-15T14:48:00.000Z", name: "Tom", }, ...

PHP function json_encode() is causing an issue by returning an "Undefined" value

I'm working on a PHP project where I am creating an array and using json_encode() to convert it into JSON before retrieving it with $.getJSON. However, I am encountering an issue where it returns Undefined when trying to send all the data at once. Int ...