Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

The best way to handle responsive tables: ◇ Measure width and add scroll ◇ Sticky columns for context ◇ Pagination ◇ Keyboard (Arrow left/right)

pontusab's profile picture

Pontus Abrahamsson — oss/acc

25,938 subscribers

36,973 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildungFinanzen
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

This is how I'm solving wide tables in midday: - Horizontal scrollable - Visible pagination if too wide - Keyboard navigation
0:10

This is how I'm solving wide tables in midday: - Horizontal scrollable - Visible pagination if too wide - Keyboard navigation

Pontus Abrahamsson

113,020 Aufrufe • vor 7 Monaten

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,692 Aufrufe • vor 1 Jahr

Sticky header that updates based on the active top section. Months animate in from left/right depending on the scroll direction
0:15

Sticky header that updates based on the active top section. Months animate in from left/right depending on the scroll direction

Mery

34,233 Aufrufe • vor 10 Monaten

The best way to measure glute growth!
0:18

The best way to measure glute growth!

Bryce Adams 💋

19,129 Aufrufe • vor 11 Monaten

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻
0:16

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻

David Mráz

13,821 Aufrufe • vor 6 Monaten

There’s a wrong and right way to scroll on your phone:
0:14

There’s a wrong and right way to scroll on your phone:

The Real World

37,200 Aufrufe • vor 1 Jahr

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }
0:17

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }

jhey ʕ•ᴥ•ʔ

396,107 Aufrufe • vor 2 Jahren

The new btca experience, now just a skill b/c it's way better: Turns out the best way to let coding agents search github for context is to let them search github repos for context
0:16

The new btca experience, now just a skill b/c it's way better: Turns out the best way to let coding agents search github for context is to let them search github repos for context

Ben Davis

87,820 Aufrufe • vor 2 Monaten

circular carousel v3————keeping the original transform of the items next: keyboard navs, scroll and a11y
0:11

circular carousel v3————keeping the original transform of the items next: keyboard navs, scroll and a11y

daniel petho

42,745 Aufrufe • vor 11 Monaten

1/ Let your keyboard do the work. • Its more consistent to draw a straight line with keyboard, than it is with the mouse. • Better to overflick your target, and strafe onto the head. • Best way to clear angles.
0:16

1/ Let your keyboard do the work. • Its more consistent to draw a straight line with keyboard, than it is with the mouse. • Better to overflick your target, and strafe onto the head. • Best way to clear angles.

m1sfit

201,366 Aufrufe • vor 3 Jahren

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)
0:11

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)

Framer University

16,369 Aufrufe • vor 1 Jahr

i'm a lot to handle... in the best way! :P
0:12

Sensitive content

i'm a lot to handle... in the best way! :P

jules 🔞🍮

65,510 Aufrufe • vor 1 Jahr

Introducing Float app for macOS ✨ Add digital sticky notes to your desktop so your to-do’s never go out of sight Strike them off right from the desktop. No app windows, no extra steps! Everything right there inside the sticky note 🗒️ Find the link below in replies 👇
0:15

Introducing Float app for macOS ✨ Add digital sticky notes to your desktop so your to-do’s never go out of sight Strike them off right from the desktop. No app windows, no extra steps! Everything right there inside the sticky note 🗒️ Find the link below in replies 👇

Vishal Bhardwaj

27,312 Aufrufe • vor 1 Jahr

Data table with sticky columns. Built with TANSTACK ✨
0:17

Data table with sticky columns. Built with TANSTACK ✨

Pasquale Vitiello

83,103 Aufrufe • vor 1 Jahr

hardcoded tooltip CSS works until it meets the edge bad (gets clipped): position absolute left 100% translateY(-50%) good: (collision aware) measure viewport space choose placement set top/left move the arrow animate from the correct origin
0:17

hardcoded tooltip CSS works until it meets the edge bad (gets clipped): position absolute left 100% translateY(-50%) good: (collision aware) measure viewport space choose placement set top/left move the arrow animate from the correct origin

Tanvir

53,991 Aufrufe • vor 1 Monat

Wrote about scroll-driven variable fonts. The why, the sticky wrapper pattern, and the weight lens stagger math.
0:19

Wrote about scroll-driven variable fonts. The why, the sticky wrapper pattern, and the weight lens stagger math.

Carmen Ansio

13,282 Aufrufe • vor 2 Monaten

HOW TO ACCESS VIP UPGRADE: - Search “Halsey” on Ticketmaster - Scroll to your desired show and click the “i” - Under “Add-Ons”, scroll to “VIP” and select “Halsey VIP Upgrade (Event Ticket Not Included)” and click - When the listing goes live, it will be available for purchase
0:11

HOW TO ACCESS VIP UPGRADE: - Search “Halsey” on Ticketmaster - Scroll to your desired show and click the “i” - Under “Add-Ons”, scroll to “VIP” and select “Halsey VIP Upgrade (Event Ticket Not Included)” and click - When the listing goes live, it will be available for purchase

Halsey Updates

27,137 Aufrufe • vor 9 Monaten

This is the best approach for wide tables.
0:16

This is the best approach for wide tables.

Pontus Abrahamsson — oss/acc

24,707 Aufrufe • vor 1 Jahr

With 80+ projects already live, the best time to explore Unichain is right now Scroll to your heart's desire 💖
0:12

With 80+ projects already live, the best time to explore Unichain is right now Scroll to your heart's desire 💖

Unichain

13,954 Aufrufe • vor 1 Jahr