CSS look through element / make border of parent element partially invisible

Question

I have an ng-select (dropdown) that expands beyond the borders of its parent element. That parent element is transparent and has a non-transparent white border, so does the ng-select. See the visualization.

What I need is some kind of "look through" functionality, so that the border that currently strikes through "test2" is invisible, but only for the width of the options of the dropdown, not the whole border-bottom. Simply setting the background of the option to something non-transparent doesnt work, as there is a background-image instead of a simple single-colored background.

So far, I only found this CSS - Child element see through parent, however I don't see a way how I could adapt that solution to my needs.

Another approach I could think of is to set the background-image on the dropdown too and calculate the x/y position manually, but to me that doesn't seem like a good one.

Ideas how to best achieve this behavior?

Edit: stackblitz code example

After playing around with mask like in below code, The drop-down would be cut off completely: mask visualization

  mask:
    /* 3rd mask */
    linear-gradient(#fff,#fff)
    top 150px right 5em/
     200px 50px,
      /**/
    linear-gradient(#fff,#fff);
  mask-repeat:no-repeat;
  mask-composite:exclude;

using position: relative; z-index: 999, this is the result. Here's a code example.

You can add `position: relative` and `z-index: 999` css declarations to select option — Shashikant Yadav - Kantbtrue, Jan 17 '21 at 10:48
@TemaniAfif I could not find a solution using those duplicates, I included my code in the edit — zokkr, Jan 17 '21 at 13:11
@kantbtrue that didn't work also, as the whole div is then expanded to contain the dropdown — zokkr, Jan 17 '21 at 13:12
@zokkr you were right, this is not a stack order-related issue — Shashikant Yadav - Kantbtrue, Jan 17 '21 at 14:50

score 0 · Answer 1 · answered Jan 17 '21 at 15:01

I found a workaround for my problem. Instead of using a border-bottom, I use a linear-gradient background positioned at the bottom, that will be toggled on click of the dropdown.

  <div
    class="card empyre-item-form my-4 col-lg-12"
    [ngClass]="{
        'empyre-game-item-dropdown': dropdown,
        'empyre-game-item-default': !dropdown
      }"
  >
...
    <ng-select
      class="empyre-select mb-4"
      [items]="['test2', 'test6']"
      placeholder="Choose Account / ignore otherwise"
      (open)="dropdown = true"
      (close)="dropdown = false"
    >

.empyre-game-item-default {
  background:
    linear-gradient(to right, white 0%, white 100%) no-repeat !important;
  background-size: 100% 1px !important;
  background-position: 0 100% !important;
  border-bottom: none !important;
  border-bottom-right-radius: 0.2rem !important;
  border-bottom-left-radius: 0.2rem !important;
}

.empyre-game-item-dropdown {
  background:
    linear-gradient(to right, white 1.275em, transparent 1.275em) no-repeat,
    linear-gradient(to left, white 1.275em, transparent 1.275em) no-repeat !important;
  background-size: 100% 1px !important;
  background-position: 0 100% !important;
  border-bottom: none !important;
  border-bottom-right-radius: 0.2rem !important;
  border-bottom-left-radius: 0.2rem !important;
}

See stackblitz for full code example.

CSS look through element / make border of parent element partially invisible

1 Answers1