JavaScript生成的Materialise卡片显示问题

标签 javascript html django

我有一些渲染的卡片要显示在网站上。除第一个外,所有显示均正确。当您滚动页面时,第一张卡片的图像会滚动,它只占用图像空间的一半。其余卡完全没有问题。

<div class="parallax">
{% if object_list.count == 0 %}

Nothing found

{% else %}
<!--   Icon Section   -->
    <div class="row">
    {% for member in object_list %}

        <div class="col s12 m6 l3">
            {% if member.get_image_url %}
            <div class="card medium">
                <div class="card-image">
                    <img src="{{ member.get_image_url }}"/>
                </div>
                <div class="card-content">
                    <span class="card-title  activator">
                        {{ member.title }} <i class="material-icons right">more_vert</i>
                    </span>
                </div>

                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4"> {{member.title}} <i class="material-icons right">close</i></span>
                    <p>{{ member.summary}} </p>
                </div>

                <span class="btn btn-flat"> <a href="{{ member.slug }}/"> find out more </a></span>

            </div> <!-- #endcard -->
            {% endif %}
        </div> <!-- #end col -->

    {% endfor %}

    </div> <!-- #end row -->
    {% endif %}

</div>

我已经为 Materialise 卡改回原来的 CSS,仍然有同样的问题。鉴于所有卡片都共享相同的 HTML 代码块,不确定要更改哪些内容只会影响第一张卡片。而且,如果它有助于调试,我正在使用 Django 框架。有什么想法吗?

最佳答案

我通过删除 class="parallax"来修复它。我猜我的视差 CSS 有问题会解决的!

关于JavaScript生成的Materialise卡片显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56549736/

相关文章:

javascript - 使用 Node.js/Angular 对 Google 电子表格 JSON 的跨源请求

jquery - 如何使用 jQuery 在输入的 keyup 上从特定的 div 添加/删除类?

python - celery 节拍有时会停止工作

javascript - Nock 不会拦截对第 3 方的调用

javascript - 如何使用 php 和 javascript 将多个 div 转换为图像 (png/jpeg)?

Javascript 在文本中查找单词并动态改变颜色

html - 背景导航栏图像不显示

css - 如何在生产中找到django静态文件

python - Django 将所有具有不同外键 ID 的值求和,并使用相关表中的字段将它们压缩

javascript - IE9 Placeholder.js 错误