Create a layered panel underneath a button that covers a separate element

Question

Create a layered panel underneath a button that covers a separate element

I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, which should be simple to implement.

I have already written some code for this project, which can be found here: https://codesandbox.io/s/fervent-mclaren-3mrtyj?file=/src/App.js. However, currently, the panel is not appearing under "Button2" as intended and does not overlay the editor.

If anyone has suggestions on how to adjust the CSS to achieve the desired layout, I would greatly appreciate the assistance.

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Stack horizontal horizontalAlign="space-between">
          <div>Title</div>
          <div>Button1 Button2 Button3</div>
        </Stack>
        <div
          style={{
            backgroundColor: "yellow",
            width: "350px",
            height: "50px"
          }}
        >
          A floating panel which is supposed to be always under "Button2" and
          overlays the editor.
        </div>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px"
          }}
        >
          An editor
        </div>
      </div>
    );
  }
}

css reactjs css-position fluent-ui fluentui-react

Answer 1

Answer №1

To make the floating pane work properly, you must include position:absolute and place it inside the editor div with position:relative. The button 2 functionality will toggle the visibility of the floating panel.

Following these steps will ensure success:

var btn=document.querySelector('.drop_btn');
    btn.onclick=function()
    {
      document.querySelector('.dropdown').classList.toggle('block');
    }

