CODEWITHSUNDEEP
javascripthtmlcssangularcheckbox
Adrien
Adrien

Reputation: 185

Extend check zone of a checkbox

I'm programming a menu with two checkboxes inside (mat-menu from Angular with native Javascript checkboxes) and if I'm not clicking exactly in the box that doesn't work, the menu is closing and the box not checked ...

By the way with the mat-menu I haven't found how to block the automatic closure of the menu when I click on it.

Do you have a solution ?

Capture of my menu

<!-- 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>

Upvotes: 0

Views: 396

Answers (1)

Takit Isy
Takit Isy

Reputation: 10081

Here is an easy way of extending the checkbox zone using CSS :after pseudo-element:

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>

Note that I used p, label, button as examples in my snippet, but it can work with anything else.
Also, you may need to use !important on the CSS rules to override rules that are already set.

Hope it helps.

Upvotes: 1

Related Questions