I'm facing a formatting issue in my Angular application that I need help with. The problem lies in the clickable area around my checkboxes, as shown in the images linked below.
https://i.sstatic.net/MoLYZ.png https://i.sstatic.net/2VT5x.png
What I aim to achieve is adjusting the clickable area to match the size of the checkbox itself.
The second image demonstrates the current clickable area highlighted with a background color for clarity (aquamarine).
In my SCSS code snippet, it looks like this. While I believe it should be a simple task, there seems to be a detail I might be overlooking.
.date-checkbox {
display: inline;
float: right;
margin-right: -24px;
margin-top: -23px;
-webkit-transform: scale(2);
}
.disable-date {
opacity: 0.5;
pointer-events: none;
}
.enum-checkbox {
display: inline;
float: right;
margin-right: -24px;
margin-top: -23px;
-webkit-transform: scale(2);
}
.container {
cursor: pointer;
}
.container input {
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* More styling rules here */
Here's a snippet of my HTML code:
<div class="enum-checkbox">
<label class="container">
<input type="checkbox" (click)="IncludeExcludeProp(groupobject[g.PROPS.title], $event)" title="Include in search" />
<span class="checkmark"></span>
</label>
</div>