Is there a way to make my extended list bump up the rest of the elements on the page

I've created a section designed to function as a product filter in the future. Currently, when the parent option is clicked, the list expands to show the sub-options. However, I'm facing an issue where I need the parent option and styled span to move upwards so that the bottom of the sub-options align with where the parent option and span were originally positioned along the bottom of the line.

React :

import React, {Component} from "react";
import "./LeftMenuBar.js.css";

class LeftMenuBar extends Component {
    constructor (props) {
        super(props);
        this.state = {
        isHidden: true
        }
    }

    handleToggle(e){
        console.log(e);
        this.setState({
            isHidden: !this.state.isHidden
        })
    }

    render() {
        console.log(this.state.isHidden);
        return (
            <div className="LeftMenu">
                <div className="filterList">
                    <ul className="ul-style">
                        <li id="filterOption"><a onClick={(e) => this.handleToggle(e)} href="#"><span className="dot"/>Option 1</a>
                            <ul className={`list ${this.state.isHidden ? 'is-hidden' : ''}`}>
                                <li className="expanded">Sub</li>
                                <li className="expanded">Sub</li>
                                <li className="expanded">Sub</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div className="filterLine">
                </div>
            </div>
        );
    }
}

export default LeftMenuBar;

Here's the CSS styling:

.LeftMenu {
    position: absolute;
    left: 0;
    width: 200px;
    height: 400px;
    z-index: 3;
}

.filterLine {
    position: absolute;
    width: 1px;
    left: 75px;
    top: 180px;
    background-color: black;
    height: 100%;
}

.LeftMenu.logo {
    width: 50px;
    height: 50px;
}

.filterList {
    position: absolute;
    top: 200px;
    left: 75px;
}

#filterOption {
    position: relative;
    list-style: none;
    display: inline-block;
    left: 0;
}

#filterOption a {
    display: inline-block;
    color: black;
    padding-top: 0;
    margin-top: 0;
}

.dot {
    z-index: 3;
    position: relative;
    border: 5px solid #e9e9e9;
    height: 20px;
    width: 20px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    left: -20px;
}

.ul-style {
    position: absolute;
    padding: 0;
    list-style-type: none;
    top: 360px;
    width: 95px;
}

.list.is-hidden {
    display: none;
}

li a {
    color: black;
}

.expanded {
    display: block;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Answer №1

I am looking to adjust the positioning of the parent option and styled span, pushing them upwards so that the bottom of the sub-options align with their original positions.

To achieve this effect, try replacing your CSS with the following code snippet utilizing flexbox:

.LeftMenu {
    width: 200px;
    height: 400px;
}
.filterList {
    display: flex;
    align-items: flex-end;
    height: 100%;
}
.is-hidden {
    display: none;
}

For a live demonstration, check out this sandbox link: https://codesandbox.io/s/xr47k1wqlq

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

Is it possible to execute a PHP script within a .css file and ensure it functions correctly?

Recently, I've been making some changes to the .css file in order to get my PHP codes to work. However, when I insert them as usual, they appear as regular text. I'm curious to find out if it's possible to execute a PHP file within a .css fi ...

Tips on incorporating a child component into a parent component using React and TypeScript

I am trying to conditionally render a child component within a parent component using React and TypeScript. Here is the code I have: const Parent = ({ prop1, prop2 }: { prop1: Prop1, prop2: Prop2; }) => { const isChecked = true; return ( ...

What is the best way to merge two JSON arrays using Axios in a React project?

I am currently working on getting data using axios React from Laravel, but I am facing some challenges in combining two arrays by their respective Ids. In my case, I am trying to retrieve product data and images from the Laravel Controller. Can anyone prov ...

How can I position my navbar above my background image using Bootstrap?

I am a newcomer to using bootstrap and I am attempting to create the following design: https://i.sstatic.net/EV9A1.png In the design, the navbar is situated on top of the background image. However, with my current setup, this is what I have: <!DOCTYPE ...

Is it possible for me to implement a filter into the array based on a selection made on the onChange

I am having difficulty updating an array to filter a specific column. My goal is to incorporate multiple select/TextFields once I have one working successfully. However, I am struggling with where and how to implement this in order to retrieve a value for ...

Creating a React Typescript interface with nested interfaces for props

My issue is with a functional component that is supposed to receive props from another functional component. The problem lies in the fact that an interface within the receiving component always returns 'undefined' when I log it in the console. De ...

Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend. Similar to how it works when hovering over a single piece of the donut chart. var chart = new Highcharts.Chart ...

Customize the form using a custom component in react-hook-form: setting a default value

I have been learning ReactJS + TypeScript for 3 months now. Recently, I have a question about using react-hook-form (v7) to edit a form. I want to integrate my custom component into the form and I managed to do it on my own! Here is a snippet of my form p ...

Is there a way to adjust the width of a table cell in Material UI using React?

I encountered a problem where I am attempting to adjust the width of a table cell, specifically in Typescript. However, I am only able to choose between medium and small sizes for TableCellProps. Is there a workaround for this issue? I am looking to expand ...

Stop useEffect from triggering during the first render

I'm working on implementing a debounce functionality for a custom input, but I'm facing an issue where the useEffect hook is triggered during the initial render. import { useDebouncedCallback } from "use-debounce"; interface myInputProps { ge ...

Adding "localhost" to fetch request URL

Whenever I use an https URL, fetch seems to be tacking on localhost:3000 at the beginning of the URL. The resulting URL it's trying to call looks like this: http://localhost:3000/%E2%80%8Bhttps://www. Does anyone have any insight into why this might b ...

Typescript threw an error stating "Cannot access properties of an undefined object" in the React-Redux-axios

As a backend developer, I am not very familiar with frontend development. However, for my solo project, I am attempting to create some frontend functionalities including user login right after setting the password. Below is the code snippet from UserSlice. ...

How to set the current active class using Link and router in Next.js

I'm trying to add an active class to the current page, but I seem to be missing something. <Link href={`/projects/${project.id}`}> <a className={`${ router.pathname === `/projects/${projects.id}` ? "active" ...

Is it time to launch your React TypeScript application on AWS S3?

I need help transitioning my deployment from AWS S3 using JavaScript to TypeScript. What specific code should I incorporate in TypeScript to facilitate this transition? 1) I have downloaded files with a .ts extension. https://i.sstatic.net/He49G.jpg 2) H ...

Tips for making modal body text reactive to different screen sizes

The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive Modal Image https://i.sstatic.net/UJEG8.png HTML Code Snippet <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot ...

Oops! Unable to extract the 'devices' property from the unspecified value because it is not defined

I wrote a function in my page.txs file to fetch a JSON response and incorporate it into a Next 13 app page. const getDevices = async () => { try { const res = await fetch('/api/getdevice',{ cache: 'no-store' }) ...

React-Enabled Chat Engine API for Seamless Customer Support

Chat Engine io is the API I am currently working with. It allows you to integrate chat rooms into your application. I have developed an application with a support chat feature where the admin can communicate with users by entering their email. Despite mul ...

The mouse pointer adjusts according to the event

I am working on an ajax request and I have implemented a feature where the cursor changes appearance. document.body.style.cursor = "wait"; This immediately shows the cursor as a spinning circle when the request starts. At the end of the request, I ch ...

What is the proper way to utilize the onChange attribute within a dragger tag?

Initially, I utilized the <input type="file" .../> function for file upload. However, I was interested in exploring the drag and drop feature, so I decided to incorporate ant design into my project. While I successfully used onChange to setState with ...

Tips for integrating Firebase with a React Native application:

I am a beginner in react native and currently working on a test app. I have followed the firebase documentation and added the necessary dependencies along with the google-services.json file. Now, I am facing an issue where I want to retrieve data from my r ...