1

I have a map and on the map i have zoom in and zoom out functionality, my question is how to make the red part invisible but not buttons, so when user searchs location on the map, this div should not block the view, only thos button should be visible.

english is not my mother language so could be mistakes.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import styled from "styled-components";

const Toolbox = styled.div`
  display: flex;
  justify-content: end;
  width: 100%;
  max-width: calc(100vw - 60px);
  margin-bottom: 10px;
  background-color:red
  button {
    margin-left: 10px;
    width: 2em;
    height:2em
  }
`;
function App() {
  return (
   
          <Toolbox>
            <button onClick={''}>+</button>
            <button onClick={''}>-</button>
            <button onClick={''}>x</button>
          </Toolbox>
       
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

it looks like this at the moment:

enter image description here

walee
  • 575
  • 4
  • 16

4 Answers4

2

Use: position: absolute;

.Map {
  position: relative;
  background: #eee;
  min-height: 150px;
}

.Toolbox {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  padding: 10px;
}
<div class="Map">

  Here goes the map

  <div class="Toolbox">
    <button type="button">+</button>
    <button type="button">-</button>
  </div>

</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

For me, setting visibility did the trick!

outer.style.visibility = 'hidden';
inner.style.visibility = 'visible';
cskwg
  • 790
  • 6
  • 13
-1

Have you tried removing the ‘background: red’ from your CSS?

Erick Jones
  • 109
  • 6
-1

Playing with her position will solve the problem.

position: absolute;

visit

Berkant
  • 51
  • 2
  • 7