javascript - Set CSS table height to x number of rows heights combined -
i doing 'quick' css fix 1 of our ocd product owners, have table 500px in height, displays no rows thousands, overflow set scroll can scroll down list of items.
each row/item has initial height of *26px, not truncate information - po not want truncation. height determined how big description or how detail wish apply.
on initial page load, if there row or 2 taller neighbours line items don't sit flush within table. (you can imagine happens inside of ocd when tables don't sit flush)
the way can see myself getting right, use js/jquery set table height first 20 of children's heights - since heights vary depending on how many lines there / temperature of day / number of beers have had
something this:
$(document).ready(function(){ $("#push_state_container").height( $(".list_box").height() + 50); }); this should set outside containers height height of div holds items plus 50px. need find heights of first 20 items within .list_box find height , add 50px that.
before stupid , complex hoping there better way of doing this? reservation have using jquery here #table_name hook lot of crazy coffee script, , afraid going conflict somehow.
here css table
#push_state_container { height: 500px; width: 1116px; position: relative; border: 1px solid #ccc; > div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-transition: left 0.8s ease; -moz-transition: left 0.8s ease; -ms-transition: left 0.8s ease; -o-transition: left 0.8s ease; transition: left 0.8s ease; .loading { text-align: center; padding-top: 180px; font-size: 150%; color: #666 ; background: url(/assets/spinner.gif) no-repeat 490px 183px; } .container { position: relative; height: 100%; .list_box_header { border-width: 0 0 1px 0; } .list_box { border-width: 1px 0 0 0; height: 450px; > div:nth-child(even) { background: #eef8ff; } > div.hovered_item:nth-child(even) { background: #ccc; } .selected_item { background: #fff; color: #111; &.hovered_item { background-color: #ddd; } } } .bottom_links, .bottom_buttons { position: absolute; display: block; height: 2.2em; background: #eee; background: rgba(238, 238, 238, 0.95); border-top: 1px solid #ddd; width: 100%; bottom: 0; left: 0; } .bottom_buttons { height: 2.3em; padding: 0.2em 0 0.2em 0.5em; div.text, a.undo { display: inline-block; } } } } .right.float_above { position: absolute; top: -2em; right: 0; { font-weight: normal; font-size: 80%; } } } the #push_state_container outside table has fixed height of 500px, .list_box div houses line items , has set height of 450px, can see color's nth-child elements.
i hoping there way jsfiddle
taking account there undetermined number of items , not one.
you can iterate through first 20 rows , heights. selector should not "conflict" unless else setting height on wrapper. aren't setting listeners or anything. there might issue timing; see have spinner css - need happen after content populated.
please see demo below. note html , css demo only.
(function() { var heights = 0, $rows = $("table.scrolling tr"), len = $rows.length, number_rows_to_show = 10; for(var = 0; < number_rows_to_show && < len; i++) { heights += $rows.eq(i).height(); } $rows.closest('.wrapper').height(heights); }());body { font-family: sans-serif; font-size: 12px; line-height: 1.5; } table { border-collapse: collapse; } td { border: 1px solid #000; min-height: 18px; /* 1 line of text */ padding: 5px 10px; text-align: top; } td:first-child, td:last-child { white-space: nowrap; /* wrapping happening in middle row */ } .wrapper { height: 190px; /* assuming rows 1 line, show first 10 rows */ overflow-y: auto; background: #eee; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <table class="scrolling"> <tr> <td>condimentum</td> <td>suspendisse eleifend suspendisse commodo iaculis</td> <td>elementum parturient</td> </tr> <tr> <td>a cum nulla</td> <td>inceptos integer platea nam vel nullam volutpat parturient habitant litora consectetur. taciti eros potenti adipiscing a mi augue auctor rhoncus feugiat fringilla nulla maecenas ipsum vestibulum eget</td> <td>cubilia consectetu</td> </tr> <tr> <td>eu parturient.</td> <td>condimentum posuere integer in nam orci phasellus nisi. praesent</td> <td>sed aptent enim</td> </tr> <tr> <td>rhoncus nisi parturient</td> <td>quisque @ parturient nec mauris odio vestibulum montes risus aliquam consectetur quam integer id elit. parturient non egestas sagittis eget eleifend adipiscing parturient blandit aptent adipiscing quis egestas condimentum adipiscing facilisi nam. bibendum ridiculus parturient laoreet mi vivamus senectus consectetur</td> <td>nascetur rhoncus</td> </tr> <tr> <td>imperdiet semper</td> <td>a eu et quis nibh arcu natoque dui dapibus. condimentum at</td> <td>lacus nostra sem molestie</td> </tr> <tr> <td>ullamcorper dis nullam torquent</td> <td>nisi parturient. gravida dolor hac phasellus euismod dictum</td> <td>eleifend commodo parturient</td> </tr> <tr> <td>dictumst pharetra parturient enim potenti natoque et.</td> <td>inceptos aptent varius convallis non magnis dignissim pulvinar</td> <td>vestibulum</td> </tr> <tr> <td>scelerisque tellus</td> <td>neque orci curabitur consectetur justo taciti adipiscing id elementum</td> <td>ullamcorper ad mus</td> </tr> <tr> <td>facilisi ac. felis venenatis</td> <td>vestibulum tincidunt pharetra euismod natoque et in risus.</td> <td>litora auctor </td> </tr> <tr> <td>elit suspendisse</td> <td>himenaeos est orci hac malesuada urna sed vehicula a magna vestibulum a</td> <td>hac diam.</td> </tr> <tr> <td>dolor quis aptent</td> <td>consectetur porttitor diam euismod fringilla nisl donec a vestibulum</td> <td>egestas tellus</td> </tr> <tr> <td>vestibulum velit</td> <td>tincidunt elit facilisis donec et est. consequat urna sagittis dis ut augue cras</td> <td>penatibus aliquam</td> </tr> <tr> <td>suspendisse ante vestibulum</td> <td>a scelerisque taciti nisl ac ac a taciti odio imperdiet imperdiet id sapien.</td> <td>vestibulum est est</td> </tr> <tr> <td>fermentum rutrum auctor</td> <td>ac consequat sem ad ligula suspendisse molestie euismod ac vestibulum felis. dignissim adipiscing</td> <td>parturient sociis quam</td> </tr> <tr> <td>dictumst. quam aliquam</td> <td>nibh ullamcorper etiam varius habitasse venenatis facilisis scelerisque.</td> <td>vitae ultricies sed himenaeos</td> </tr> <tr> <td>ultrices pretium lacus</td> <td>viverra aliquam parturient mattis euismod hac eu phasellus semper. gravida cursus diam suscipit varius</td> <td>lobortis inceptos dictumst</td> </tr> <tr> <td>purus facilisis habitant nam.</td> <td>malesuada mi ornare velit mi dictumst potenti ut scelerisque id himenaeos class enim a</td> <td>suspendisse habitant</td> </tr> <tr> <td>nisl ad lorem adipiscing ad</td> <td>feugiat lacus et consectetur parturient lacinia nam iaculis suspendisse parturient parturient</td> <td>a vestibulum vel id potenti</td> </tr> </table> </div> <p>felis dis posuere lacinia etiam taciti adipiscing pulvinar auctor consectetur neque eu commodo congue malesuada parturient ullamcorper facilisi leo donec nisi. eu ante habitasse in ut parturient vestibulum aliquet vivamus facilisi maecenas non cubilia parturient pulvinar libero nisi rhoncus taciti duis vel elit sociis. cras ullamcorper tempor diam est nunc nunc scelerisque aptent sit ullamcorper blandit potenti montes vulputate lacus vestibulum rutrum. suspendisse parturient vestibulum @ et aptent mus nisl proin et habitant vestibulum potenti lacinia consequat dignissim velit in euismod parturient a. parturient eleifend ullamcorper vivamus odio parturient vestibulum ullamcorper sociis sem adipiscing fusce ullamcorper dolor laoreet molestie libero tristique ac vehicula turpis tempor accumsan laoreet duis suspendisse.</p>
Comments
Post a Comment