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.