JQuery Mobile - 单击自定义列表视图高度更改

I have a JQuery Mobile listview with a custom item height (50px). Whenever the item is clicked, its height changes. How can I fixate the custom height?

我有一个自定义项目高度(50px)的JQuery Mobile列表视图。每当单击该项目时,其高度会发生变化。如何固定自定义高度?

Fiddle: http://jsfiddle.net/3gnvhxth/6/

I am using JQuery Mobile v1.45 and JQuery 1.11.1.

我正在使用JQuery Mobile v1.45和JQuery 1.11.1。

Before click:

After click:

HTML:

<ul data-role="listview" data-inset="true">
    <li class="custom_item">
        <a class="custom_link" href="http://google.com" target="_blank">
            <img class="custom_image" src="http://placehold.it/120x120&text=image1">
            Click Item 1
        </a>   
    </li>
        <a class="custom_link" href="http://google.com" target="_blank">
            <img class="custom_image" src="http://placehold.it/120x120&text=image2">
            Click Item 2
        </a>   
    </li>
    <li class="custom_item">
        <a class="custom_link" href="http://google.com" target="_blank">
            <img class="custom_image" src="http://placehold.it/120x120&text=image3">
            Click Item 3
        </a>   
    </li>
</ul>

CSS:

.custom_item {
    height: 50px;
    max-height: 50px;
}
.custom_link {
    padding-left: 50px !important;
    height: 50px;
    max-height: 50px;
}
.custom_image {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
}

2 个解决方案

#1

Luis is right about the min-height from the jQM CSS file. You need to override it, but also remove top and bottom padding on the link as that causes the height issue on click:

Luis对jQM CSS文件的最小高度是正确的。您需要覆盖它,但也删除链接上的顶部和底部填充,因为这会导致单击时出现高度问题:

.custom_link {
    padding-left: 50px !important;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 50px;
    max-height: 50px;
    min-height: 0 !important;
    height: 50px;
}

Updated FIDDLE

Setting line-height keeps the text vertically centered. If that is not important to you, just remove it.

设置行高可使文本垂直居中。如果这对您不重要,请将其删除。

#2

You have a default min-height in your css that causing the problem

您的css中有一个默认的最小高度导致问题

CSS

.ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb {
    min-height: 3.625em; // Remove this or adjust to your needs
    padding-left: 6.25em;
}