I am creating a web application where I made a clickable card. I want to disable the click event on anchor tag for zero Opportunities.
But pointer-events: none;
is not working.
I have setup a snippet here for better understanding.
.fc-card-header { background: #1976d2; padding: 24px; height: auto; border-radius: 3px; display: block; }.svg-icon svg { width: 24px; height: 24px; fill: rgba(0,0,0,0.54); }
<a href="cmOpportunitySummary" class="white" style="text-decoration:none;pointer-events: none; cursor: default;;"> <div class="fc-card-header"> <div class="grid-row"> <div class="grid-cell text-left no-padding padding-right cell-auto-width"> <div class="svg-icon no-width no-padding white" data-role="ico_RoundStar"><svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"></path></svg></div> </div> <div class="grid-cell no-padding flex flex-vcenter"> <p class="text-left white">Opportunities</p> </div> </div> <div class="grid-row padding-top"> <div class="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter"> <span class="heading white no-line-height">0</span> </div> </div> </div> </a>
Use display:block;
or display:inline-block;
on a
tag, it will work.
a { text-decoration: none; pointer-events: none; cursor: default; display: block; color: #fff; } .fc-card-header { background: #1976d2; padding: 24px; height: auto; border-radius: 3px; display: block; } .svg-icon svg { width: 24px; height: 24px; fill: rgba(0, 0, 0, 0.54); }
<a href="cmOpportunitySummary" class="white"> <div class="fc-card-header"> <div class="grid-row"> <div class="grid-cell text-left no-padding padding-right cell-auto-width"> <div class="svg-icon no-width no-padding white" data-role="ico_RoundStar"> <svg viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"></path> </svg> </div> </div> <div class="grid-cell no-padding flex flex-vcenter"> <p class="text-left white">Opportunities</p> </div> </div> <div class="grid-row padding-top"> <div class="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter"> <span class="heading white no-line-height">0</span> </div> </div> </div> </a>
I had button tag in my case. Adding display: inline-block helped in case of safari browser on MAC.
<button
className={props.btnClass}
style={{padding:props.btnPadding}}
onClick={props.btnAction}
>
{props.btnTitlle}
</button>
Below is the CSS:
button.disabledBtn {
cursor: not-allowed;
background: #7eb2ec;
border: 2px solid #7eb2ec;
margin-right: 22px;
font-weight: initial;
&:active {
display: inline-block;
pointer-events: none;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.