Auto Adjust Parent Width Based On Child Widths - Wrapper Resizer
| File Size: | 4.34 KB |
|---|---|
| Views Total: | 395 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Wrapper Resizer is a jQuery element resize plugin that automatically resizes parent/wrapper/container width so that all children are covered.
Suitable for fixed-width containers where the width of child elements is variable.
How to use it:
1. Download and insert the Wrapper Resizer plugin's script jquery-plugin-wrapper-resizer.js after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery-plugin-wrapper-resizer.js"></script>
2. Attach the function wrapChilds to the parent container and the plugin will do the rest.
<div class="wrapper">
<table class="my-table table table-bordered table-striped">
<tr>
<th>Header Text</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Header Text</th>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>Quisque est ex, pulvinar et aliquet eu, aliquet sit amet sem. </td>
</tr>
</table>
</div>
.wrapper {
width: 10px;
/* more styles here */
}
window.onload=function(){
$('div.wrapper').wrapChilds();
}
This awesome jQuery plugin is developed by earth-the-home. For more Advanced Usages, please check the demo page or visit the official website.











