locked
Firefox renders link button as command buttons on gridview RRS feed

  • Question

  • User2103134756 posted

    Firefox seems to be rendering the link buttons on all the gridviews as command buttons.  Tried adding border: 0px; but no use. No problems on chrome or IE 11. It does change on the hover but they definitely look like buttons and not links.

    a.GvCmd
    {
      text-decoration: none;
      color: #465c71;
      font-weight: 600;
      border: 0px;
    }
    
    a.GvCmdDisabled
    {
      text-decoration: none;
      color: #999999;
      font-weight: 600;
      border: 0px;
    }

    Sunday, July 28, 2019 10:50 PM

All replies

  • User288213138 posted

    Hi oneillj,

    Based on your description, I try to reproduce your problem. 

    But I tested it with your code and the style is the same in chrome,IE11 and FireFox.

    Do you mean you want to add border to LinkButton?

    If this is your requirement, I suggest you could try to set it as below codes:

     

    <style>
            #LnkButtion {
                border: 1px solid #aaa;
                text-decoration: none;
                font-family: Arial;
                color: black;
                padding: 1px 6px;
                font-size: 13px;
                background: #eee;
            }
    
                #LnkButtion:hover {
                    background: #D0F5F4;
                }
    </style>
    <asp:LinkButton ID="LnkButtion" runat="server" Text="Button" />
    

    If I misunderstand your requirement, please post more details information about your requirement.

    Best regards,

    sam.

    Monday, July 29, 2019 3:10 AM
  • User2103134756 posted

    What is actually happening, it seems, that the linkbutton is rendered as command button. I thought somehow there was a border around it but that was the border of the command button. There are three methods used in this program. One is the gv's DataRowBound event. The other 2 are in a utilities class that disable and enable all the linkbuttons during an edit so the user can't do an operation on a row. Here is the calling code, the utility methods and the event code. At the very bottom is the rendered source on one of the gv rows. It doesn't matter what gets called or what page is executing, every gridview renders the same way in FF.

    protected void SetFormState()
        {
            //Browse Mode
            if (GlobalVars.CurrentMode == (int)Modes.Browse)
            {
                //Set button status
                btnCreateNew.Enabled = true;
                btnSave.Enabled = false;
                btnCancel.Enabled = false;
    
                //Reset form
                FormUtilities.ResetForm(this.Form);
                lblLastLoginDate.Text = string.Empty;
                lblCreationDate.Text = string.Empty;
    
                //Lock form controls
                FormUtilities.LockFormInput(this.Form);
               
                //Enable Gridview buttons
                FormUtilities.EnableGridviewRows(grdUsers, SELECT_COL, DELETE_COL);
    
                //Clear and disable user role dropdown
                drpUserRole.Items.Clear();
                drpUserRole.Enabled = false; 
            }
    
            //Edit Mode
            if (GlobalVars.CurrentMode == (int)Modes.Edit)
            {
                //Set button status
                btnCreateNew.Enabled = false;
                btnSave.Enabled = true;
                btnCancel.Enabled = true;
    
                //Unlock form
                FormUtilities.UnlockFormInput(this.Form);
    
                //Disable username textbox on edit
                txtUserName.Enabled = false;
    
                //Disable gridview buttons on edit or new
                FormUtilities.DisableGridviewRows(grdUsers, SELECT_COL, DELETE_COL);
    
                //Enable user role dropdown
                drpUserRole.Enabled = true;
    
                //Set focus to last name textbox
                txtLastName.Focus();
            }
    		.
    		.
    		.
    		Code continues
    		
    		
    		FormUtilities Methods
    		
    		
    	/// <summary>
        /// Enables Gridview rows after form edit or 
        /// other operation that requires disabling of controls. It
        /// also attaches a deleteConfirm script to the delete 
        /// button in the last column.
        /// </summary>
        /// <param name="gv"></param>
        public static void EnableGridviewRows(GridView gv, int selectCol, int deleteCol)
        {
    
            //Init table cell
            TableCell cell = new TableCell();
    
            //Traverse through the rows
            foreach(GridViewRow gvr in gv.Rows)
            {
                //If data row
                if (gvr.RowType == DataControlRowType.DataRow)
    
                    //Change the cssClass back to normal widths for
                    //the Select and Delete buttons
                    gv.Columns[selectCol].ControlStyle.CssClass = "GvCmd";
                    gv.Columns[deleteCol].ControlStyle.CssClass = "GvCmd";
    
                    cell = gvr.Cells[selectCol];
                    //Gets the linkbutton control
                    LinkButton lbSelect = cell.Controls[1] as LinkButton;
                    lbSelect.Enabled = true;
    
                    //Get last cell
                    cell = gvr.Cells[deleteCol];
    
                    string recordName = string.Empty; 
    
                    if (gv.ID == "grdUsers")
                    {
                        //Gets the name on the row to pass to script.
                        recordName = HttpUtility.JavaScriptStringEncode(string.Format("{0} {1}", gvr.Cells[3].Text.ToString(), gvr.Cells[2].Text.ToString()));
                    }
    
                    if (gv.ID == "grdVenues")
                    {
                        recordName = HttpUtility.JavaScriptStringEncode(string.Format("{0}", gvr.Cells[1].Text.ToString()));
                    }
    
                    if (gv.ID == "grdSchedule")
                    {
                        recordName = HttpUtility.JavaScriptStringEncode(string.Format(" the gig on {0} at {1} with {2} at {3}", gvr.Cells[1].Text.ToString(),
                                            gvr.Cells[2].Text.ToString(), gvr.Cells[3].Text.ToString(), gvr.Cells[4].Text.ToString()));
                    }
    
                    //Gets the linkbutton control
                    LinkButton lbDelete = cell.Controls[1] as LinkButton;
    
                    //Attaches the script to the linkbutton
                    if (lbDelete != null)
                    {
                        //lbDelete.Enabled = true;
                        lbDelete.Attributes.Add("onClick", "return deleteConfirm('" + recordName + "')"); 
                    }
    
                    gvr.Enabled = true;
            }
        }
    	
    	
    	/// <summary>
        /// Disables Gridview rows on form edit or 
        /// other operation that requires disabling of controls. It
        /// also changes the command button styles to disabled and 
        /// removes a deleteConfirm script on the delete 
        /// button in the last column.
        /// </summary>
        /// <param name="gv"></param>
        public static void DisableGridviewRows(GridView gv, int selectCol, int deleteCol)
        {
            TableCell cell = new TableCell();
    
            foreach (GridViewRow gvr in gv.Rows)
            {
                if (gvr.RowType == DataControlRowType.DataRow)
                {
                    if (gvr.RowIndex == gv.EditIndex)
                    {
                        gv.Columns[selectCol].ControlStyle.CssClass = "GvCmd";
                    }
                    else
                    {
                        gv.Columns[selectCol].ControlStyle.CssClass = "GvCmdDisabled";
                        gv.Columns[deleteCol].ControlStyle.CssClass = "GvCmdDisabled";
                        cell = gvr.Cells[selectCol];
                        LinkButton lbSelect = cell.Controls[1] as LinkButton;
                        string id = lbSelect.ID;
                        string txt = lbSelect.Text;
                        lbSelect.Enabled = false;
                        //Disable delete buttons
                        cell = gvr.Cells[deleteCol];
                        LinkButton lbDelete = cell.Controls[1] as LinkButton;
                        lbDelete.Attributes.Remove("onClick");
                        //lbDelete.Enabled = false;
                        gvr.Enabled = false;
                    }
       
                }
            }
        }
    	
    	
    	DataRowBound Event
    	
    	/// <summary>
        /// Adds a confirm delete javascript attr to the delete 
        /// link button on the last column of the gridview
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void GrdUsers_RowDataBound(object sender, GridViewRowEventArgs e)
        {
    
            HiddenField hdnEditFlag = mp.Page.FindControlRecursive("hdnEditInProgress") as HiddenField;
    
            if (hdnEditFlag.Value == true.ToString())
                return;
    
            //Inits new cell
            TableCell cell = new TableCell();
    
            //if data row
            if (e.Row != null && e.Row.RowType == DataControlRowType.DataRow)
            {
    
                //Gets the name on the row to pass to script.
                string recordName = string.Format("{0} {1}", e.Row.Cells[3].Text.ToString(), e.Row.Cells[2].Text.ToString());
    
                //gets the delete button cell
                cell = e.Row.Cells[7];
    
                //get linkbutton control
                LinkButton linkButton = (LinkButton)cell.Controls[1];
    
    
                //Adds the javascript attribute that confirms a delete.
                if (linkButton != null)
                {
                    linkButton.Attributes.Add("onClick", "return deleteConfirm('" + recordName + "')");
    
                }
            }
        }
    
    
    Here is how it renders on the view source
    
    <tr class="GrdVeiwAltRow">
    	<td class="GvCmdCol">
                    <a id="MainContent_grdUsers_grdUsersSelect_3" class="GvCmd" href="javascript:__doPostBack(&#39;ctl00$MainContent$grdUsers$ctl05$grdUsersSelect&#39;,&#39;&#39;)">Select</a>
                          </td><td>OrrS</td><td>Orr</td><td>Sean</td><td>SeanOrr@comcast.net</td><td>6/17/2019 11:05:06 PM</td><td>7/27/2019 1:13:09 AM</td><td class="GvCmdCol">
                                 <a onclick="return deleteConfirm(&#39;Sean Orr&#39;);" id="MainContent_grdUsers_grdUsersDelete_3" class="GvCmd" href="javascript:__doPostBack(&#39;ctl00$MainContent$grdUsers$ctl05$grdUsersDelete&#39;,&#39;&#39;)">Delete</a>
                         </td>
    </tr>
    	

    Monday, July 29, 2019 8:25 PM
  • User288213138 posted

    Hi oneillj,

    that the linkbutton is rendered as command button. I thought somehow there was a border around it but that was the border of the command button

    Do you mean there is a border around the link button? and you want to get rid of this border?

    if so, you should post you aspx code, otherwise I can't reproduce your problem.

    Best regards,

    Sam

    Wednesday, July 31, 2019 11:16 AM
  • User2103134756 posted

    No it's actually a command button. I uploaded a public FB image. Maybe you guys can get to it from here. Let me know if you can't.

    https://www.facebook.com/photo.php?fbid=2458392327516222&set=a.173603799328431&type=3&theater

    Thursday, August 1, 2019 11:30 PM
  • User288213138 posted

    Hi oneillj,

    I get the picture.

    Do you means  select is linkbutton and It rendered as a command button in firefox?

    If so, please post your aspx code so that I can help you solve the problem further.

    Best regards,

    sam

    Tuesday, August 6, 2019 11:23 AM
  • User2103134756 posted

    Sam,

    Here is one of the gridview controls on the page but they all render the same in FF. In my last post, I left a link to this gv in my last post that shows you exactly how it renders. It's on my FB page but it's a public post so, you shouldn't have to log in and friend me to view it.

    <td colspan="3">
    	<asp:GridView ID="grdVenues" runat="server" AutoGenerateColumns="False" 
    		ClientIDMode="Static" DataKeyNames="VenueID" TabIndex="22" 
    		onrowdeleting="GrdVenues_RowDeleting">
    		<AlternatingRowStyle CssClass="GrdVeiwAltRow" />
    		<Columns>
    			<asp:TemplateField ShowHeader="False">
    				<ItemTemplate>
    					<asp:LinkButton ID="lbSelect" runat="server" CausesValidation="False" 
    						CommandName="Select" Text="Select" CommandArgument="SelectVenue" 
    						onclick="VenueFormCommands"></asp:LinkButton>
    				</ItemTemplate>
    				<ControlStyle CssClass="GvCmd" />
    				<ItemStyle CssClass="GvCmdCol" />
    			</asp:TemplateField>
    			<asp:BoundField DataField="VenueName" HeaderText="Venue" >
    			<ItemStyle CssClass="VenName" />
    			</asp:BoundField>
    			<asp:BoundField DataField="Address" HeaderText="Address" >
    			<ItemStyle CssClass="VenAddress" />
    			</asp:BoundField>
    			<asp:BoundField DataField="City" HeaderText="City" >
    			<ControlStyle CssClass="VenCity" />
    			<ItemStyle CssClass="VenCity" />
    			</asp:BoundField>
    			<asp:BoundField DataField="State" HeaderText="St" >
    			<ItemStyle CssClass="VenState" />
    			</asp:BoundField>
    			<asp:BoundField DataField="ZipCode" HeaderText="Zip" >
    			<ItemStyle CssClass="VenZip" />
    			</asp:BoundField>
    			<asp:TemplateField ShowHeader="False">
    				<ItemTemplate>
    					<asp:LinkButton ID="lbDelete" runat="server" CausesValidation="False" 
    						CommandName="Delete" Text="Delete" CommandArgument="DeleteVenue" 
    						onclick="VenueFormCommands"></asp:LinkButton>
    				</ItemTemplate>
    				<ControlStyle CssClass="GvCmd" />
    				<ItemStyle CssClass="GvCmdCol" />
    			</asp:TemplateField>
    		</Columns>
    	</asp:GridView>
    </td>

    Tuesday, August 6, 2019 10:01 PM