Adjust Width of Button to match another, autosized one

Question

I have an ASP.NET page with two buttons btnConfirm and btnAbort. btnConfirm's width is not set, so it autosizes to fit.
I want to have btnAbort to be the same width as btnConfirm.

Problem: Both buttons are in an initially invisible panel, which is shown by a button click in an update panel. That means, that initially the buttons don't exist on the page.

There are solutions, but they usually apply to always visible controls as far as I see it. Solutions I found/tried are

Set fixed width to both buttons
I don't want that, because I can't be sure how large fonts are going to be.

Set width in Code Behind
I tried setting the width of btnAbort in code-behind. I tried it in Page_Load as well as in the Button_Click handler, that shows the panel

pnlConfirm.Visible = true;
btnAbort.Width = btnConfirm.Width;

However, btnConfirm.Width is still empty even when it is visible.

Set the width through JavaScript
I added a script to the start of the page

<script type="text/javascript">
    var Abortbtn = document.getElementById("<%= btnAbort.ClientID %>");
    var Confirmbtn = document.getElementById("<%= btnConfirm.ClientID %>");
    Abortbtn.style.width = Confirmbtn.style.width;
</script>

However, from debugging in the browser it seems that Abortbtn and Confirmbtn are always zero (due to being invisible I presume), and the script is not executed again, when the UpdatePanel is updated to show the panel.

Binding the width property
I changed the btnAbort markup to bind the Width property to the other button

<asp:Button runat="server" Width="<%# btnConfirm.Width %>" ID="btnAbort" Text="Abort" OnClick="Abort_Clicked" />

I called Page.DataBind() in Page_Load. This didn't seem to change anything (possibly, since the Width property of btnConfirm is never set in the first place).

Now I'm out of ideas. Can this be done to keep the dimensions of the controls dynamic, or should I just set them to fixed width and be done with it?

Answer 1

You need to run your JavaScript code after the UpdatePanel updates. You can use the following code:

<script type="text/javascript">
    function BeginRequestHandler(sender, args) {
        //code that runs when an UpdatePanel starts refreshing
    }

    function EndRequestHandler(sender, args) {
        //code that runs when an UpdatePanel has finished refreshing.
        var Abortbtn = document.getElementById("<%= btnAbort.ClientID %>");
        var Confirmbtn = document.getElementById("<%= btnConfirm.ClientID %>");

        // If this is true, both buttons exist in DOM
        if(Abortbtn != null && Confirmbtn != null) {
            Abortbtn.style.width = Confirmbtn.offsetWidth+"px";
        }
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
</script>

With the above code the BeginRequestHandler function is called every time when an UpdatePanel starts updating and the EndRequestHandler function is called every time when an UpdatePanel has updated.

Since these handlers will be triggered for any UpdatePanel gets updated, you will probably need to have some check to avoid possible errors.