:disable_with but don't resize

Question

Anyone familiar with the :disable_with option will know that it gets resized on click to accomodate the new text entering the button. I'd like to have the button keep its original size regardless of the button's new content. Anyone know a way to do that?

Thanks

Answer 1

When you are using the :disable_with option, you are using the Rails Unobtrosive Javascript driver, jquery-ujs since Rails 3.1 which calls the data-disable-with data handler here:

/**
 * disable-with handlers
 */
var disable_with_input_selector = 'input[data-disable-with]';
var disable_with_form_selector = 'form[data-remote]:has(' + disable_with_input_selector + ')';

$(disable_with_form_selector).live('ajax:before', function () {
    $(this).find(disable_with_input_selector).each(function () {
        var input = $(this);
        input.data('enable-with', input.val())
             .attr('value', input.attr('data-disable-with'))
             .attr('disabled', 'disabled');
    });
});

$(disable_with_form_selector).live('ajax:complete', function () {
    $(this).find(disable_with_input_selector).each(function () {
        var input = $(this);
        input.removeAttr('disabled')
             .val(input.data('enable-with'));
    });
});

If you'll notice, nothing is re-sizing your button here. The expansion is most likely caused by the extra text, although it may be caused by some default jQuery CSS attached to the disabled attribute (I haven't actually checked but this seems very unlikely). I suggest writing rigid CSS rules to keep the box from re-sizing or doing anything else you dislike. Either way this will fix your problem.

Answer 2

A snippet of CS to keep the button the same width on saving:

btn = 'input[data-disable-with]'
frm = 'form[data-remote]:has(' + btn + ')'

$(frm).on 'ajax:before', ->
    $(@).find(btn).each ->
        input = $(@)
        input.css('width', input.css('width'))

$(frm).on 'ajax:complete', ->
    $(@).find(btn).each ->
        $(@).css('width', '')

Thanks to dward.