Динамически изменяемая высота предмета по длине текста

Question

Я работаю с cordova и jquery mobile, iam работает над приложением, где я могу отправлять уведомления. На панели уведомлений я показываю все полученные уведомления.

Так HTML разметка этого уведомления, как это:

for(var count = 0; count < info.data.length; count++){ 
    var shortmessage = info.data[count][3]; 
    var category = info.data[count][4]; 
    var typeOf = info.data[count][5]; 
    var style = ''; 

    if(typeOf === "warning"){ 
     imgPath = 'img/icons/alarm.png'; 
    } else { 
     imgPath = 'img/icons/alert.png'; 
    } 

    console.log(shortmessage, shortmessage.length); 

    // if long message, set the style 
    if (shortmessage.length > 40){ 
     style = 'min-height: 70px'; 
    }else if (shortmessage.length > 65){ 
     style = 'min-height: 80px !important'; 
    }else if (shortmessage.length > 75){ 
     style = 'min-height: 100px !important'; 
    } 

if (category === 'vertrek'){ 
       departureHtml = ` 
       ${departureHtml} 
       <div class='notification-item' style='${style}'> 
        <div class='ui-grid-a notification-grid'> 
         <div class='ui-block-a'> 
          <img class='notification-image' src='${imgPath}'> 
         </div> 
         <div class='ui-block-b'> 
          <span class='notification-text'>${shortmessage}</span> 
         </div> 
        </div> 
       </div>`; 

      $('.departure-notification-append').empty().prepend(departureHtml); 
     } 

     if (category === 'inchecken'){ 
      incheckHtml = ` 
       ${incheckHtml} 
       <div class='notification-item' style='${style}'> 
        <div class='ui-grid-a notification-grid'> 
         <div class='ui-block-a'> 
          <img class='notification-image' src='${imgPath}'> 
         </div> 
         <div class='ui-block-b'> 
          <span class='notification-text'>${shortmessage}</span> 
         </div> 
        </div> 
       </div>`; 

      $('.check-in-notification-append').empty().prepend(incheckHtml); 
     } 

Эти две из 5 категорий, но, кажется, чтобы увидеть, что она больше, чем 40, чем он присваивает height of 70px всем из notification-items. Но чем это не меняет высоту сообщений больше, чем 65 и 75.

Так что мой вопрос, как я могу динамически установить высоту notification-item на основе текста внутри notification-text

Answer 1

Настройка height: auto позволит деталям динамически изменять размер, чтобы занять ту высоту, которая необходима для визуализации их содержимого.

Я бы использовал прокладку для достижения дополнительных манипуляций с высотой, а не с помощью свойства высоты.