个人中心
gpt4 book ai didi

javascript - Bootstrap : how to make scrollable list with fixed height in percents

转载 作者：行者123 更新时间：2023-11-28 08:15:47 24 4
gpt4 key购买 nike

我想让我的网络应用程序看起来很漂亮，所以我想使用 Bootstrap。这是当前站点的屏幕截图:screenshot of current site

请注意这两个列表:“搜索结果”和“已选择”- 它们是可滚动的并且具有固定高度(窗口高度的 35%)。

如何使用 Bootstrap 制作具有固定(百分比)高度的完全相同的可滚动列表？ (除了这些列表之外的所有内容都适用于 Bootstrap。)

当前的“旧”版本:

<body>
<div id="map-canvas"></div>
<div id="over-map-canvas">
    <div id="div-type-select">
        <select id="select-type-select">
            <option value="genotyping">Genotyping</option>
            <option value="full genomes">Full genomes</option>
            <option value="mtDNA">mtDNA</option>
            <option value="Y-chromosome">Y-chromosome</option>
        </select>
    </div>
    <input type="text" id="search" placeholder="Search">
    <script>
        document.getElementById('search').addEventListener('keypress', function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                search();
            }
        });
    </script>
    <div id="div-age-input">
        Age (years before present):
        <input type="text" id="age-from" placeholder="0">
        <script>
            $('#age-from').on("input", function() {
                $( "#slider-range" ).slider('values', 0, $( "#age-from" ).val());
            });
        </script>
        <input type="text" id="age-to" placeholder="80000">
        <script>
            $('#age-to').on("input", function() {
                $( "#slider-range" ).slider('values', 1, $( "#age-to" ).val());
            });
        </script>
    </div>
    <div id="slider-range"></div><br>
    <div id="div-label-found-list>"><b>Search results:</b><br></div>
    <div id="div-sample-list"><ol id="ol-found-sample-list" type="1"></ol></div>
    <div id="div-found-menu"><a href="#" onclick="javascript:select_all_found();">Select all</a></div>
    <div id="div-label-selected-list>"><b>Selected:</b><br></div>
    <div id="div-sample-list-2"><ol id="ol-selected-sample-list" type="1"></ol></div>
    <div id="div-selected-menu">
        <a href="#" id="a-group-selected" onclick="javascript:selectedPopulations = !selectedPopulations; update_selected_list_view();">Populations</a>
        <a href="#" onclick="javascript:clear_selected();">Clear</a>
    </div>
    <div id="div-analysis-menu">
        <a href="#" onclick="javascript:pca();">PCA</a>
        <a href="#" onclick="javascript:clear_selected();">ALDER</a>
    </div>
</div>
</body>

还有一个"new"版本:

<body>
<div id="map-canvas" class="col-md-9"></div>

<div id="menu" class="col-md-3">
    <br>
    <select id="select-type-select" class="form-control">
        <option value="genotyping">Genotyping</option>
        <option value="full genomes">Full genomes</option>
        <option value="mtDNA">mtDNA</option>
        <option value="Y-chromosome">Y-chromosome</option>
    </select>

    <br>
    <div class="form-group">
            <input type="text" class="form-control" id="search" placeholder="Search">
            <script>
                document.getElementById('search').addEventListener('keypress', function(event) {
                    if (event.keyCode == 13) {
                        event.preventDefault();
                        search();
                    }
                });
            </script>
    </div>

    <h5 class="bold">Search results:</h5>
        <ul id="ol-found-sample-list" class="scrollable-list"></ul>

    <br>
    <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="submit" id="like" class="btn btn-default">PCA</button>
            </div>
            <div class="btn-group">
                <button type="submit" id="nope" class="btn btn-default">ALDER</button>
            </div>
    </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

最佳答案

这可以很简单:

        #menu {
            display:flex;
        }

        #menu .grow {
            flex-grow:1;
        }


<div id="menu" class="col-md-3">
  <div>
    <select id="select-type-select" class="form-control">
        <option value="genotyping">Genotyping</option>
        <option value="full genomes">Full genomes</option>
        <option value="mtDNA">mtDNA</option>
        <option value="Y-chromosome">Y-chromosome</option>
    </select>

    <div class="form-group">
     <input type="text" class="form-control" id="search" placeholder="Search">
            <script>
                document.getElementById('search').addEventListener('keypress', function(event) {
                    if (event.keyCode == 13) {
                        event.preventDefault();
                        search();
                    }
                });
            </script>
    </div>
  </div>
  <div class="grow">
    <h5 class="bold">Search results:</h5>
    <ul id="ol-found-sample-list" class="scrollable-list">

        </ul>
  </div>
  <div class="grow">
    <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="submit" id="like" class="btn btn-default">PCA</button>
            </div>
            <div class="btn-group">
                <button type="submit" id="nope" class="btn btn-default">ALDER</button>
            </div>
    </div>
  </div>
</div>

flexbox 指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

并使用 autoprefixer 或类似的东西来支持前缀语法和旧语法:

https://github.com/postcss/autoprefixer

关于javascript - Bootstrap : how to make scrollable list with fixed height in percents，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28999878/

24 4 0
文章推荐： c++ - 从 std::map 中删除动态分配的内存
文章推荐： c++ - 建立堆程序
文章推荐： javascript - 采用 ISO8601 日期格式的两个日期之间的天数
文章推荐： 不同文件之间二维矩阵的c++下标运算符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com