A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keeping the lower-left corner fixed. The goal is to ensure that regardless of how many entries are added, the menu expands to fit them all without covering up the two buttons shown in image_1. Please review the CSS code provided below and advise on any modifications needed to meet these requirements.

CSS:

#select-site-layers-overlay{
    position: absolute;
    top:800px;
    right: 0px;
    padding: 15px;

    display: block;
    width: 305px;
    height: 200;

    border: 1px solid white;
    border-radius: .15rem;
    background-color: white;

    z-index: 2; 
    cursor: pointer; 
}

img_1:

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

img_2:

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

javascripthtmlcssangularjsangular

Answer №1

Instead of specifying the top distance for the menu to be at 800px from the top, you can specify the bottom as:

bottom: calc(100% - 800px);

In this case, the 100% refers to the height of the containing element, which is the body in your example.

Try this snippet below. Remove an item and notice how the list shrinks from the top, not the bottom. Add an item and see it expand upwards as needed.

body {
  background: cyan;
  height: 1000px;
}

#select-site-layers-overlay{
  position: absolute;
  bottom: calc(100% - 800px);
  right: 0px;
  padding: 15px;

  display: block;
  width: 305px;
  height: 200;

  border: 1px solid white;
  border-radius: .15rem;
  background-color: white;

  z-index: 2; 
  cursor: pointer;
  
  height: auto;
}
<ul id="select-site-layers-overlay">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

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

Extrude a face in Three.js along its respective normal vector

My goal is to extrude faces from a THREE.Geometry object, and my step-by-step approach involves: - Specifying the faces to be extruded - Extracting vertices on the outer edges - Creating a THREE.Shape with these vertices - Extruding the shape using THREE.E ...

javascriptvectorthree.jsgeometry

Using Default Parameters in the ngrx getWithQuery() Function

Curiosity strikes me on how to send the default data already present in getWithQuery(), just like this: @Injectable({providedIn: 'root'}) export class CompaniesDataService extends DefaultDataService<Company> { private readonly _URL: str ...

angularngrxangular-ngrx-data

Personalize with ng-class in AngularJS

I am facing an issue with two specific CSS classes, namely .caret .right and .caret .down. This is the code snippet causing the problem: <span> ng-class="{'caret right': checkboxer[mainParent]==true,'caret down': checkboxer[mainP ...

angularjsng-class

Error in setting cookies using Javascript document.cookie on iOS with cordova-plugin-ionic-webview

Backend-sent cookies are successfully stored, but the app itself cannot set cookies. When running the code snippet below: document.cookie = "notified=1; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"; console.log(document.cookie); An empty strin ...

javascriptangularjscordovacookiescordova-plugin-ionic-webview

Launch a new email window in Outlook from a server using C#

Currently, I am working on a feature where users can select multiple product links and have the option to email those links to someone. The functionality works perfectly fine on my local machine, but when deployed, it throws an exception as shown below: ...

javascriptc#emailoutlook

Having issues with ng-dblclick in Angular 1 when using Electron platform

Currently, I am working on a project that involves using electron with angular 1.6.4. Within my controller, I am dynamically generating li items and trying to bind a double click event to them. However, despite several attempts, I have not been successful ...

angularjselectronangularjs-ng-click

Javascript Google Maps API is not working properly when trying to load the Gmap via a Json

Trying to display a map using Gmaps and Jquery Ajax through JSON, but encountering difficulty in getting the map to appear on the page. The correct coordinates are being retrieved as confirmed by testing in the console. Puzzled by why it's not showin ...

javascriptjqueryajaxjson

Incorporating Earth Engine scripts into my AngularJS project to showcase NDVI data layer on a Google Map

Is there anyone who has successfully integrated the Earth Engine API into their front-end JavaScript code? I've been attempting to follow the demo on the earth-engine repository to add a layer to a map, but I haven't had any success. It seems lik ...

javascriptangularjsgoogle-authenticationgoogle-earth-engine

Node.js accepts JSON data sent via XMLHttpRequest

I have successfully implemented a post method using xmlhttprequest: var xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { console.log('Request finished. Pro ...

javascriptjsonnode.js

Update a variable in one component class using another component

My Hue class in a component contains a variable that I'm trying to modify: export default class Hue extends Component { state = { toggleState : false, toggleWhite : false } render(){...} ... } Within this component, I can chang ...

javascriptreactjsreact-native

Creating tests for subscription within the onInit() method in an Angular component

In my Spinner Component class, I have implemented a functionality to show/hide Progress Spinner using Angular Material. Below is the code snippet for the class: export class SpinnerComponent implements OnInit, OnDestroy { visible = true; private s ...

angularunit-testingkarma-jasmine

Having trouble linking multiple components using redux in react native

I'm having trouble figuring out how to connect two different components using the redux store. Here's what I've attempted: View.js import React from 'react'; import {View, Text, Button} from 'react-native'; import {Act ...

javascriptreact-nativereduxreact-reduxjsx

What is causing the premature termination of the for loop?

I am currently utilizing Node.js (with nodemon as the server) to upload an excel file, parse its contents, and then send each row to a MongoDB database. The total number of rows in the array is 476, however, the loop seems to stop at either 31 or 95 withou ...

javascriptnode.jsexpress

Experiment with parsing multiple outputs instead of repeatedly coding them as constants in Node.js

In my application, I am parsing multiple database data using cron and currently, I have it set up to create a const run for each data to find the dag_id and manually test the determineCron function one at a time. How can I create an array so that the "dete ...

javascriptnode.js

Guide to iterating through an array within an object in Vue.js

Can someone help me with looping through data fetched from an API using a GET request in Vue.js? This is the sample response obtained: "data": { "Orders": [ { "OrderID": 1, "Ordered_Products": { ...

javascriptapiloopsfor-loopvue.js

Switch a Laravel Collection or Array into a JavaScript Array

Is there a way to transfer data from Laravel to a JavaScript array? I have extracted the data from my AppServiceProvider and decoded it using json_decode, as shown below: View::composer('*', function($view) { $users = Users::all(); $view-& ...

javascriptjqueryarraysjsonlaravel

How to stop a component template in Angular from displaying both conditional statements simultaneously?

I want to prevent my component template from briefly displaying both conditional statements when the condition changes after the component has been initialized. My application receives a token, and depending on its validity, it shows the appropriate conte ...

javascriptangularangular-ng-ifangular8rxjs-subscriptions

Timing issue with the animation callback

I have been experimenting with creating a bounce effect on my custom scroller by utilizing the translate3d method for scrolling. I managed to successfully implement it, but now I am facing an issue where if you continuously scroll out of bounds (try double ...

javascriptcssanimation

The expression `Object.prototype.toString.call(currentFruit) === "[object Date]"` checks if the object referenced by `current

Hi, I'm just starting to learn JavaScript and I have a question about an if condition that I came across in my code. Can someone please explain what this specific if condition does? Object.prototype.toString.call(currentFruit) === "[object Date]& ...

javascripthtmljquerycssjquery-events

Validation of PO Box Addresses Using Regular Expressions

I'm having trouble getting the alert to work with my code. $(document).ready( function (){ $("[id*='txtAddress1S']").blur(function() { var pattern = new RegExp('\b[P|p]*(OST|ost)*\.*\s*[O|o|0]*(ffice|FFICE)*& ...

javascriptjqueryregex