Question

我正在使用cordova和jquery mobile，我正在开发一个可以发送通知的应用程序。在通知面板中，我显示了收到的所有通知。

所以该通知的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

设置{{1}}将允许项目动态调整大小以占用呈现其内容所需的任何高度。

我会使用填充来实现额外的高度操作，而不是使用高度属性进行修改。

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

1 个答案: