Click area on button

0 Answers 16 Views
Top achievements
Rank 1
Debra asked on 05 Jul 2022, 05:50 PM

I have buttons in this app that are wider than the default width.  But the entire area of the button does not accept a click.  The button is:


                    <div class="col-xl-2 col-md-3 col-sm-12">
                        <TelerikTooltip TargetSelector="a[title]">
                        <a title="Unsubmitting a timesheet will return it to your list of current timesheets.">
                            <TelerikButton IconClass="far fa-undo-alt" OnClick="@(e => { IsShowPendingConfirmationWindow = true; })" Class="action-button-center">Unsubmit</TelerikButton>


The class is: 

.action-button-center {
    width: 150px;
    height: 35px;
    margin: 0 auto;
    display: block;
    text-align: center !important;
 /*   border-radius: 4px;*/


But only the area indicated in the attached .png is clickable.  Is there a way to set the clickable area to the entire button?

Telerik team
commented on 08 Jul 2022, 06:48 AM

This looks like HTML/CSS issue. For example, the TelerikButton is wider than its parent and this is what reduces the click area. Or, there is another element over the button.

It is not possible for a button to be only partially clickable. The problem must be somewhere else.

Top achievements
Rank 1
commented on 08 Jul 2022, 01:25 PM

Yes.  It was totally my bad and my issue with html.  The button was wider than the cell it was contained within. Once I fixed that, that took care of it.  Thanks for responding.

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question