Sizing table with tablesorter and jquery layout - tablesorter
I'd like to use a tablesorter table inside the main (center) panel of a jquery layout panel. The width of the table works fine but getting the table to occupy the available height is not so obvious.
I have a basic example working below based on some trial and error, this is based on setting the max-height property of the tablesorter-scroller-table. It kind of works but gives unpredictable results; sometimes the table height is exactly that of the allowable height and sometimes there's a margin of up to 100 or so pixels.
Is there a more reliable and elegant way to tell the table to occupy the available vertical space?
<!DOCTYPE html>
<html>
<head>
<!--
-- Based on scroller widget demo at
-- http://mottie.github.io/tablesorter/docs/example-widget-scroller.html
--
-->
<meta charset="utf-8">
<title>Scroller Widget Test</title>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<script src="js/jquery-layout.js"></script>
<script src="tablesorter/js/jquery.tablesorter.js"></script>
<script src="tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="tablesorter/js/widgets/widget-scroller.min.js"></script>
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<link href="css/layout-default-latest.css" rel="stylesheet">
<link class="theme blue" rel="stylesheet" href="tablesorter/css/theme.blue.min.css">
<style id="css">
#fixed-columns-table tbody td {
/* force "Notes" column to not wrap, so we get a horizontal scrolling demo! (optional css) */
white-space: nowrap;
/* Add min column width, or "Index" column filter gets too narrow to use (optional css) */
min-width: 60px;
}
</style>
<script id="js">
$(function(){
$('#fixed-columns-table').tablesorter({
theme: 'blue',
widgets: ['scroller', 'zebra'],
widgetOptions : {
scroller_height : 200,
scroller_fixedColumns : 2
}
});
$('body').layout({
applyDefaultStyles: false,
north: {
resizable: false
},
south: {
resizable: false
}
});
adjustHeight();
});
function adjustHeight() {
var h = $("#mainAppArea").height();
var heightOffset = 150; // Trial and error
var newHeight = parseInt(h)-heightOffset;
$(".tablesorter-scroller-table").css({
height: '',
'max-height': newHeight + 'px'
});
$("#feedback").text("Got app height: " + h + ", set max-height to " + newHeight + "px");
}
</script>
</head>
<body onresize="adjustHeight()">
<div class="ui-layout-north no-print">
The Header
</div>
<div class="ui-layout-west no-print" style="padding: 0;">
The side menu
</div>
<div class="ui-layout-center" id="mainAppArea" style="overflow: hidden;">
<table id="fixed-columns-table">
<thead>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>ID</th>
<th>Address</th>
<th>State</th>
<th>Zip</th>
<th>Telephone</th>
<th>Email</th>
<th>Notes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>ID</th>
<th>Address</th>
<th>State</th>
<th>Zip</th>
<th>Telephone</th>
<th>Email</th>
<th>Notes</th>
</tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Sherry</td><td>Mills</td><td>223</td><td>3792 Sit Rd</td><td>NE</td><td>69836</td><td>(627) 124-8760</td><td>DRamirez#massa.ly</td><td>sagittis amet mattis facilisis vitae molestie nec dolor id sed</td></tr>
<tr><td>2</td><td>Markella</td><td>Lessenberry</td><td>895</td><td>5979 Sit Ln</td><td>VA</td><td>97761</td><td>(768) 233-5399</td><td>SPeltier#pulvinar.net</td><td>elementum nullam lacus elit magna libero sed dolor pulvinar orci</td></tr>
<tr><td>3</td><td>Lee</td><td>Trenkelbach</td><td>719</td><td>5656 Adipiscing Ave</td><td>ID</td><td>30972</td><td>(149) 293-0691</td><td>LSheppard#lectus.net</td><td>vestibulum at rutrum molestie convallis vestibulum nec egestas consequat vitae</td></tr>
<tr><td>4</td><td>Sherrye</td><td>Llc</td><td>908</td><td>2348 Pharetra St</td><td>UT</td><td>50740</td><td>(772) 682-4268</td><td>MAltar#turpis.io</td><td>sit elit consequat amet elit consectetur vestibulum vel quis consequat</td></tr>
<tr><td>5</td><td>Juanito</td><td>Lindall</td><td>534</td><td>5181 Lacus Ln</td><td>ID</td><td>71689</td><td>(528) 174-6999</td><td>CKeen#augue.ly</td><td>dui porttitor vestibulum mattis ipsum nunc et morbi dolor ipsum</td></tr>
<tr><td>6</td><td>Andre</td><td>Fuller</td><td>716</td><td>8224 Pulvinar Ave</td><td>WY</td><td>12382</td><td>(654) 593-0007</td><td>AMelvin#sed.net</td><td>dolor curabitur nec molestie lacus odio id velit sed neque</td></tr>
<tr><td>7</td><td>Sajid</td><td>Cattanach</td><td>997</td><td>3762 Ac Rd</td><td>WA</td><td>16719</td><td>(425) 909-2771</td><td>BMaas#ac.org</td><td>morbi tincidunt ac sollicitudin nec ac orci vitae donec non</td></tr>
<tr><td>8</td><td>Heidi</td><td>Rush</td><td>738</td><td>1425 Porta Rd</td><td>SD</td><td>14708</td><td>(341) 095-7183</td><td>DSchrag#sapien.net</td><td>nullam sed aliquam turpis et sagittis libero sed tellus dui</td></tr>
<tr><td>9</td><td>Ganesh</td><td>Comeau</td><td>385</td><td>2641 Hendrerit Dr</td><td>MT</td><td>66612</td><td>(201) 977-9765</td><td>SBurks#ipsum.ly</td><td>sit vestibulum ac pretium eget augue sit augue sagittis tellus</td></tr>
<tr><td>10</td><td>Regine</td><td>Marina</td><td>479</td><td>6204 Ac Rd</td><td>WI</td><td>55667</td><td>(824) 223-9924</td><td>VPeschke#pharetra.org</td><td>amet fringilla vitae tortor vestibulum egestas eget eget amet sed</td></tr>
<tr><td>11</td><td>Wichaya</td><td>Thomas</td><td>487</td><td>861 Risus Dr</td><td>KY</td><td>63224</td><td>(599) 823-8970</td><td>BMohamed#adipiscing.ly</td><td>placerat dolor pulvinar nec morbi amet porta sagittis lacus magna</td></tr>
<tr><td>12</td><td>Douglass</td><td>Holliday</td><td>488</td><td>8829 Sit Ave</td><td>IA</td><td>86970</td><td>(113) 897-8276</td><td>CLieb#convallis.io</td><td>dolor magna id amet lorem eros ipsum magna non aliquam</td></tr>
<tr><td>13</td><td>Prince</td><td>Schwartzberg</td><td>790</td><td>1757 Sit Ct</td><td>IL</td><td>94739</td><td>(299) 471-3039</td><td>DFavus#quis.org</td><td>magna tincidunt ipsum hendrerit ac vitae tortor consequat magna elit</td></tr>
<tr><td>14</td><td>Lola</td><td>Hensley</td><td>486</td><td>8159 Dui Rd</td><td>MN</td><td>88877</td><td>(788) 031-7392</td><td>MBradley#scelerisque.org</td><td>suspendisse donec placerat nec suspendisse lacus ipsum elementum at lorem</td></tr>
<tr><td>15</td><td>Dainius</td><td>Finn</td><td>355</td><td>6072 Massa Dr</td><td>VT</td><td>75787</td><td>(638) 345-2650</td><td>MWilcox#velit.ly</td><td>morbi pretium dui dolor elit sed non vestibulum sit dui</td></tr>
<tr><td>16</td><td>Aisha</td><td>Schuhmann</td><td>328</td><td>9709 Sagittis Ln</td><td>ND</td><td>44161</td><td>(147) 281-5251</td><td>GDech#mi.com</td><td>massa sed placerat libero egestas at massa sagittis libero orci</td></tr>
<tr><td>17</td><td>Maria</td><td>Peacock</td><td>269</td><td>2241 Amet Ave</td><td>MO</td><td>81339</td><td>(656) 079-5964</td><td>POliva#tincidunt.org</td><td>ac hendrerit molestie ipsum facilisis massa odio fringilla hendrerit neque</td></tr>
<tr><td>18</td><td>Otilia</td><td>Denbesten</td><td>778</td><td>1965 Nunc Ct</td><td>SC</td><td>98692</td><td>(985) 745-0452</td><td>SWieber#porttitor.net</td><td>aliquam orci odio id ac magna magna aenean sagittis lectus</td></tr>
<tr><td>19</td><td>Jian</td><td>Sanchez</td><td>796</td><td>6439 Sit Ln</td><td>OR</td><td>24879</td><td>(168) 754-6725</td><td>AVrtis#porttitor.net</td><td>sapien ipsum nullam pretium quis tincidunt tincidunt sit mattis porttitor</td></tr>
<tr><td>20</td><td>Tanny</td><td>Wieland</td><td>814</td><td>7331 Et Rd</td><td>SD</td><td>65216</td><td>(414) 322-1606</td><td>ACasariego#et.org</td><td>odio augue in id lacus tincidunt morbi tempor orci tincidunt</td></tr>
<tr><td>21</td><td>Alejandro</td><td>Sidaway</td><td>995</td><td>8125 Placerat Rd</td><td>VA</td><td>98301</td><td>(202) 112-1194</td><td>RHaag#nullam.ly</td><td>lacus aliquam et sagittis etiam aenean lorem ipsum non facilisis</td></tr>
<tr><td>22</td><td>Yolanda</td><td>Swanson</td><td>530</td><td>276 Amet Ct</td><td>VT</td><td>42999</td><td>(621) 796-4436</td><td>TDenard#lectus.gov</td><td>lacus vitae quis dui orci ipsum odio pulvinar et nunc</td></tr>
<tr><td>23</td><td>Azra</td><td>Filleul</td><td>443</td><td>499 Sagittis Dr</td><td>OK</td><td>59700</td><td>(485) 530-0532</td><td>LSwetland#consectetur.net</td><td>magna mattis sollicitudin placerat vel facilisis sed ac non et</td></tr>
<tr><td>24</td><td>Cassandra</td><td>Labrucherie</td><td>606</td><td>6849 Tellus Ct</td><td>SC</td><td>44245</td><td>(960) 044-9381</td><td>WLafave#lectus.io</td><td>ac nullam magna ante sapien tellus tincidunt eros magna sagittis</td></tr>
<tr><td>25</td><td>Theodore</td><td>Saver</td><td>150</td><td>5 Tincidunt Ave</td><td>IL</td><td>58210</td><td>(152) 001-4978</td><td>KTorres#sed.io</td><td>ac tincidunt nec rutrum pulvinar id aliquam placerat pharetra placerat</td></tr>
<tr><td>26</td><td>Susi</td><td>Murphy</td><td>900</td><td>1614 Hendrerit St</td><td>AZ</td><td>80212</td><td>(532) 030-5050</td><td>ZRingling#sit.io</td><td>quis odio et sapien sit amet eros et augue turpis</td></tr>
<tr><td>27</td><td>Corazon</td><td>Lawrence</td><td>577</td><td>3571 Facilisis Rd</td><td>CA</td><td>35195</td><td>(318) 200-2692</td><td>REckhart#scelerisque.io</td><td>tincidunt sit dolor mi donec magna massa vel suspendisse placerat</td></tr>
<tr><td>28</td><td>Khosrow</td><td>Fisher</td><td>802</td><td>4323 Tortor Ln</td><td>AK</td><td>38949</td><td>(493) 277-9670</td><td>FHarmati#magna.ly</td><td>lectus tortor ac ipsum sagittis lacus dolor ac fringilla nec</td></tr>
<tr><td>29</td><td>Melgema</td><td>Lopez</td><td>893</td><td>1738 Vestibulum Ln</td><td>MS</td><td>32638</td><td>(953) 255-2707</td><td>ABurgin#tortor.ly</td><td>molestie at vel at placerat pharetra consequat dolor nunc placerat</td></tr>
<tr><td>30</td><td>Chun</td><td>Lester</td><td>928</td><td>9681 Vestibulum Ct</td><td>ND</td><td>21333</td><td>(474) 719-0476</td><td>ETierney#pulvinar.gov</td><td>vestibulum ipsum tincidunt placerat eros turpis morbi ipsum sit malesuada</td></tr>
<tr><td>31</td><td>Dwayne</td><td>Balasubramanian</td><td>418</td><td>3129 Pharetra Dr</td><td>SD</td><td>57558</td><td>(457) 589-4620</td><td>ESyner#aenean.com</td><td>amet sit nec amet lectus augue consequat consectetur vel sed</td></tr>
<tr><td>32</td><td>Joshua</td><td>Williamson</td><td>702</td><td>6313 Vestibulum St</td><td>NJ</td><td>39057</td><td>(346) 084-7444</td><td>VFeldman#elit.ly</td><td>sit tempor at lacus libero lorem sit nullam tempor aliquam</td></tr>
<tr><td>33</td><td>Shawn</td><td>Dartmann</td><td>124</td><td>4892 Aliquam Rd</td><td>IA</td><td>17745</td><td>(500) 390-3779</td><td>RNesbitt#massa.net</td><td>sit sapien magna libero augue consectetur fringilla orci ac tortor</td></tr>
<tr><td>34</td><td>Rupa</td><td>Helgren</td><td>594</td><td>5944 Sed Ave</td><td>CO</td><td>96680</td><td>(174) 841-4348</td><td>FShebish#morbi.net</td><td>at elementum neque ac in consequat elementum magna vitae mattis</td></tr>
<tr><td>35</td><td>Gia</td><td>Marks</td><td>635</td><td>2519 Convallis Dr</td><td>GA</td><td>66324</td><td>(188) 657-9140</td><td>SForsyth#adipiscing.gov</td><td>pharetra pulvinar amet dui elementum suspendisse et odio tellus amet</td></tr>
<tr><td>36</td><td>Tyetha</td><td>Ahn</td><td>543</td><td>9900 Eros Ct</td><td>PA</td><td>53390</td><td>(482) 686-6141</td><td>LHobbs#non.io</td><td>pulvinar lorem quis fringilla eget velit sed augue rutrum augue</td></tr>
<tr><td>37</td><td>Gregory</td><td>Christine</td><td>527</td><td>751 Ipsum Rd</td><td>AK</td><td>44543</td><td>(258) 666-2073</td><td>HCrooker#donec.com</td><td>massa vitae dolor sollicitudin consectetur sollicitudin malesuada massa velit egestas</td></tr>
<tr><td>38</td><td>Yelena</td><td>Shanoski</td><td>646</td><td>1612 Donec Ave</td><td>KY</td><td>30729</td><td>(905) 301-3407</td><td>JMcmenamin#massa.gov</td><td>sapien rutrum adipiscing et sed sollicitudin vestibulum pharetra at neque</td></tr>
<tr><td>39</td><td>Thursday</td><td>Helm</td><td>666</td><td>5568 Nec Rd</td><td>NE</td><td>94390</td><td>(487) 403-7019</td><td>RMorin#sed.org</td><td>risus hendrerit sollicitudin vestibulum placerat lorem eros consequat lorem magna</td></tr>
<tr><td>40</td><td>Melinda</td><td>Oliva</td><td>525</td><td>6973 Rutrum Ct</td><td>IA</td><td>38519</td><td>(964) 234-5172</td><td>FStephens#in.com</td><td>dolor lacus nec odio in etiam facilisis lorem ipsum et</td></tr>
<tr><td>41</td><td>Latasha</td><td>Slocum</td><td>210</td><td>8374 Fringilla St</td><td>NV</td><td>23913</td><td>(678) 453-4263</td><td>JWelchert#id.gov</td><td>donec massa dolor elementum scelerisque risus lacus id lorem in</td></tr>
<tr><td>42</td><td>Kenneth</td><td>Zazzara</td><td>269</td><td>3364 Tempor Dr</td><td>MO</td><td>30642</td><td>(874) 633-3017</td><td>TGarayan#tincidunt.ly</td><td>sollicitudin nullam egestas aenean molestie velit nec sed tincidunt scelerisque</td></tr>
<tr><td>43</td><td>Francine</td><td>Daniels</td><td>366</td><td>2141 Amet Rd</td><td>OH</td><td>90786</td><td>(856) 781-7309</td><td>SIngham#pretium.ly</td><td>egestas amet vel ac pretium lacus nec tortor facilisis et</td></tr>
<tr><td>44</td><td>Marie</td><td>Krebs</td><td>124</td><td>4229 Sit Ln</td><td>DE</td><td>41786</td><td>(572) 023-1295</td><td>EClagg#curabitur.io</td><td>lacus elit sagittis quis nec vestibulum malesuada mattis morbi etiam</td></tr>
<tr><td>45</td><td>Stanley</td><td>Zehnacker</td><td>456</td><td>4610 Odio St</td><td>VT</td><td>70223</td><td>(257) 234-6755</td><td>HPennell#morbi.gov</td><td>vel aliquam mattis libero sed pharetra donec malesuada pharetra lectus</td></tr>
<tr><td>46</td><td>Furdella</td><td>Toffoli</td><td>951</td><td>8366 Placerat Rd</td><td>AZ</td><td>20381</td><td>(740) 422-8726</td><td>YEarls#morbi.net</td><td>non aliquam neque tortor egestas pulvinar tempor amet molestie lorem</td></tr>
<tr><td>47</td><td>Talatha</td><td>Nye</td><td>808</td><td>6884 Dolor Dr</td><td>MS</td><td>97282</td><td>(589) 157-7730</td><td>DAcosta#rutrum.gov</td><td>ipsum turpis vestibulum at convallis sit neque elementum sed adipiscing</td></tr>
<tr><td>48</td><td>Brent</td><td>Vollrath</td><td>479</td><td>5362 Eget Dr</td><td>MO</td><td>74989</td><td>(664) 642-4525</td><td>YMarina#sollicitudin.net</td><td>massa elementum elit pretium malesuada mi vestibulum non aliquam neque</td></tr>
<tr><td>49</td><td>Melissa</td><td>Quintana</td><td>405</td><td>1302 Lacus Dr</td><td>PA</td><td>38853</td><td>(354) 903-9363</td><td>AMarrinson#lacus.io</td><td>morbi quis neque placerat malesuada tincidunt morbi risus at tortor</td></tr>
<tr><td>50</td><td>Guadalupe</td><td>Eseltine</td><td>206</td><td>5495 Rutrum Ct</td><td>AR</td><td>37546</td><td>(540) 500-5816</td><td>TLester#morbi.com</td><td>porttitor sit massa ipsum ac massa ac hendrerit vitae malesuada</td></tr>
<tr><td>1</td><td>Sherry</td><td>Mills</td><td>223</td><td>3792 Sit Rd</td><td>NE</td><td>69836</td><td>(627) 124-8760</td><td>DRamirez#massa.ly</td><td>sagittis amet mattis facilisis vitae molestie nec dolor id sed</td></tr>
<tr><td>2</td><td>Markella</td><td>Lessenberry</td><td>895</td><td>5979 Sit Ln</td><td>VA</td><td>97761</td><td>(768) 233-5399</td><td>SPeltier#pulvinar.net</td><td>elementum nullam lacus elit magna libero sed dolor pulvinar orci</td></tr>
<tr><td>3</td><td>Lee</td><td>Trenkelbach</td><td>719</td><td>5656 Adipiscing Ave</td><td>ID</td><td>30972</td><td>(149) 293-0691</td><td>LSheppard#lectus.net</td><td>vestibulum at rutrum molestie convallis vestibulum nec egestas consequat vitae</td></tr>
<tr><td>4</td><td>Sherrye</td><td>Llc</td><td>908</td><td>2348 Pharetra St</td><td>UT</td><td>50740</td><td>(772) 682-4268</td><td>MAltar#turpis.io</td><td>sit elit consequat amet elit consectetur vestibulum vel quis consequat</td></tr>
<tr><td>5</td><td>Juanito</td><td>Lindall</td><td>534</td><td>5181 Lacus Ln</td><td>ID</td><td>71689</td><td>(528) 174-6999</td><td>CKeen#augue.ly</td><td>dui porttitor vestibulum mattis ipsum nunc et morbi dolor ipsum</td></tr>
<tr><td>6</td><td>Andre</td><td>Fuller</td><td>716</td><td>8224 Pulvinar Ave</td><td>WY</td><td>12382</td><td>(654) 593-0007</td><td>AMelvin#sed.net</td><td>dolor curabitur nec molestie lacus odio id velit sed neque</td></tr>
<tr><td>7</td><td>Sajid</td><td>Cattanach</td><td>997</td><td>3762 Ac Rd</td><td>WA</td><td>16719</td><td>(425) 909-2771</td><td>BMaas#ac.org</td><td>morbi tincidunt ac sollicitudin nec ac orci vitae donec non</td></tr>
<tr><td>8</td><td>Heidi</td><td>Rush</td><td>738</td><td>1425 Porta Rd</td><td>SD</td><td>14708</td><td>(341) 095-7183</td><td>DSchrag#sapien.net</td><td>nullam sed aliquam turpis et sagittis libero sed tellus dui</td></tr>
<tr><td>9</td><td>Ganesh</td><td>Comeau</td><td>385</td><td>2641 Hendrerit Dr</td><td>MT</td><td>66612</td><td>(201) 977-9765</td><td>SBurks#ipsum.ly</td><td>sit vestibulum ac pretium eget augue sit augue sagittis tellus</td></tr>
<tr><td>10</td><td>Regine</td><td>Marina</td><td>479</td><td>6204 Ac Rd</td><td>WI</td><td>55667</td><td>(824) 223-9924</td><td>VPeschke#pharetra.org</td><td>amet fringilla vitae tortor vestibulum egestas eget eget amet sed</td></tr>
<tr><td>11</td><td>Wichaya</td><td>Thomas</td><td>487</td><td>861 Risus Dr</td><td>KY</td><td>63224</td><td>(599) 823-8970</td><td>BMohamed#adipiscing.ly</td><td>placerat dolor pulvinar nec morbi amet porta sagittis lacus magna</td></tr>
<tr><td>12</td><td>Douglass</td><td>Holliday</td><td>488</td><td>8829 Sit Ave</td><td>IA</td><td>86970</td><td>(113) 897-8276</td><td>CLieb#convallis.io</td><td>dolor magna id amet lorem eros ipsum magna non aliquam</td></tr>
<tr><td>13</td><td>Prince</td><td>Schwartzberg</td><td>790</td><td>1757 Sit Ct</td><td>IL</td><td>94739</td><td>(299) 471-3039</td><td>DFavus#quis.org</td><td>magna tincidunt ipsum hendrerit ac vitae tortor consequat magna elit</td></tr>
<tr><td>14</td><td>Lola</td><td>Hensley</td><td>486</td><td>8159 Dui Rd</td><td>MN</td><td>88877</td><td>(788) 031-7392</td><td>MBradley#scelerisque.org</td><td>suspendisse donec placerat nec suspendisse lacus ipsum elementum at lorem</td></tr>
<tr><td>15</td><td>Dainius</td><td>Finn</td><td>355</td><td>6072 Massa Dr</td><td>VT</td><td>75787</td><td>(638) 345-2650</td><td>MWilcox#velit.ly</td><td>morbi pretium dui dolor elit sed non vestibulum sit dui</td></tr>
<tr><td>16</td><td>Aisha</td><td>Schuhmann</td><td>328</td><td>9709 Sagittis Ln</td><td>ND</td><td>44161</td><td>(147) 281-5251</td><td>GDech#mi.com</td><td>massa sed placerat libero egestas at massa sagittis libero orci</td></tr>
<tr><td>17</td><td>Maria</td><td>Peacock</td><td>269</td><td>2241 Amet Ave</td><td>MO</td><td>81339</td><td>(656) 079-5964</td><td>POliva#tincidunt.org</td><td>ac hendrerit molestie ipsum facilisis massa odio fringilla hendrerit neque</td></tr>
<tr><td>18</td><td>Otilia</td><td>Denbesten</td><td>778</td><td>1965 Nunc Ct</td><td>SC</td><td>98692</td><td>(985) 745-0452</td><td>SWieber#porttitor.net</td><td>aliquam orci odio id ac magna magna aenean sagittis lectus</td></tr>
<tr><td>19</td><td>Jian</td><td>Sanchez</td><td>796</td><td>6439 Sit Ln</td><td>OR</td><td>24879</td><td>(168) 754-6725</td><td>AVrtis#porttitor.net</td><td>sapien ipsum nullam pretium quis tincidunt tincidunt sit mattis porttitor</td></tr>
<tr><td>20</td><td>Tanny</td><td>Wieland</td><td>814</td><td>7331 Et Rd</td><td>SD</td><td>65216</td><td>(414) 322-1606</td><td>ACasariego#et.org</td><td>odio augue in id lacus tincidunt morbi tempor orci tincidunt</td></tr>
<tr><td>21</td><td>Alejandro</td><td>Sidaway</td><td>995</td><td>8125 Placerat Rd</td><td>VA</td><td>98301</td><td>(202) 112-1194</td><td>RHaag#nullam.ly</td><td>lacus aliquam et sagittis etiam aenean lorem ipsum non facilisis</td></tr>
<tr><td>22</td><td>Yolanda</td><td>Swanson</td><td>530</td><td>276 Amet Ct</td><td>VT</td><td>42999</td><td>(621) 796-4436</td><td>TDenard#lectus.gov</td><td>lacus vitae quis dui orci ipsum odio pulvinar et nunc</td></tr>
<tr><td>23</td><td>Azra</td><td>Filleul</td><td>443</td><td>499 Sagittis Dr</td><td>OK</td><td>59700</td><td>(485) 530-0532</td><td>LSwetland#consectetur.net</td><td>magna mattis sollicitudin placerat vel facilisis sed ac non et</td></tr>
<tr><td>24</td><td>Cassandra</td><td>Labrucherie</td><td>606</td><td>6849 Tellus Ct</td><td>SC</td><td>44245</td><td>(960) 044-9381</td><td>WLafave#lectus.io</td><td>ac nullam magna ante sapien tellus tincidunt eros magna sagittis</td></tr>
<tr><td>25</td><td>Theodore</td><td>Saver</td><td>150</td><td>5 Tincidunt Ave</td><td>IL</td><td>58210</td><td>(152) 001-4978</td><td>KTorres#sed.io</td><td>ac tincidunt nec rutrum pulvinar id aliquam placerat pharetra placerat</td></tr>
<tr><td>26</td><td>Susi</td><td>Murphy</td><td>900</td><td>1614 Hendrerit St</td><td>AZ</td><td>80212</td><td>(532) 030-5050</td><td>ZRingling#sit.io</td><td>quis odio et sapien sit amet eros et augue turpis</td></tr>
<tr><td>27</td><td>Corazon</td><td>Lawrence</td><td>577</td><td>3571 Facilisis Rd</td><td>CA</td><td>35195</td><td>(318) 200-2692</td><td>REckhart#scelerisque.io</td><td>tincidunt sit dolor mi donec magna massa vel suspendisse placerat</td></tr>
<tr><td>28</td><td>Khosrow</td><td>Fisher</td><td>802</td><td>4323 Tortor Ln</td><td>AK</td><td>38949</td><td>(493) 277-9670</td><td>FHarmati#magna.ly</td><td>lectus tortor ac ipsum sagittis lacus dolor ac fringilla nec</td></tr>
<tr><td>29</td><td>Melgema</td><td>Lopez</td><td>893</td><td>1738 Vestibulum Ln</td><td>MS</td><td>32638</td><td>(953) 255-2707</td><td>ABurgin#tortor.ly</td><td>molestie at vel at placerat pharetra consequat dolor nunc placerat</td></tr>
<tr><td>30</td><td>Chun</td><td>Lester</td><td>928</td><td>9681 Vestibulum Ct</td><td>ND</td><td>21333</td><td>(474) 719-0476</td><td>ETierney#pulvinar.gov</td><td>vestibulum ipsum tincidunt placerat eros turpis morbi ipsum sit malesuada</td></tr>
<tr><td>31</td><td>Dwayne</td><td>Balasubramanian</td><td>418</td><td>3129 Pharetra Dr</td><td>SD</td><td>57558</td><td>(457) 589-4620</td><td>ESyner#aenean.com</td><td>amet sit nec amet lectus augue consequat consectetur vel sed</td></tr>
<tr><td>32</td><td>Joshua</td><td>Williamson</td><td>702</td><td>6313 Vestibulum St</td><td>NJ</td><td>39057</td><td>(346) 084-7444</td><td>VFeldman#elit.ly</td><td>sit tempor at lacus libero lorem sit nullam tempor aliquam</td></tr>
<tr><td>33</td><td>Shawn</td><td>Dartmann</td><td>124</td><td>4892 Aliquam Rd</td><td>IA</td><td>17745</td><td>(500) 390-3779</td><td>RNesbitt#massa.net</td><td>sit sapien magna libero augue consectetur fringilla orci ac tortor</td></tr>
<tr><td>34</td><td>Rupa</td><td>Helgren</td><td>594</td><td>5944 Sed Ave</td><td>CO</td><td>96680</td><td>(174) 841-4348</td><td>FShebish#morbi.net</td><td>at elementum neque ac in consequat elementum magna vitae mattis</td></tr>
<tr><td>35</td><td>Gia</td><td>Marks</td><td>635</td><td>2519 Convallis Dr</td><td>GA</td><td>66324</td><td>(188) 657-9140</td><td>SForsyth#adipiscing.gov</td><td>pharetra pulvinar amet dui elementum suspendisse et odio tellus amet</td></tr>
<tr><td>36</td><td>Tyetha</td><td>Ahn</td><td>543</td><td>9900 Eros Ct</td><td>PA</td><td>53390</td><td>(482) 686-6141</td><td>LHobbs#non.io</td><td>pulvinar lorem quis fringilla eget velit sed augue rutrum augue</td></tr>
<tr><td>37</td><td>Gregory</td><td>Christine</td><td>527</td><td>751 Ipsum Rd</td><td>AK</td><td>44543</td><td>(258) 666-2073</td><td>HCrooker#donec.com</td><td>massa vitae dolor sollicitudin consectetur sollicitudin malesuada massa velit egestas</td></tr>
<tr><td>38</td><td>Yelena</td><td>Shanoski</td><td>646</td><td>1612 Donec Ave</td><td>KY</td><td>30729</td><td>(905) 301-3407</td><td>JMcmenamin#massa.gov</td><td>sapien rutrum adipiscing et sed sollicitudin vestibulum pharetra at neque</td></tr>
<tr><td>39</td><td>Thursday</td><td>Helm</td><td>666</td><td>5568 Nec Rd</td><td>NE</td><td>94390</td><td>(487) 403-7019</td><td>RMorin#sed.org</td><td>risus hendrerit sollicitudin vestibulum placerat lorem eros consequat lorem magna</td></tr>
<tr><td>40</td><td>Melinda</td><td>Oliva</td><td>525</td><td>6973 Rutrum Ct</td><td>IA</td><td>38519</td><td>(964) 234-5172</td><td>FStephens#in.com</td><td>dolor lacus nec odio in etiam facilisis lorem ipsum et</td></tr>
<tr><td>41</td><td>Latasha</td><td>Slocum</td><td>210</td><td>8374 Fringilla St</td><td>NV</td><td>23913</td><td>(678) 453-4263</td><td>JWelchert#id.gov</td><td>donec massa dolor elementum scelerisque risus lacus id lorem in</td></tr>
<tr><td>42</td><td>Kenneth</td><td>Zazzara</td><td>269</td><td>3364 Tempor Dr</td><td>MO</td><td>30642</td><td>(874) 633-3017</td><td>TGarayan#tincidunt.ly</td><td>sollicitudin nullam egestas aenean molestie velit nec sed tincidunt scelerisque</td></tr>
<tr><td>43</td><td>Francine</td><td>Daniels</td><td>366</td><td>2141 Amet Rd</td><td>OH</td><td>90786</td><td>(856) 781-7309</td><td>SIngham#pretium.ly</td><td>egestas amet vel ac pretium lacus nec tortor facilisis et</td></tr>
<tr><td>44</td><td>Marie</td><td>Krebs</td><td>124</td><td>4229 Sit Ln</td><td>DE</td><td>41786</td><td>(572) 023-1295</td><td>EClagg#curabitur.io</td><td>lacus elit sagittis quis nec vestibulum malesuada mattis morbi etiam</td></tr>
<tr><td>45</td><td>Stanley</td><td>Zehnacker</td><td>456</td><td>4610 Odio St</td><td>VT</td><td>70223</td><td>(257) 234-6755</td><td>HPennell#morbi.gov</td><td>vel aliquam mattis libero sed pharetra donec malesuada pharetra lectus</td></tr>
<tr><td>46</td><td>Furdella</td><td>Toffoli</td><td>951</td><td>8366 Placerat Rd</td><td>AZ</td><td>20381</td><td>(740) 422-8726</td><td>YEarls#morbi.net</td><td>non aliquam neque tortor egestas pulvinar tempor amet molestie lorem</td></tr>
<tr><td>47</td><td>Talatha</td><td>Nye</td><td>808</td><td>6884 Dolor Dr</td><td>MS</td><td>97282</td><td>(589) 157-7730</td><td>DAcosta#rutrum.gov</td><td>ipsum turpis vestibulum at convallis sit neque elementum sed adipiscing</td></tr>
<tr><td>48</td><td>Brent</td><td>Vollrath</td><td>479</td><td>5362 Eget Dr</td><td>MO</td><td>74989</td><td>(664) 642-4525</td><td>YMarina#sollicitudin.net</td><td>massa elementum elit pretium malesuada mi vestibulum non aliquam neque</td></tr>
<tr><td>49</td><td>Melissa</td><td>Quintana</td><td>405</td><td>1302 Lacus Dr</td><td>PA</td><td>38853</td><td>(354) 903-9363</td><td>AMarrinson#lacus.io</td><td>morbi quis neque placerat malesuada tincidunt morbi risus at tortor</td></tr>
<tr><td>50</td><td>Guadalupe</td><td>Eseltine</td><td>206</td><td>5495 Rutrum Ct</td><td>AR</td><td>37546</td><td>(540) 500-5816</td><td>TLester#morbi.com</td><td>porttitor sit massa ipsum ac massa ac hendrerit vitae malesuada</td></tr>
</tbody>
</table>
</div>
<div class="ui-layout-south no-print" style="text-align: center;">
<span id="feedback" style="float: right;"></span>
The footer
</div>
</body>
</html>
Try something like this (untested):
$(function(){
var $table = $('#fixed-columns-table'),
scrollerHeight = $table.parent().innerHeight() -
$table.children('thead').outerHeight() +
$table.children('tfoot').outerHeight();
$('#fixed-columns-table').tablesorter({
theme: 'blue',
widgets: ['scroller', 'zebra'],
widgetOptions : {
scroller_height : scrollerHeight,
scroller_fixedColumns : 2
}
});
});
The code basically sets the scroller_height to fill the available space of the element wrapping the table.
Related
pandoc beamer text overflows
using pandoc's beamer SLIDES example, if one slide is too long, the PDF slide overflows. How can I make the font size automatically adapt to fit the content in the slide ? % Eating Habits % John Doe % March 22, 2005 # In the morning - Eat eggs - Drink coffee # In the evening - Eat spaghetti - Drink wine # Lorem ipsum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. - Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
You could use the beamer shrink frame option which will scale down the content of the whole frame:
% Eating Habits
% John Doe
% March 22, 2005
# In the morning
- Eat eggs
- Drink coffee
# In the evening
- Eat spaghetti
- Drink wine
# Lorem ipsum {.shrink}
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
- Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
If you don't mind using a bit of tex code, you could use a tcolorbox to automatically choose a font size with which the text will fit the page:
---
output:
beamer_presentation:
keep_tex: true
header-includes:
- \usepackage{tcolorbox}
- \tcbuselibrary{fitting}
- \usepackage{lipsum}
---
# In the morning
- Eat eggs
- Drink coffee
# In the evening
- Eat spaghetti
- Drink wine
# Lorem ipsum
\begin{tcolorbox}[fit,width=\textwidth,height=.9\textheight,size=minimal,colback=white,colframe=white,fit algorithm=fontsize]
\begin{itemize}
\item Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
\item Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
\end{itemize}
\end{tcolorbox}
Setting a picture to "bleed" over parent md-content
Had this working magically on an earlier version (but it broke almost everything else about the layout), but tI thought it was so COOL that I want to recreate it, but without breaking anything else. So I have a logo (the one I use in this example is just one I borrowed on the internet). But lets say its the logo below:) I want to use this one on the toolbar, but I want it to "bleed" over the cmd-content below AND above. Easy to get it to bleed to the below one, but how do I let it bleed on the above one? I created a JSfiddle to show the issue http://jsfiddle.net/avbd0o2n/ <body> <md-content layout="column" class="filler" layout-fill id="page"> <md-content id="topbleed" flex=10 class="filler" layout="row"></md-content> <md-content id="mid" class="filler" layout="row" flex> <md-content layout="column" class="filler sidebleed" flex="10" id="leftbleed"></md-content> <md-content layout="column" id="section4-5" flex> <md-toolbar id="toolbar" class="md-toolbar-tools"> <img layout="row" layout-align="center center" src="http://cf067b.medialib.glogster.com/dimond-queen/media/f4/f4268cbbc332de67e0d2e49d30ee777f4e17845c/tumblr-mgj4rnf0jz1s1e931o1-400.png" style="padding-bottom: 10px;"/> <span flex></span> <md-button> <span style="font-size: 150%;">A</span> A <span style="font-size: 75%;">A</span> </md-button> </md-toolbar> <md-content id="section5 flex"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at nibh sed libero tristique rutrum eu sed est. In a pulvinar risus, dictum faucibus magna. Suspendisse sed quam orci. Proin convallis finibus tortor, eget euismod dolor rutrum in. Nunc lacinia hendrerit massa eu pretium. Donec gravida placerat suscipit. Nam ut hendrerit enim. Donec lacinia ullamcorper diam, et tempus ligula iaculis lacinia. Duis blandit massa sapien, sed egestas nisi fermentum sed. Praesent aliquet, enim in vulputate maximus, risus ante eleifend magna, sed lobortis metus eros maximus justo. Etiam venenatis sem eu nisi tempor tempor. Proin dignissim metus eget interdum vulputate. Praesent iaculis metus ut lorem ornare tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><p> Nunc porta laoreet turpis, in ullamcorper turpis suscipit nec. Integer molestie, mi lacinia accumsan sollicitudin, neque felis commodo dolor, interdum suscipit nisi lectus in ligula. Etiam tristique ullamcorper massa. Sed placerat felis at tortor vehicula, vitae ornare felis interdum. Vestibulum lacus velit, egestas vel ante sit amet, sodales vehicula ligula. Etiam auctor nibh tellus, a efficitur lectus porta eu. Suspendisse potenti. Cras placerat ligula orci, feugiat fringilla eros varius convallis. Pellentesque dolor erat, tristique lobortis imperdiet ac, condimentum id nulla. Duis vestibulum est vitae sodales tempor. Sed dictum accumsan rutrum. Pellentesque euismod ornare est a suscipit. </p><p> Curabitur nec ipsum hendrerit, lacinia diam in, placerat erat. Morbi hendrerit id est id mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin metus mauris, tincidunt eget dui at, luctus elementum metus. Aenean convallis tellus sit amet velit tempus, eget aliquet urna ultrices. Nam malesuada erat non felis egestas, eget ultrices diam elementum. Fusce eget ante ac urna fermentum molestie id eget nisi. </p><p> Curabitur eros diam, facilisis lobortis gravida ac, tincidunt et velit. Fusce suscipit, ex ut vulputate pretium, nisi ligula iaculis tellus, a ornare ex arcu at nisi. Suspendisse interdum iaculis eros, non ullamcorper dolor. Maecenas semper leo auctor malesuada eleifend. Quisque sit amet nunc eu metus faucibus condimentum finibus eu dolor. Quisque vel dui tincidunt, tristique diam eu, scelerisque lacus. In sit amet ipsum molestie, laoreet leo ac, bibendum urna. Sed id erat vitae lacus bibendum porta ac ut velit. In vel nunc tempus, laoreet ante a, dapibus tellus. Nunc fermentum arcu sed vulputate laoreet. Quisque magna ante, fermentum nec rhoncus non, pretium eget sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem elit, volutpat eget ultrices in, iaculis at lorem. Sed lobortis felis lectus, eget auctor diam molestie eget. </p><p> Aliquam condimentum massa ut blandit interdum. Suspendisse varius ultrices quam a auctor. Mauris at ornare quam. Donec rutrum dictum scelerisque. Suspendisse finibus pulvinar odio, sit amet vulputate ipsum accumsan condimentum. Nulla at auctor neque, sollicitudin vehicula lacus. Curabitur tincidunt sagittis orci, vel imperdiet dui congue ut. Curabitur ac sapien ut dolor pharetra malesuada in lacinia metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non suscipit enim. Phasellus in eros euismod, malesuada dolor sit amet, mattis sapien. Donec maximus libero vel est imperdiet, vel fermentum sapien rhoncus. Integer ultricies non sem nec facilisis. Ut gravida id quam quis finibus. </p><p> Maecenas vel neque laoreet, accumsan risus sed, sollicitudin sem. Fusce semper sapien ex, vitae posuere metus tempor id. Sed lacinia ex vel elit efficitur vestibulum. Praesent vitae dapibus ante. Curabitur suscipit nulla id feugiat finibus. Cras ut est ut neque vestibulum rutrum. Proin vel tristique velit. Morbi ut urna felis. Sed vitae tortor maximus est accumsan porta. Nunc ut dapibus justo, tincidunt suscipit ipsum. Aenean dapibus velit ut mollis efficitur. </p><p> Aenean in lorem suscipit ante elementum interdum. Donec pretium suscipit lacinia. Vestibulum quis ultricies elit. Donec condimentum sollicitudin neque. Etiam a viverra erat. Vivamus posuere volutpat magna, ac pellentesque elit vulputate at. Vestibulum in turpis eu turpis ullamcorper tristique vitae nec turpis. Curabitur vestibulum vehicula nisl, in vulputate neque vehicula in. Suspendisse dignissim, sem non rutrum iaculis, augue nisi aliquet urna, ac faucibus ligula risus vel mauris. Aenean sem justo, viverra nec tincidunt ac, mollis vehicula magna. Aenean eu mi dapibus, pulvinar felis in, maximus nisl. Nulla mollis purus eu viverra rutrum. </p> </md-content> </md-content> <md-content id="rightbleed" flex=10 class="filler sidebleed"></md-content> </md-content> </md-content> </body>
OK, so I sort of fixed it. If the md-content and md-toolbar is on the same "level" it seems to work. So in the above example, if you move the md-content above into the same set of md-contents. It works (check out where topbleed ended up). Or: <md-content id="mid" class="filler" layout="row" flex> <md-content layout="column" class="filler sidebleed" flex="10" id="leftbleed"></md-content> <md-content layout="column" id="section4-5" flex> <md-content id="topbleed" flex=10 class="filler" layout="row"></md-content> <md-toolbar id="toolbar" class="md-toolbar-tools"> <img layout="row" layout-align="center center" src="http://cf067b.medialib.glogster.com/dimond-queen/media/f4/f4268cbbc332de67e0d2e49d30ee777f4e17845c/tumblr-mgj4rnf0jz1s1e931o1-400.png" style="padding-bottom: 10px;"/> <span flex></span> <md-button> <span style="font-size: 150%;">A</span> A <span style="font-size: 75%;">A</span> </md-button> </md-toolbar> <md-content id="section5 flex"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at nibh sed libero tristique rutrum eu sed est. In a pulvinar risus, dictum faucibus magna. Suspendisse sed quam orci. Proin convallis finibus tortor, eget euismod dolor rutrum in. Nunc lacinia hendrerit massa eu pretium. Donec gravida placerat suscipit. Nam ut hendrerit enim. Donec lacinia ullamcorper diam, et tempus ligula iaculis lacinia. Duis blandit massa sapien, sed egestas nisi fermentum sed. Praesent aliquet, enim in vulputate maximus, risus ante eleifend magna, sed lobortis metus eros maximus justo. Etiam venenatis sem eu nisi tempor tempor. Proin dignissim metus eget interdum vulputate. Praesent iaculis metus ut lorem ornare tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><p> Nunc porta laoreet turpis, in ullamcorper turpis suscipit nec. Integer molestie, mi lacinia accumsan sollicitudin, neque felis commodo dolor, interdum suscipit nisi lectus in ligula. Etiam tristique ullamcorper massa. Sed placerat felis at tortor vehicula, vitae ornare felis interdum. Vestibulum lacus velit, egestas vel ante sit amet, sodales vehicula ligula. Etiam auctor nibh tellus, a efficitur lectus porta eu. Suspendisse potenti. Cras placerat ligula orci, feugiat fringilla eros varius convallis. Pellentesque dolor erat, tristique lobortis imperdiet ac, condimentum id nulla. Duis vestibulum est vitae sodales tempor. Sed dictum accumsan rutrum. Pellentesque euismod ornare est a suscipit. </p><p> Curabitur nec ipsum hendrerit, lacinia diam in, placerat erat. Morbi hendrerit id est id mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin metus mauris, tincidunt eget dui at, luctus elementum metus. Aenean convallis tellus sit amet velit tempus, eget aliquet urna ultrices. Nam malesuada erat non felis egestas, eget ultrices diam elementum. Fusce eget ante ac urna fermentum molestie id eget nisi. </p><p> Curabitur eros diam, facilisis lobortis gravida ac, tincidunt et velit. Fusce suscipit, ex ut vulputate pretium, nisi ligula iaculis tellus, a ornare ex arcu at nisi. Suspendisse interdum iaculis eros, non ullamcorper dolor. Maecenas semper leo auctor malesuada eleifend. Quisque sit amet nunc eu metus faucibus condimentum finibus eu dolor. Quisque vel dui tincidunt, tristique diam eu, scelerisque lacus. In sit amet ipsum molestie, laoreet leo ac, bibendum urna. Sed id erat vitae lacus bibendum porta ac ut velit. In vel nunc tempus, laoreet ante a, dapibus tellus. Nunc fermentum arcu sed vulputate laoreet. Quisque magna ante, fermentum nec rhoncus non, pretium eget sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem elit, volutpat eget ultrices in, iaculis at lorem. Sed lobortis felis lectus, eget auctor diam molestie eget. </p><p> Aliquam condimentum massa ut blandit interdum. Suspendisse varius ultrices quam a auctor. Mauris at ornare quam. Donec rutrum dictum scelerisque. Suspendisse finibus pulvinar odio, sit amet vulputate ipsum accumsan condimentum. Nulla at auctor neque, sollicitudin vehicula lacus. Curabitur tincidunt sagittis orci, vel imperdiet dui congue ut. Curabitur ac sapien ut dolor pharetra malesuada in lacinia metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non suscipit enim. Phasellus in eros euismod, malesuada dolor sit amet, mattis sapien. Donec maximus libero vel est imperdiet, vel fermentum sapien rhoncus. Integer ultricies non sem nec facilisis. Ut gravida id quam quis finibus. </p><p> Maecenas vel neque laoreet, accumsan risus sed, sollicitudin sem. Fusce semper sapien ex, vitae posuere metus tempor id. Sed lacinia ex vel elit efficitur vestibulum. Praesent vitae dapibus ante. Curabitur suscipit nulla id feugiat finibus. Cras ut est ut neque vestibulum rutrum. Proin vel tristique velit. Morbi ut urna felis. Sed vitae tortor maximus est accumsan porta. Nunc ut dapibus justo, tincidunt suscipit ipsum. Aenean dapibus velit ut mollis efficitur. </p><p> Aenean in lorem suscipit ante elementum interdum. Donec pretium suscipit lacinia. Vestibulum quis ultricies elit. Donec condimentum sollicitudin neque. Etiam a viverra erat. Vivamus posuere volutpat magna, ac pellentesque elit vulputate at. Vestibulum in turpis eu turpis ullamcorper tristique vitae nec turpis. Curabitur vestibulum vehicula nisl, in vulputate neque vehicula in. Suspendisse dignissim, sem non rutrum iaculis, augue nisi aliquet urna, ac faucibus ligula risus vel mauris. Aenean sem justo, viverra nec tincidunt ac, mollis vehicula magna. Aenean eu mi dapibus, pulvinar felis in, maximus nisl. Nulla mollis purus eu viverra rutrum. </p> </md-content> </md-content> <md-content id="rightbleed" flex=10 class="filler sidebleed"></md-content> </md-content> </md-content>
Remove outer tags but keep inside ones
I'm trying to remove outer p tags if there is another tag inside, the rest of the p tags should be kept. (The last line in the code block below). <p><img id="__mcenew" src="/media/1902/agf.jpg" alt="" rel="11861" /></p> <p><h1>Nyt design formidler oplevelserne</h1></p> <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</span></p> <p><h1>Nyt design formidler oplevelserne</h1></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</p> This is how I want it to look: <img id="__mcenew" src="/media/1902/agf.jpg" alt="" rel="11861" /> <h1>Nyt design formidler oplevelserne</h1> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</span> <h1>Nyt design formidler oplevelserne</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</p> Any help is appreciated, I've tried a few things out in JS/JQuery and Razor/C#, but i'm stuck on this.
Fixed it using jQuery unwrap() method.
for images:
$("#maincontent img").unwrap();
for span:
$("#maincontent span").unwrap();
Also changes span tags to p tags using (not in the question, but part of the solution to the problem I had):
$("#maincontent span").each(function () {
var $this = $(this);
var $html = $this.html();
$this.replaceWith("<p>" + $html + "</p>");
});
Try to use this
("body p")
.html()
.appendTo("body")
.end()
.remove();
This should remove all <p> in the body of your document
Primefaces Scrollable Layout
Is it possible to make a Primefaces Layout Scrollable? I dont want to make my layoutUnits scrollable as I dont really want multiple scrollable elements on the pages. I would prefer for the page & content panels to resize according to the content, so the user can view the data in a linear fashion. I am currently using a full page primefaces layout: <p:layout fullPage="true"> If this isnt possible then what is my best alternatives as I quite like the primefaces components but could live without its layout features. Cheers
You can create a layoutUnit for center, then provide a style class in it, where in your css you can provide scrollable along to x and y position.
<p:layoutUnit position="center">
<div id="myScreen" class="right col scroll-x scroll-y">
<ui:insert name="content">My Screen Content Goes Here</ui:insert>
</div>
</p:layoutUnit>
And in cc file --
.col {
top: 0; bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
Hope this would help.
as far as i can tell it cannot be done! I dumped the primefaces layout and went with a generic web layout...
Just put everything in a <p:scrollPanel> component inside the <p:layoutunit>, that will work (now that it's 2015 and we are on Primefaces v5.1.x!). Make sure you add absolute positioning and height to stretch the <p:scrollPanel> to the innards of the <p:layoutunit> - see below. http://www.primefaces.org/showcase/ui/panel/scrollPanel.xhtml <p:scrollPanel mode="native" style="position: absolute; height: 100%;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p> <p> Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus. </p> <p> Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci. </p> <p> Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat. </p> <p> Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat. </p> </p:scrollPanel>
I don't believe that layouts are right for what you want to do here. This is good for enabling templating on a single page and the such. You might be able to however put an iframe within a layoutUnit to emulate the same effect though I have never tried this personally and couldn't tell you if it will work or not.
jQuery UI Accordion Disobeys Height
This should be any easy one for you. I have an accordion that I'd like to be a fixed height. Each pane should be the same size, if there is any overflow on a pane a scroll bar should appear. In the code below the scroll bars appear on load for the first pane, but after the first pane change, the accordion expands it's height, so scroll bars are no longer needed.
What am I doing wrong?
<head>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#accordion').accordion({autoHeight: false, clearStyle: true});
});
</script>
</head>
<body>
<div id="accordion">
<h3>First Section</h3>
<div style="height:50px; overflow:auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis vehicula dui, quis volutpat odio bibendum a. Proin posuere convallis lorem id mattis. Vestibulum lacinia lacinia enim ut euismod. Aenean sit amet tincidunt nunc. Vestibulum gravida, ipsum in tempor dictum, diam nulla auctor purus, a vehicula ante odio quis massa. Pellentesque imperdiet urna ut elit adipiscing ac gravida lectus facilisis. Curabitur laoreet, justo vel dapibus auctor, enim sem dapibus nulla, sed lacinia felis felis sit amet dolor. Nulla lacus dolor, tincidunt convallis sodales vitae, interdum a sapien. Cras ut iaculis orci. Mauris vel nisl vel leo venenatis hendrerit. Duis aliquet lobortis purus, non malesuada lorem sagittis quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sit amet posuere eros. Nam vel turpis at sem adipiscing scelerisque a ac dolor. Morbi lobortis tristique felis, at aliquam libero suscipit sed. Aliquam erat volutpat. Donec porta lorem sed nisl fermentum pulvinar vehicula risus tempus. Integer ultricies dignissim vehicula. Morbi non dolor a arcu rutrum congue. Fusce non urna vitae eros blandit vehicula quis vel ligula.
</div>
<h3>Second Section</h3>
<div style="height:50px; overflow:auto">
Etiam varius, orci sit amet pharetra laoreet, diam augue dictum justo, et aliquam enim leo ut nulla. Quisque mi nunc, sagittis at euismod vel, feugiat a erat. In a metus quam. Pellentesque ullamcorper volutpat congue. Nunc facilisis varius velit eu lacinia. Quisque est nulla, tempus commodo gravida quis, consequat ut felis. Donec mattis, neque sagittis feugiat sollicitudin, augue lectus vulputate ligula, eget interdum nulla massa at nunc. Proin rhoncus nunc non felis mattis accumsan. Aliquam metus ligula, adipiscing ac ullamcorper vel, lobortis non erat. Aenean placerat libero porta enim dictum malesuada molestie sapien ultricies. Nullam ac commodo ligula.
</div>
<h3>Third Section</h3>
<div style="height:50px; overflow:auto">
Morbi nec risus velit, eget ornare nibh. Duis semper elementum erat, ac egestas purus congue et. Sed commodo lacinia lorem, ac semper risus dapibus mattis. Aliquam quam quam, ultrices quis luctus sit amet, cursus vitae dolor. Nam id lectus justo. Pellentesque in leo sit amet metus eleifend lobortis eget nec turpis. Praesent vitae magna eget mauris cursus tempus vel at mi. Nulla vitae leo accumsan magna mollis luctus. Curabitur viverra nisi ac nisl pulvinar gravida. Curabitur consectetur, diam non placerat sagittis, velit nunc porttitor quam, vel interdum lorem est ut arcu. Suspendisse potenti. Pellentesque vitae leo nunc.
</div>
</div>
</body>
</html>
I appears that the height property is being animated as the accordion opens and closes. So once the top panel has been closed one time, it's height has been changed from the one specified in the inline style and is 'lost'.
I found when I factor the style out into the header the accordion works as desired:
<head>
<style type="text/css">
#accordion>div{
height:50px;
overflow:auto;
}
</style>
</head>