*
        {
            font-family: 'arial';
            margin: 0px;
            padding: 0px;
        }
        .menu_pane
        {
            display: flex;
            background: #151515;
            color: white;
            padding:5px 10px;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .menu_pane h3
        {
            font-weight: normal;
            font-size: 18px;
            flex-grow: 1;
        }

        .menu_pane .btn button
        {
            position: relative;
            background: #0971F1;
            color: white;
            border-radius: 5px;
            border:none;
            cursor: pointer;
            padding: 8px 20px;
            margin-right: 10px;
        }

        .dropdown
        {
            display: none;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            color: white !important;
            position: absolute;
            background: #242424;
            border-radius: 0 0 10px 10px;
        }

        .menu_pane .btn .dropdown p
        {
            font-size: 14px;
        }
        .editor_pane
        {
            position: relative;
          background:#151515;
          color: white;
          min-height: 50vh;
          border-radius: 0 0 10px 10px;
          padding: 10px;
          color: #512DA8;
        }
        
        .block
        {
            display: block;
        }

<div class="container">
    <div class="menu_pane">
        <h3>Title</h3>
        
        <div class="btn">
        <button>Button-1</button>
        </div>

        <div class="btn">
        <button class="drop_btn">Button-2</button>

        </div>

        <div class="btn">
        <button>Button-3</button>
        </div>
    </div>

    <div class="editor_pane">
        <p>An editor</p>
        <div class="dropdown">
            <p>A floating panel which is supposed to be always under "Button2" and overlays the editor.</p>
        </div>
    </div>
</div>

Answer 2

To make the floating pane work properly, you must include position:absolute and place it inside the editor div with position:relative. The button 2 functionality will toggle the visibility of the floating panel.

Following these steps will ensure success:

var btn=document.querySelector('.drop_btn');
    btn.onclick=function()
    {
      document.querySelector('.dropdown').classList.toggle('block');
    }

*
        {
            font-family: 'arial';
            margin: 0px;
            padding: 0px;
        }
        .menu_pane
        {
            display: flex;
            background: #151515;
            color: white;
            padding:5px 10px;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .menu_pane h3
        {
            font-weight: normal;
            font-size: 18px;
            flex-grow: 1;
        }

        .menu_pane .btn button
        {
            position: relative;
            background: #0971F1;
            color: white;
            border-radius: 5px;
            border:none;
            cursor: pointer;
            padding: 8px 20px;
            margin-right: 10px;
        }

        .dropdown
        {
            display: none;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            color: white !important;
            position: absolute;
            background: #242424;
            border-radius: 0 0 10px 10px;
        }

        .menu_pane .btn .dropdown p
        {
            font-size: 14px;
        }
        .editor_pane
        {
            position: relative;
          background:#151515;
          color: white;
          min-height: 50vh;
          border-radius: 0 0 10px 10px;
          padding: 10px;
          color: #512DA8;
        }
        
        .block
        {
            display: block;
        }

<div class="container">
    <div class="menu_pane">
        <h3>Title</h3>
        
        <div class="btn">
        <button>Button-1</button>
        </div>

        <div class="btn">
        <button class="drop_btn">Button-2</button>

        </div>

        <div class="btn">
        <button>Button-3</button>
        </div>
    </div>

    <div class="editor_pane">
        <p>An editor</p>
        <div class="dropdown">
            <p>A floating panel which is supposed to be always under "Button2" and overlays the editor.</p>
        </div>
    </div>
</div>

Answer 3

Answer №2

What do you think of this design?

https://codesandbox.io/s/hidden-platform-q3v4kc?file=/src/App.js

I made some updates to the layout - I moved the floating pane inside the button, changed the button's position to relative, and set the floating pane to position absolute.

Please note: I deliberately did not include the top property for the floating pane. An interesting point about using position: absolute is that if you don't specify top, left, bottom, or right properties, the element will be positioned where it would naturally be without any positioning applied.

Answer 4

What do you think of this design?

https://codesandbox.io/s/hidden-platform-q3v4kc?file=/src/App.js

I made some updates to the layout - I moved the floating pane inside the button, changed the button's position to relative, and set the floating pane to position absolute.

Please note: I deliberately did not include the top property for the floating pane. An interesting point about using position: absolute is that if you don't specify top, left, bottom, or right properties, the element will be positioned where it would naturally be without any positioning applied.

Answer 5

Answer №3

Update

Upon reviewing the setup, I realized that the overlay should only cover the "editor" area. The example has been revised to reflect this adjustment.

Check out the updated live example: codesandbox

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  state = { showOverlay: true };
  handleToggle = () =>
    this.setState((prev) => ({ showOverlay: !prev.showOverlay }));

  render() {
    return (
      <div>
        <Stack
          horizontal
          horizontalAlign="space-between"
          style={{ padding: "12px" }}
        >
          <div>Title</div>
          <Stack horizontal>
            <button>Button1</button>
            <button onClick={this.handleToggle}>
              {`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
            </button>
            <button>Button3</button>
          </Stack>
        </Stack>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px",
            position: "relative"
          }}
        >
          An editor
          <div
            style={{
              position: "absolute",
              inset: "0",
              backgroundColor: "rgba(0, 0, 0, 0.70)",
              display: this.state.showOverlay ? "flex" : "none",
              justifyContent: "center",
              alignItems: "center",
              color: "#fff"
            }}
          >
            A floating panel meant to always be positioned under "Button2" and overlay the editor.
          </div>
        </div>
      </div>
    );
  }
}

For reference, the original example featured an overlay covering the entire component except for "Button 2."

Original

I may not have fully grasped the desired outcome, but here's the implementation showcasing a toggle overlay controlled by Button2.

The current overlay sits atop and obstructs all child elements besides Button2, functioning as a "start editing" button. However, it can be further customized to specify the element it covers, aligning better with the specific use case.

Take a quick look at the demo: codesandbox

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  state = { showOverlay: true };
  handleToggle = () =>
    this.setState((prev) => ({ showOverlay: !prev.showOverlay }));

  render() {
    return (
      <div style={{ position: "relative", zIndex: "1" }}>
        <Stack
          horizontal
          horizontalAlign="space-between"
          style={{ padding: "12px" }}
        >
          <div>Title</div>
          <Stack horizontal>
            <button>Button1</button>
            <button style={{ zIndex: "75" }} onClick={this.handleToggle}>
              {`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
            </button>
            <button>Button3</button>
          </Stack>
        </Stack>
        <div
          style={{
            position: "absolute",
            inset: "0",
            backgroundColor: "rgba(0, 0, 0, 0.70)",
            zIndex: "50",
            display: this.state.showOverlay ? "flex" : "none",
            justifyContent: "center",
            alignItems: "center",
            color: "#fff",
          }}
        >
          A floating panel meant to always be positioned under "Button2" and overlay the editor.
        </div>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px",
          }}
        >
          An editor
        </div>
      </div>
    );
  }
}

