html - jqxListBox doesn't fit its container -
i'm making small website uses jqxlistbox display list of item. actually, default, doesn't auto resize fit container. container's inner height , set jqxlistbox, don't know why jqxlistbox gets larger container.
here code :
var wordselectionheight = $("#wordselectionarea").innerheight(); $("#lstwords").jqxlistbox({ height:wordselectionheight}); ->wordselectionarea div, size 500px (this size not fixed). ->lstwords jqxlistbox.
and result: 
scrollbars still appears.
can me please ? thank you.
p/s: if needs see code, here :
<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 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/ /* event fired when document has been loaded successfully. */ $(document).ready(function(){ // generate random background. generatebackground(); var wordslist = []; (var = 0; < 100; i++){ wordslist.push("1"); } updatelistboxsource("#lstwords", wordslist); resizechildrenelements(); }); function resizechildrenelements(){ // resize main table new window. resizemaintable(); // resize words area. resizewordsarea(); } /* event fired when window 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 make fit parent background. */ function resizewordsarea(){ var wordselectionheight = $("#wordselectionarea").innerheight(); $("#lstwords").jqxlistbox({ height:wordselectionheight}); } /* generate random background each time page 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 list. var generatedbackgroundindex = generaterandomnumber(backgroundimages.length); $("#htmlbody").attr("background", backgroundimages[generatedbackgroundindex]); } /* generate random number 0 maximum value. */ function generaterandomnumber(maximumvalue){ var randomnumber = math.floor(math.random()*maximumvalue); return randomnumber; } /* resize main table make 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>
after little time, realized set width , height of jqxlistbox percentage format.
$(elementid).jqxlistbox({ source: itemsource, width:"100%", height:"100%"}); my problem solved. hope people :)
Comments
Post a Comment