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

Question

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

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

Мой вопрос: есть ли способ привязать div назад, чтобы он соответствовал новому контенту после обновления содержимого с помощью innerHTML?

Благодаря

Редакцией: добавить, что данные, возвращаемые вызов Ajax может быть переменной length-- поэтому я не могу предположить, что это будет определенная высота, а затем сбросить DIV на эту высоту.

Answer 1

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

Проверить this 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;. Надеюсь это поможет.