Question

I have two options for the user on my page, one is a button that performs an edit function and the other is a hyperlink that navigates to another page. Both are styled to look the same but because the delete option is a hyperlink control it only works when you click on the text and not the surrounding box like the button does.

Two option buttons

The .aspx file is as follows:

<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit"/>                  
<div class ="deletebutton">
<asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>
</div>

And the CSS is:

.deletebutton, input[type="submit"] 
{
align-items: flex-start;
text-align: center;
cursor: default;
color:#BD193A;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
-webkit-appearance: push-button;
-webkit-user-select: none;
white-space: pre;
width: 200px;
font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
float: left;
margin:5px;
}
Was it helpful?

Solution

Simply remove DIV from hyperlink and set deletebutton class to hyperlink

<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
<asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>

OTHER TIPS

In that case I think you can use the hyperlink outside the DIV element, like:

    <asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
        <div class="deletebutton">
            Delete
        </div>
    </asp:HyperLink>

Depending on your CSS you can have changes to do...

or like the edited version that I've mentioned in comments:

    <asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
            Delete
    </asp:HyperLink>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top