Is there a way to expand the pressable area of a close icon without altering its size? For example, if the icon is 19X19 pixels, can the pressable area be increased to 39X39 pixels? The concern lies with the div element containing the close button and the desire to modify it. There is hesitation in setting a fixed height as it can sometimes lead to stretching issues, especially when considering the lack of height in its parent element.
<div class="ui-pnotify-closer" style="cursor: pointer; visibility: visible;">
<span class="glyphicon glyphicon-remove" title="Close"></span>
</div>
One possible solution could involve adjusting the styling like so:
.ui-pnotify-closer{
margin: -10px -10px -10px 10px ;
padding: 10px 10px 10px 10px;
height: 40px;
}
However, this approach may not be the most elegant. Are there any alternative suggestions?