根据文本长度动态更改项目的高度

Question

I am working with cordova and jquery mobile, iam working on an app where I can send notifications. In the notification panel I show all recieved notifications.

So the html markup of that notification is like this:

 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);
        }

These are two of the 5 categories, but it seems to see that it is greater than 40 than it assigns the height of 70px to all of the notification-items. But than it doesn't change the height of messages greater than 65 and 75.

So my question is how can I dynamically set the height of a notification-item based on the text inside notification-text

Answer 1

Setting height: auto will allow items to dynamically resize to occupy whatever height is necessary to render their contents.

I would use padding to achieve additional height manipulations rather than mucking with the height property.