Расширить зону проверки флажка

Question

Я программирую меню с двумя флажками внутри (mat-menu из Angular с собственными флажками Javascript), и если я не щелкаю точно в поле, которое не работает, меню закрывается, а флажок не проверяется...

Кстати, с мат-меню я не нашел, как заблокировать автоматическое закрытие меню при нажатии на него.

У вас есть решение?

Захват моего меню

<!-- app.component.html -->

<div class="header">
  <mat-toolbar color="warn">OpenLayers</mat-toolbar>

  <div class="menu">
    <button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <p>Piscines : <input type="checkbox" id="piscine" name="piscine" (change)="handleSelected1($event)"/></p>
      </button>
      <button mat-menu-item>
        <p>Parkings : <input type="checkbox" id="parking" name="parking" (change)="handleSelected2($event)"/></p>
      </button>
    </mat-menu>
  </div>
</div>

Answer 1

Вот простой способ расширения зоны флажка с помощью псевдоэлемента CSS :after:

p, label, button, .chk-extended{
  position: relative;
}

/* The above element position will be taken as reference
   for the pseudo-element absolute positioning below:
*/

.chk-extended:after,
.chk-over-elm:after{
  position: absolute;
  content: '';
  border: 1px dotted gray; /* For visibility */
  /* The below can be adjusted */
  top: -0.5em;
  bottom: -0.5em;
  left: -0.5em;
  right: -0.5em;
}

Regular:<input type="checkbox" />
<br><br>
Extended:<input class='chk-extended' type="checkbox" />
<br><br>
<label>Extended on label:<input class='chk-over-elm' type="checkbox" /></label>
<br><br>
<button>Extended on button:<input class='chk-over-elm' type="checkbox" /></button>
<br>
<p>Extended on p:<input class='chk-over-elm' type="checkbox" /></p>

Обратите внимание, что я использовал p, label, button в качестве примеров в моем фрагменте, но он может работать с любым другим.
Также вам может понадобиться использовать !important в правилах CSS, чтобы переопределить уже установленные правила.

Надеюсь, это поможет.