Comments (6)
@agagnon Does your page happen to be public? If so, would it be possible to provide a link to it? Or maybe a code sample?
I wouldn't of expected #9589's changes to have impacted wb-update.wb-eqht
apart from improving how it calculates equal heights when eqht-trgt
is in play.
Does your page contain multiple rows of equalized content? Is your expectation to see every grid across every row being based on the tallest row? If so... my PR deliberately undid that behaviour since it was inherently a bug :(.
from wet-boew.
Here is my page using v13.2.2 (equalize update not working) : https://www.asc-csa.gc.ca/fra/evenements/
Here is the exact same page using v13.1.0 (equalize update working) : https://www.asc-csa.gc.ca/temp/
There is a list of events, filtered. When you change the filter, I use "Equalize update" to make all visible events the same height. With 13.1.0, is works fine. With 13.2.2, it doesn't work and you can see the events are not the same height.
from wet-boew.
Just updated the temp page because the "/fra/evenements" page has changed.
You can choose filters "Activités" and "Terminés" and you'll see the issue in the "/fra/evenements" page.
from wet-boew.
@agagnon I think I figured it out :O.
What seems to have happened is that the new vertical offset logic #9589 added doesn't play nicely with hidden (display: none;
) elements that are in the scope of equalization.
The equal heights plugin detects "virtual" rows by comparing the vertical offsets of all elements that are to be equalized:
- In the past, each element's vertical offset was based on their
offsetTop
property. - #9589 changed it to be based on a calculation (
currentChild.getBoundingClientRect().top + window.pageYOffset
). That's more reliable when dealing with visible elements... but apparently not with hidden ones :(. The vertical offset of hidden elements seems to be getting derived from the viewport's top scroll position - which causes their vertical baseline to be inconsistent with those of visible elements. End result is that when the plugin encounters a hidden element after a visible element, it gets tricked into thinking a new virtual row is starting and ends up botching itsmin-height
calculations.
I'll try sending over a PR to fix it sometime this week (hopefully tomorrow).
from wet-boew.
Just sent over #9639. It fixes messed-up equalization caused by hidden grids in-between visible ones. So min-height
is set more consistently across rows now.
@agagnon Based on my local testing, it looks like your GCWeb v13.2.2 page has another twist to it that clashes with equalization :P. It's setup to lazy-load images. When a user plays around with the filters, equalization occurs on rows of grids that are off-screen. If many rows of results appear, the off-screen rows will be equalized without taking the images into consideration (since they don't load in unless they're on-screen).
So with my fix in play, everything technically gets equalized properly... but when a user scrolls down and the lazy-loaded images come into play, their grids grow taller :D. So the min-height
s the equalization plugin setup earlier on become outdated.
To get around that issue, you'd probably need to do one of the following (from best to worst):
- Give up on the equal heights plugin and use one of these instead:
- Use flexbox classes to get the same effect via pure CSS (not sure if all the classes that'd be needed for it currently exist)
- Use the equal heights CSS plugin (requires JavaScript)
- Enhance the equal heights plugin to automatically re-equalize when heights change in realtime using something along the lines of a DOM mutation observer
- Stop lazy-loading images (not ideal)
from wet-boew.
@agagnon Here's what I'd suggest to transition those events pages to flexbox CSS:
- Events / Événements pages:
- Change the
<div id="list">
element'sclass
attribute togc-prtts small
- Change the
ul
element'sclass
attribute tolist-unstyled d-sm-flex flex-sm-wrap
- Change the
li
elements'class
attribute toblog col-sm-6 col-md-4 mrgn-bttm-sm d-sm-flex
- Change the
article
elements'class
attribute tod-sm-flex
- Change the
a
elements'class
attribute tod-sm-flex mrgn-bttm-lg
- Change the
figure
elements'class
attribute tothumbnail thumbnail_MOD mrgn-bttm-0
- Bonus - fix HTML validation errors:
- Both pages:
- Don't nest
<p class="date">
within "parent"p
elements
- Don't nest
- French page:
- Replace the
date
element withtime
- Remove duplicate
</span>
closing tag after "Association of Science Teachers"
- Replace the
- Both pages:
- Change the
- evenements.css
- Remove
display:block;
from the second#list a
selector (to stop overriding thed-sm-flex
class'sdisplay: flex;
property)
- Remove
- evenements.js
- Remove
$( ".wb-eqht" ).trigger( "wb-update.wb-eqht" )
- Remove
Hope this helps :)!
from wet-boew.
Related Issues (20)
- How to initialize datatable with existing array? HOT 3
- Including server side errors in form validation summary HOT 2
- [OTHER] Intermittent errors when listening for 'wb-ready.wb' event HOT 5
- [BUG] Form Validation - Inline radio and checkbox inputs with wb-server-error class not recognized as errors to display
- [Bug] Menu without submenu doesn’t work in mobile mode when menu link point to modal popup. HOT 2
- [OTHER] Viewing password as user enters data in form HOT 6
- [FEATURE] Published Component Library for Figma or Mural HOT 3
- Exit Script - how to close user session prior to redirect? HOT 5
- Broken link on wet-boew.github.io
- [AUTRE] Avis sur l'Accessibilité d'un outil de visite virtuelle (Matterport)
- Pagination - Datatable Dom option - Pagination still show at the top when hidden at the bottom HOT 3
- Geomap: Popup French suggestions
- [BUG] Issue with datatables.net when sorting array HOT 1
- [BUG] Form Validation - null .arialive causing error
- Grammar on Hello World plugin example page
- [BUG] Can't get the load event to trigger HOT 2
- WCAG 2.1 Compliance
- Geomap: Looking for JS code to Filter a point HOT 8
- [OTHER] WET in Vue/Nuxt
- is there support for toasts
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wet-boew.