个人中心
gpt4 book ai didi

html - jqxListBox 不适合它的容器

转载 作者：太空宇宙 更新时间：2023-11-04 11:48:16 25 4
gpt4 key购买 nike

我正在制作一个使用 jqxListBox 来显示元素列表的小型网站。实际上，默认情况下，它不会自动调整大小以适应其容器。我得到容器的内部高度并设置为 jqxListBox，但我不知道为什么 jqxListBox 变得比它的容器大。

这是我的代码:

var wordSelectionHeight = $("#wordSelectionArea").innerHeight();
$("#lstWords").jqxListBox({ height:wordSelectionHeight});

->wordSelectionArea是一个div，大小为500px(这个大小不固定)。->lstWords 是 jqxListBox。

我得到了这个结果: Scrollbar still appears

滚动条仍然出现。

有人可以帮我吗？谢谢。

P/s:如果有人需要看我的代码，就在这里:

<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <link rel="stylesheet" type="text/css" href="css/special_box.css">
    <link rel="stylesheet" type="text/css" href="lib/jqwidgets/styles/jqx.base.css">
    <script type="text/javascript" src="lib/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxlistbox.js"></script>
</head>

<body id="htmlBody">
    <div style="overflow:hidden;">
    <table id="mainTable" class="main_container" border="1">
        <tr>
            <th width="100%" height="32px" colspan="2" align="center" valign="middle" bgcolor="#F0F0F0" scope="col">Smart Dict</th>
        </tr>
        <tr height="100%">
            <td id="wordsArea" align="left" valign="top" style="margin:0px; padding:0px; width:15%; height:100%;">
                <div id="wordInputArea" style="margin:0px; padding:0px;">
                    <input type="text" style="width:100%"/>
                </div>
                <div id="wordSelectionArea" style="height:100%; overflow:hidden;">
                    <div id="lstWords">
                    </div>
                </div>

                    <!-- <select id="lstWords" size="5" style="padding:0px; width:100%; margin:0px; overflow:hidden;">
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                    -->

            </td>
            <td width="80%" height="100%" colspan="2" align="left" valign="top" style="margin:0px; padding:0px; overflow:hidden;">
                <div style="height:100%;">

                    <div id="divSelectedWordTitle" style="height:50px; background-color:black; color:white; line-height:50px; padding-left:25px; font-size:25px; font-weight:bold; margin-bottom:20px;">Hello World</div>

                    <div id="divGeneralInfomation" style="background-color:white;">
                        <div id="divMeaningSectionHeader" style="display: table-cell; height:32px; line-height:32px; vertical-align:middle;">
                            <img src="resource/icon/arrow.png"></img>
                            <label style="padding-top:3px; vertical-align:top;">Meaning</label>
                        </div>
                        <div id="divMeaningSectionBody" style="height:auto;">This word has no meaning</div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    </div>
</body>

<script>

// Constants
const siteWidth     = 1024;
const siteHeight    = 768;

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  EVENT  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/*
    This event is fired when document has been loaded successfully.
*/
$(document).ready(function(){

    // Generate a random background.
    generateBackground();

    var wordsList = [];

    for (var i = 0; i < 100; i++){
        wordsList.push("1");
    }

    updateListBoxSource("#lstWords", wordsList);

    resizeChildrenElements();

});

function resizeChildrenElements(){

    // Resize the main table by new window.
    resizeMainTable();

    // Resize the words area.
    resizeWordsArea();
}
/*
    This event is fired when window is being resized.
*/
$(window).resize(function(){

    /*
    var sizeInfo = "";
    sizeInfo += "Width = ";
    sizeInfo += $(window).width();
    sizeInfo += " ";
    sizeInfo += "Height = ";
    sizeInfo += $(window).height();
    console.log(sizeInfo);
    */
    resizeChildrenElements();
});

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> FUNCTION <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/*
    Resize words area to make it fit to parent background.
*/
function resizeWordsArea(){
    var wordSelectionHeight = $("#wordSelectionArea").innerHeight();
    $("#lstWords").jqxListBox({ height:wordSelectionHeight});

}

/*
    Generate random background each time page is loaded.
*/
function generateBackground(){

    // List of background.
    var backgroundImages = [];
    backgroundImages.push("resource/background/1.png");
    backgroundImages.push("resource/background/2.jpg");
    backgroundImages.push("resource/background/3.gif");
    backgroundImages.push("resource/background/4.gif");

    // Generate random background from list.
    var generatedBackgroundIndex = generateRandomNumber(backgroundImages.length);
    $("#htmlBody").attr("background", backgroundImages[generatedBackgroundIndex]);
}

/*
    Generate random number from 0 to a maximum value.
*/
function generateRandomNumber(maximumValue){
    var randomNumber = Math.floor(Math.random()*maximumValue);
    return randomNumber;
}

/*
    Resize the main table to make it fit browser window.
*/
function resizeMainTable(){
    var windowHeight    = $(window).innerHeight();
    var windowWidth     = $(window).width();

    $("#mainTable").width(windowWidth);
    $("#mainTable").height(windowHeight);
}

/*
    Update jqxListBox item source.
*/
function updateListBoxSource(elementId, itemSource){

    try
    {
        $(elementId).jqxListBox({   source: itemSource,
                                    theme:"office"});
    }
    catch (exceptionInfo){}
}

</script>

最佳答案

过了一会儿，我意识到我可以将 jqxListBox 的宽度和高度设置为百分比格式。

$(elementId).jqxListBox({   source: itemSource,
                            width:"100%",
                            height:"100%"});

我的问题解决了。希望它能帮助一些人:)

关于html - jqxListBox 不适合它的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30817299/

25 4 0
文章推荐： c++ - 这是什么 reinterpret_cast 约定？它比 static_cast 好吗？
文章推荐： java - 如何从 MIB 获取 DisplayString 大小约束？
文章推荐： Java 对具有两个泛型参数的类的泛型类型检查应该只包含相同类型的类
文章推荐： c++ - OpenGL 'reshape()' 功能视口(viewport)边框背景
太空宇宙
个人简介

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

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