目次

状況

  • 条件を選択するドロップダウンを開くためのボタンがある
  • その横に、選択した条件をクリアできるクリアボタンがある
  • この2つを子要素に持つボックスがある

ボタンを押した時に、ボタンのどこを押しても、ドロップダウンが開くようにしたいです。
しかし現状だと、ボタンの文字周りのスペースをクリックすると、ドロップダウンが開きません

ちなみにコードは下記の通りです。

<div class="filter">
  <div class="label" (click)="openDropdown()">ドロップダウンを開く</div>
  <div class="clear" (click)="clear()"></div>
</div>
.filter {
  width: 100px;
  height: 40px;
  .label {
    margin: 16px 0 16px 16px; // この部分に注目していていください
    height: 100%;
    line-height: 40px;
    &:hover {
      background: rgb(226, 226, 226);
      cursor: pointer;
    }
  }
  .clear {
    margin: 16px;
    background: white !important;
    &::before {
      content: 'clear'; // マテリアルアイコン使ってます。
    }
  }
}

 

 

Sponsored Link


margin ではなくpadding を使う

ある要素に margin を適用すると、要素外にスペースができてしまうため、margin 部分にクリックイベントは発動しなくなります。

なので、今回のようにクリックイベントを設置している label クラスに margin を用いると、見た目は大丈夫でもクリックできない部分ができてしまいます。

そういう時は、margin の代わりに padding を適用すれば問題ありません!

.filter {
  width: 100px;
  height: 40px;
  .label {
    padding: 16px 0 16px 16px; // この部分を margin から paading に変えます。
    height: 100%;
    line-height: 40px;
Sponsored Link


まとめ

クリック範囲をボックス周囲のスペースにまで広げたい時は、margin ではなく padding を使いましょう!

というだけの話でした!

Sponsored Link