Results for “Lists & control flow”
Small, practical examples. Search by task or narrow things down below.
Fill grid rows before moving to the next column
CSS: Column auto-flow fills the explicitly declared rows in each successive implicit column.
CSS✓ Tested
Filter a list by a search term
Filter a list by a search term with a small React component and explicit browser behavior.
React✓ Tested
Hide an element while keeping its space
CSS: Visibility hidden preserves layout geometry even though the element is not painted.
CSS✓ Tested
Increase spacing between words
CSS: Word-spacing adds to the font’s normal space width.
CSS✓ Tested
Lay out a short label in a vertical writing mode
CSS: Writing-mode changes the direction in which lines and inline content are laid out.
CSS✓ Tested
Pass values through a custom event
jQuery: trigger passes its extra argument array after the event object.
jQuery✓ Tested
Place fixed-size boxes on the same line
CSS: Inline-block allows dimensions while participating in inline layout.
CSS✓ Tested
Preserve item state while reordering by key
Preserve item state while reordering by key with a small React component and explicit browser behavior.
React✓ Tested
Preserve line breaks while collapsing repeated spaces
CSS: Pre-line retains newlines but does not preserve all whitespace like pre-wrap does.
CSS✓ Tested
Prevent navigation from a handled link
jQuery: preventDefault cancels the browser action without cancelling event bubbling.
jQuery✓ Tested
Read a handler result without event bubbling
jQuery: triggerHandler invokes the first matched element’s handlers without native default behavior.
jQuery✓ Tested
Read a selection when its change event fires
jQuery: A change handler observes the current selected value.
jQuery✓ Tested