skip to Main Content

I have a working code, which expands the buttons on a map when user hover over. My problem is when user hover over a button on the right side it moves all the other buttons as well. I am not sure what am I missing. Here you can see the issue:
https://jsfiddle.net/qjwtum3c/2/

    .extendable-button-container-right {
      position: absolute;
      top: 20px; /* Adjust top position */
      right: 20px;
      z-index: 1000;
    }


    .extendable-button-right {
      background-color: #0d6efd;
      color: white;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); /* Add shadow effect */
      flex-direction: row-reverse;
   
    }

    .extendable-button-right i {
      color: white; /* Change icon color to white */
      transition: all 0.3s ease;
    }

    .extendable-button-right:hover,
    .extendable-button-right:focus {
      background-color: #0d6efd;
    }

    .extendable-button-right:active {
      background-color: #0daafd;
    }

    .hint-right {
      display: none;
      font-size: 14px;
      color: white; /* Change hint text color to white */
      margin-right: 5px;
      transition: all 0.3s ease;
      text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
      padding-right: 5px
    }

    .extendable-button-right:hover .hint-right,
    .extendable-button-right:focus .hint-right {
      display: block;
    }

    .extendable-button-right:hover i,
    .extendable-button-right:focus i {
      transform: scale(1.2);
    }

2

Answers


  1. Since the items are on the right side, I changed the direction to direction:rtl.

    .extendable-button-container-right {
          position: absolute;
          top: 20px; /* Adjust top position */
          right: 20px;
          z-index: 1000;
          direction: rtl;
        }
    
    Login or Signup to reply.
  2. You can make them float: right; and between them have a div with clear:both:

        #map {
          height: 400px;
          position: relative;
        }
    
        .extendable-button-container-left {
          position: absolute;
          top: 20px; /* Adjust top position */
          left: 20px;
          z-index: 1000;
        }
    
        .extendable-button-container-right {
          position: absolute;
          top: 20px; /* Adjust top position */
          right: 20px;
          z-index: 1000;
        }
    
        .extendable-button-left {
          background-color: #0d6efd;
          color: white;
          padding: 10px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); /* Add shadow effect */
        }
    
        .extendable-button-left i {
          color: white; /* Change icon color to white */
          transition: all 0.3s ease;
        }
    
        .extendable-button-left:hover,
        .extendable-button-left:focus {
          background-color: #0d6efd;
        }
    
        .extendable-button-left:active {
          background-color: #0daafd;
        }
    
        .hint-left {
          display: none;
          font-size: 14px;
          color: white; /* Change hint text color to white */
          margin-left: 10px;
          transition: all 0.3s ease;
          text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
        }
    
        .extendable-button-left:hover .hint-left,
        .extendable-button-left:focus .hint-left {
          display: block;
        }
    
        .extendable-button-left:hover i,
        .extendable-button-left:focus i {
          transform: scale(1.2);
        }
    
        .extendable-button-right {
          background-color: #0d6efd;
          color: white;
          padding: 10px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); /* Add shadow effect */
          flex-direction: row-reverse;
       
        }
    
        .extendable-button-right i {
          color: white; /* Change icon color to white */
          transition: all 0.3s ease;
        }
    
        .extendable-button-right:hover,
        .extendable-button-right:focus {
          background-color: #0d6efd;
        }
    
        .extendable-button-right:active {
          background-color: #0daafd;
        }
    
        .hint-right {
          display: none;
          font-size: 14px;
          color: white; /* Change hint text color to white */
          margin-right: 5px;
          transition: all 0.3s ease;
          text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
          padding-right: 5px
        }
    
        .extendable-button-right:hover .hint-right,
        .extendable-button-right:focus .hint-right {
          display: block;
        }
        
        .extendable-button-right {
            float: right;
        }
    
        .extendable-button-right:hover i,
        .extendable-button-right:focus i {
          transform: scale(1.2);
        }
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Leaflet Map with Buttons</title>
      <!-- Leaflet CSS and JS -->
      <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
      <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    </head>
    <body>
    
    <div id="map"></div>
    
    <div class="extendable-button-container-left">
      <!-- Button 1 -->
      <button class="extendable-button-left" onclick="zoomToBudapest()">
        <i class="fas fa-square"></i>
        <span class="hint-left">Zoom to Budapest</span>
      </button>
    
      <!-- Button 2 -->
      <button class="extendable-button-left" onclick="zoomToLondon()">
        <i class="fas fa-circle"></i>
        <span class="hint-left">Zoom to London</span>
      </button>
    
      <!-- Button 3 -->
      <button class="extendable-button-left" onclick="zoomToNewYork()">
        <i class="fas fa-globe"></i>
        <span class="hint-left">Zoom to New York</span>
      </button>
    </div>
    
    <div class="extendable-button-container-right">
      <!-- Button 4 -->
      <button class="extendable-button-right" onclick="zoomToParis()">
        <i class="fas fa-star"></i>
        <span class="hint-right">Zoom to Paris</span>
      </button>
      
      <div style="clear:both"></div>
    
      <!-- Button 5 -->
      <button class="extendable-button-right" onclick="zoomToRome()">
        <i class="fas fa-heart"></i>
        <span class="hint-right">Zoom to Rome</span>
      </button>
    
      <div style="clear:both"></div>
      
      <!-- Button 6 -->
      <button class="extendable-button-right" onclick="zoomToBerlin()">
        <i class="fas fa-moon"></i>
        <span class="hint-right">Zoom to Berlin</span>
      </button>
    </div>
    
    <script>
      // Initialize Leaflet map
      var map = L.map('map', {
        zoomControl: false // Disable default zoom control
      }).setView([51.505, -0.09], 13);
    
      // Add base tile layer
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
      }).addTo(map);
    
      // Function to zoom to Budapest
      function zoomToBudapest() {
        map.setView([47.4979, 19.0402], 13);
      }
    
      // Function to zoom to London
      function zoomToLondon() {
        map.setView([51.5074, -0.1278], 13);
      }
    
      // Function to zoom to New York
      function zoomToNewYork() {
        map.setView([40.7128, -74.0060], 13);
      }
    
      // Function to zoom to Paris
      function zoomToParis() {
        map.setView([48.8566, 2.3522], 13);
      }
    
      // Function to zoom to Rome
      function zoomToRome() {
        map.setView([41.9028, 12.4964], 13);
      }
    
      // Function to zoom to Berlin
      function zoomToBerlin() {
        map.setView([52.5200, 13.4050], 13);
      }
    </script>
    
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search