{"id":21192979,"url":"https://github.com/cloudfour/leveller","last_synced_at":"2025-07-10T03:32:01.661Z","repository":{"id":25917101,"uuid":"29358038","full_name":"cloudfour/leveller","owner":"cloudfour","description":"A jQuery plugin for equalizing element heights.","archived":false,"fork":false,"pushed_at":"2020-05-05T05:25:15.000Z","size":21,"stargazers_count":10,"open_issues_count":3,"forks_count":2,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-06-24T02:10:07.734Z","etag":null,"topics":["height","jquery","layout"],"latest_commit_sha":null,"homepage":"http://cloudfour.github.io/leveller/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudfour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-16T16:54:25.000Z","updated_at":"2023-11-04T13:18:04.000Z","dependencies_parsed_at":"2022-07-27T05:46:26.763Z","dependency_job_id":null,"html_url":"https://github.com/cloudfour/leveller","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/cloudfour/leveller","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fleveller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fleveller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fleveller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fleveller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudfour","download_url":"https://codeload.github.com/cloudfour/leveller/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fleveller/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264521460,"owners_count":23622152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["height","jquery","layout"],"created_at":"2024-11-20T19:12:18.554Z","updated_at":"2025-07-10T03:31:56.652Z","avatar_url":"https://github.com/cloudfour.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leveller\n\nA jQuery plugin for equalizing element heights.\n\nIf you can, [you should use Flexbox instead](http://css-tricks.com/snippets/css/a-guide-to-flexbox/). See the [demo](http://cloudfour.github.io/leveller/) for an example.\n\nFor simple, single-row adjustments, [Equalizer](https://github.com/skrajewski/Equalizer) is a leaner, dependency-free solution.\n\n- [Blog post](http://blog.cloudfour.com/leveller/)\n- [Live demo](http://cloudfour.github.io/leveller/)\n\n## Installation\n\nInclude the plugin after you've included [jQuery](http://jquery.com/):\n\n```html\n\u003cscript src=\"path/to/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/leveller.min.js\"\u003e\u003c/script\u003e\n```\n\nOr use [npm](https://www.npmjs.com/) and [Browserify](http://browserify.org/):\n\n```\nnpm install --save jquery\nnpm install --save leveller\n```\n```javascript\nvar $ = require('jquery');\nrequire('leveller');\n```\n\n## Usage\n\nEqualize element heights across rows (uses `min-height` on the elements by default):\n\n```javascript\n$('.example .column').leveller();\n```\n\nIf you want elements to appear bottom-aligned, you can apply the `min-height` adjustment to a child selector instead:\n\n```javascript\n$('.example .column').leveller({\n  cssSelector: '.column-main'\n});\n```\n\nYou can also change which property is used for the adjustment. In this case, padding will be added to the top of `.column-footer` until the element is correctly sized:\n\n```javascript\n$('.example .column').leveller({\n  cssSelector: '.column-footer',\n  cssProperty: 'padding-top'\n});\n```\n\nAdjust on window resize ([debounce](http://davidwalsh.name/javascript-debounce-function) for performance):\n\n```javascript\n// pass along options (if any) the first time\n$('.example .column').leveller({ /* ... */ });\n\n$(window).resize(function(){\n  // calling again on the same elements will retain options\n  $('.example .column').leveller();\n});\n```\n\nReset tile heights that have been set with Leveller:\n\n```javascript\n$('.example .column').leveller('reset');\n```\n\n## Options\n\nOption | Default | Description\n--- | --- | ---\n`level` | `true` | Whether or not to `level` right away by default.\n`resetBefore` | `true` | If `false`, it will not reset the adjustable property before making new adjustments. This can have weird results, but may be necessary if you have other plugins or JS modifying styles.\n`cssProperty` | `'min-height'` | The CSS property to modify to adjust the height.\n`heightMethod` | `'outerHeight'` | The jQuery method to use to determine the element's height. Could also be `height` or `innerHeight`.\n`offsetMethod` | `'offset'` | The jQuery method to use to determine the element's position. Could also be `position`.\n`alignment` | `'top'` | Can also be `middle` or `bottom` depending on the default alignment of your elements.\n`cssSelector` | | A child selector within the parent element to modify instead of the parent (useful for adding space between child elements instead of affecting the overall height).\n`columns` | | If specified, the plugin won't attempt to determine the column count per row. This can help performance if you know the column count will always be the same.\n`adjustBy` | | If the new heights are just a _tad_ off, specifying this option can allow you to adjust them by a number (`2`) or a CSS property (`border-top`).\n\n## Troubleshooting\n\n### Inconsistent heights\n\nLeveller adjusts elements at the time it's called. If images, fonts or other external resources affect the layout later, the sizing will be off.\n\nThe solution is to call Leveller when the elements are ready to be equalized:\n\n```javascript\n// run leveller after the page has loaded\n$(window).load(function(){\n  $('.example .column').leveller();\n});\n```\n\nThis can also happen if you attempt to equalize elements that aren't visible yet (in a modal, for example). This can be resolved the same way:\n\n```javascript\n// run leveller after the Bootstrap modal is shown\n$('#myModal').on('shown.bs.modal', function(){\n  $(this).find('.column').leveller();\n});\n```\n\n### Margin adjustments result in incorrect heights\n\nThis is most likely due to [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing), and there are a few ways you can attempt to resolve.\n\nYou can stop margin collapsing in CSS using [the `clear` property](https://developer.mozilla.org/en-US/docs/Web/CSS/clear).\n\nYou can try specifying a different property that _doesn't_ collapse (for example, `padding-bottom` instead of `margin-bottom`).\n\nFinally, there's the `adjustBy` option which lets you tweak height adjustments:\n\n```javascript\n$('.example .column').leveller({\n  cssSelector: '.column-footer',\n  cssProperty: 'margin-top'\n  adjustBy: 4 // height adjustments will be 4px greater\n});\n```\n\nIf we wanted to base the value on the margin that's collapsing, we could do something like this:\n\n```javascript\n$('.example .column').leveller({\n  cssSelector: '.column-footer',\n  cssProperty: 'margin-top'\n  adjustBy: parseInt($('.column-body').css('margin-bottom'), 10)\n});\n```\n\nBut it's probably cleaner to use a different property or tweak your CSS!\n\n## History\n\n- **1.0.0**: Tweaks, docs, publication\n- **0.1.1**: UMD definition and strict equality\n- **0.1.0**: Hello world!\n\n## License\n\nReleased under the [MIT License](http://www.opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Fleveller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudfour%2Fleveller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Fleveller/lists"}