时间戳

首页 > 解决方案 > 根据周围的 div 设置 Flask wtforms Textarea 的大小

javascript - 根据周围的 div 设置 Flask wtforms Textarea 的大小

问题描述

我正在创建一个 UI，其中并排显示两个版本的文本，用户可以使用 wtform textarea 编辑右侧的文本。

    <div class="row-fluid" style="border-bottom:1px solid #ccc;">
        <div class="col-sm-6" style="padding-top:20px; padding-right:20px; border-right: 1px solid #ccc;">
            <p><b>元の文章</b></p>
            {% for sentence in sentences %}
                {% for word in sentence %}
                    <a href="javascript:void(0);" id="popover" data-toggle="popover" data-placement="top" title="{{ word.0 }}&#013;{{ word.1 }}">{{ word.0 }}</a>
                {% endfor %}
                <br><br>
            {% endfor %}
        </div>
        <div class="col-sm-6" style="padding-top:20px;">
            <form class="form" method="post" role="form">
                {{ form.hidden_tag() }}
                {{ wtf.form_errors(form, hiddens="only") }}
                {{ wtf.form_field(form.edited_text, rows='1000') }}
                {{ wtf.form_field(form.submit) }}
            </form>
        </div>
    </div>

我正在尝试将rowstextarea 的参数设置为等于左侧列 div 的长度。这可能吗？

谢谢！

编辑

我想出了一个使用 jQuery 的 hacky 解决方案：

<script>
        window.onload = function() {
            if (window.jQuery) {
                var height = $("#originalText").height();
                $(".form-group").height(height);
                $("#edited_text").height(height-40);
            }
        };
</script>

我将 ID: originalText 添加到第一个 div 中，然后继续使用该值编辑表单容器的高度参数。

标签： javascripthtmlcss

解决方案

推荐阅读