Auto Adjust Parent Width Based On Child Widths - Wrapper Resizer

File Size: 4.34 KB
Views Total: 373
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Adjust Parent Width Based On Child Widths - Wrapper Resizer

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.