Applying the transform:scale property to the parent element causes the child element's dropdown menu to appear beneath a different row

When attempting to scale my row on hover, I encounter an issue with my dropdown menu. If the dropdown menu is open, it gets hidden under the next row. How can I ensure that it stays on top?

I have tried using z-index, but it doesn't seem to help. There may be something I am misunderstanding in how to use the scale property.

.row {
  background: #f8f9fa;
  margin-top: 5px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.myScale1:hover {
  transform: scale(1.05);
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row myScale1">
    <div class="col ">
      1 of 2
    </div>
    <div class="col">
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

javascriptcssbootstrap-4

Answer №1

Implementing the transform property will establish a stacking context, causing the dropdown within it to be hidden by the subsequent row in the painting order.

To remedy this issue, simply elevate the z-index of the scaled row:

.row {
  background: #f8f9fa;
  margin-top: 5px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.myScale1:hover {
  transform: scale(1.05);
  position:relative;
  z-index:1;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row myScale1">
    <div class="col ">
      1 of 2
    </div>
    <div class="col">
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

Refer to this linked question for further insights on painting order and stacking context:

Why can't an element with a z-index value cover its child?

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

Retrieving information from MongoDB for a specific ObjectID associated with the current authenticated user

Having two collections in my MongoDB structured as follows: Data User: id: ObjectId ("5fb39e3d11eaad3e30cfb1b0") userName: "Tobias" password: "yyy" id: ObjectId ("5fb3c83fb774ff3340482250") userName: "Thor&qu ...

javascriptmongodbexpressmongooseejs

Navigating using Javascript library in Angular 2 framework

I am currently utilizing Parse, an external JS library, within Angular JS 2. Nevertheless, I am encountering issues when attempting to call the function gotoMain() from within a callback function of Parse. It appears that certain elements are not being l ...

javascriptparse-platformangular

Selenium WebDriver producing unexpected results with getTitle() method

Currently, I am executing an automated test script in a selenium-webdriver environment using Phantomjs. My approach involves running the script through node.js, rather than utilizing Python or C#. The steps I took to set up the environment are outlined b ...

javascriptnode.jsseleniumselenium-webdriverphantomjs

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

javascriptjqueryhtmlcss

Encountering a TypeError: relativeURL.replace is not a valid function in Next.js

Why am I encountering this error in my Next.js application? TypeError: relativeURL.replace is not a function. (In 'relativeURL.replace(/^/+/, '')', 'relativeURL.replace' is undefined) Request.js file const API_KEY = process ...

javascriptreactjsaxiosnext.js

Icons positioned centrally while floating to the left

There seems to be an issue with centering the icon CSS: .icons .overview { position: relative; float: left; width: 16.6666666667%; text-align: center; overflow: visible; } .icon { display: inline-block; width: 64px; heigh ...

htmlcssweb

Tips for hiding a popover in Angular when clicking outside of it

In a demo I created, rows are dynamically added when the user presses an "Add" button and fills in a name in an input field. Upon clicking "OK," a row is generated with a Star icon that should display a popover when clicked. While I have successfully imple ...

javascriptjqueryangularjs

Renew the php blade foreach loop using jQuery to update data live

I have a foreach cycle in my HTML, and at one point, some data is posted from JavaScript. I would like to append it once it is added to the database. I need to find a way to refresh the foreach loop without reloading the entire page (I could simply use ap ...

javascriptphpjqueryforeach

What is the process for retrieving the text element from a React component when using React.cloneElement?

Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...

javascriptreactjslocaleglobalization

What is the best way to bring in this interface from the React-Particles-JS library?

I have been attempting to segregate my parameters from my JSX within the react-particles-js library. I organize my parameters in an Object: let config = { "particles": { "number": { "value": 50 }, ...

htmlcssreactjstypescriptparticles.js

Include the jquery library and embed a Google Map

Hello, I am using jQuery load to refresh my page every second. The problem arises when I add a Google Map to the page - the map appears and disappears every second. Is there a way to fix this issue? $(document).ready(function(){ <?php if( ...

javascriptphpjquerygoogle-mapsload

Unable to append DOM element using the node.insertBefore() method

I am facing an issue with a sorted list of items displayed alphabetically. My intention was to insert a corresponding letter from the alphabetArr array after each <li> element, using an id from the DOMElementsArr array. However, I seem to be missing ...

javascriptarraysalgorithm

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Conceal the button briefly when clicked

How can I disable a button on click for a few seconds, show an image during that time, and then hide the image and display the button again? HTML: <input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton"> <img st ...

javascripthtml

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

cssnode.jsnpmsass

What is the impact of Javascript variable scope in the context of "for...in..." loops?

Imagine you have a code snippet like this: dict = {"key":"elem"} for (var elem in dict){ someFunction(function(){ anotherFunction(dict[elem]); }) } Question: Is elem still considered as the temporary variable created in the for...in... s ...

javascriptscope

Unable to utilize the three.js texture loader within a JavaScript worker environment

I'm currently experimenting with three.js to load textures. Here is the snippet from my main.js file: const worker = new Worker('../workers/worker.js', { type: 'module' }); And this is a simplified version of worker.js that ...

javascriptthree.jsweb-worker

What causes the error "Failed to load SWC binary for win32/x64" when using getStaticProps?

Encountering an issue while using getStaticProps() in a Next.js application, resulting in the following error when running the app: warn - Attempted to load @next/swc-win32-x64-gnu, but it was not installed warn - Attempted to load @next/swc-win32-x64-ms ...

javascriptreactjsnext.js

What is the best approach to utilizing BeautifulSoup to locate all the links on a page containing the string "/pl/oferta/"?

Currently, I am delving into Python with a focus on web scraping. Specifically, I am utilizing BeautifulSoup to extract only the links from: while searching for the string "/pl/oferta/'". import logging import requests from bs4 import BeautifulSoup ...

pythoncssweb-scrapingbeautifulsoup

dynamically open ngx-bootstrap accordion panels

I implemented the ngx-bootstrap accordion feature to display a list of blog posts. Below is the template structure: <accordion id="blog-list"> <accordion-group *ngFor="let post of posts; let first = first;" [isOpen]="first" id="post-{{post.i ...

javascriptangularngx-bootstrapbootstrap-accordion