Answer 6

Update

Upon reviewing the setup, I realized that the overlay should only cover the "editor" area. The example has been revised to reflect this adjustment.

Check out the updated live example: codesandbox

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  state = { showOverlay: true };
  handleToggle = () =>
    this.setState((prev) => ({ showOverlay: !prev.showOverlay }));

  render() {
    return (
      <div>
        <Stack
          horizontal
          horizontalAlign="space-between"
          style={{ padding: "12px" }}
        >
          <div>Title</div>
          <Stack horizontal>
            <button>Button1</button>
            <button onClick={this.handleToggle}>
              {`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
            </button>
            <button>Button3</button>
          </Stack>
        </Stack>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px",
            position: "relative"
          }}
        >
          An editor
          <div
            style={{
              position: "absolute",
              inset: "0",
              backgroundColor: "rgba(0, 0, 0, 0.70)",
              display: this.state.showOverlay ? "flex" : "none",
              justifyContent: "center",
              alignItems: "center",
              color: "#fff"
            }}
          >
            A floating panel meant to always be positioned under "Button2" and overlay the editor.
          </div>
        </div>
      </div>
    );
  }
}

For reference, the original example featured an overlay covering the entire component except for "Button 2."

Original

I may not have fully grasped the desired outcome, but here's the implementation showcasing a toggle overlay controlled by Button2.

The current overlay sits atop and obstructs all child elements besides Button2, functioning as a "start editing" button. However, it can be further customized to specify the element it covers, aligning better with the specific use case.

Take a quick look at the demo: codesandbox

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  state = { showOverlay: true };
  handleToggle = () =>
    this.setState((prev) => ({ showOverlay: !prev.showOverlay }));

  render() {
    return (
      <div style={{ position: "relative", zIndex: "1" }}>
        <Stack
          horizontal
          horizontalAlign="space-between"
          style={{ padding: "12px" }}
        >
          <div>Title</div>
          <Stack horizontal>
            <button>Button1</button>
            <button style={{ zIndex: "75" }} onClick={this.handleToggle}>
              {`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
            </button>
            <button>Button3</button>
          </Stack>
        </Stack>
        <div
          style={{
            position: "absolute",
            inset: "0",
            backgroundColor: "rgba(0, 0, 0, 0.70)",
            zIndex: "50",
            display: this.state.showOverlay ? "flex" : "none",
            justifyContent: "center",
            alignItems: "center",
            color: "#fff",
          }}
        >
          A floating panel meant to always be positioned under "Button2" and overlay the editor.
        </div>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px",
          }}
        >
          An editor
        </div>
      </div>
    );
  }
}

Create a layered panel underneath a button that covers a separate element

Answer №1

Following these steps will ensure success:

Answer №2

Answer №3

Similar questions

What other option can be used in place of white-space:nowrap?

What is the best way to align my content alongside my sidebar?

What is the best method for applying a gradient color to the parent class in CSS using pseudo classes (before and after)?

What is the method for initiating a radial gradient from the middle of the pie chart?

Is it possible to utilize LESS to dynamically read the width?

What is the purpose of the bold line down the left side of every HTML calendar?

I can't get Toggleclass to switch classes properly, am I missing something?

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

The layout of the element

Incorporating a component specified in a .jsx file into a TypeScript file

I am experiencing an issue with the initial for-loop in my code as it is not

What is the best way to locate an item reference for a specific DOM element?

Removing Delivery Address and Method From Checkout Page in OpenCart 2

ReactJS - When a child component's onClick event triggers a parent method, the scope of the parent method may not behave as anticipated

Encountered a discrepancy with npm dependencies during the update or installation process on a legacy project

My dynamic route with Hooks and route parameters seems to be malfunctioning - what could be causing this

Building a personalized dropdown menu in React Native involves creating a customized component that includes

Updating the color scheme of the selected nav-item and showcasing the corresponding page in relation to the navbar selection

Display React parent input when the user clicks outside the textbox area

Retrieve data from HTML in order to apply styling to an element