изменить размер div после установки innerHTML с помощью mootools

Question

Я использую mootools 1.2 на простой странице. Есть div, который отображает форму (назовите ее formdiv), которая отправляется через JS / ajax. Запрос ajax возвращает некоторые данные «подтверждающее сообщение».

Тем не менее, div div начинается с высоты 500 пикселей, чтобы вместить элементы формы. Когда запрос ajax возвращает возвращаемые данные переменной длины («подтверждено для отправки!»), Div остается высотой 500px, оставляя много дополнительного пространства.

У меня вопрос: есть ли способ вернуть div, чтобы он соответствовал новому контенту после обновления контента с помощью innerHTML?

Спасибо

РЕДАКТИРОВАНИЕ: добавить, что данные, возвращаемые вызовом Ajax, могут иметь переменную длину - поэтому я не могу предположить, что это будет определенная высота, а затем сбросить div на эту высоту.

Answer 1

Хорошо, я понимаю, что это как год с опозданием, но я столкнулся с этим вопросом, пытаясь найти сценарий, чтобы сделать именно это.Это была отличная отправная точка, но я чувствовал, что должен поделиться выбранным мной методом:

1. Получить текущую фактическую высоту $('element').

   h.before = $('element').getSize().y;
   

2. Fx.Morph не может обработать установку height на 'auto', поэтому сначала вы должны установить height: 'auto' на $('element') (если это еще не было), а затем установить HTMLна новый контент.Это позволит вам получить высоту нового содержимого.

   $('element').setStyle('height', 'auto');
   $('element').set('html', "Some other content.<br/>Very short.");
   h.after = $('element').getSize().y;
   

3. Сбросить высоту и затем запустить Fx.Morph с h.after.

    $('element').setStyle('height', h.before);
   
    var myEffect = new Fx.Morph('element', {
        onComplete: function() {
            $('test').setStyle('height', 'auto');
        }
    });
   
    myEffect.start({'height': h.after});
   

Вы можете проверить полный код здесь: http://jsfiddle.net/cd4R9/

Пожалуйста, поймите, что этот метод является очень простым, и многое нужно сделать, чтобы этот сайт был готов.Например, если у вашего $('element') есть отступы, вам придется учесть это или использовать свойство CSS box-sizing: border-box;.Надеюсь, это поможет.

Answer 2

Если ваш div начинается с предопределенной высоты с использованием CSS, то все, что вам нужно сделать, это установить его высоту на auto или полностью очистить стили, когда они были встроены.

Проверьте этот JSFiddle (здесь работает с jQuery, но это не имеет значения, когда речь заходит об отображении в браузере div, о котором идет речь)