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

Question

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

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

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

Спасибо

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

Answer 1

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

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

Answer 2

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

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;, Надеюсь это поможет.