Loading video...

Video Failed to Load

Go Home

💡 2 CSS tips for textareas: 1️⃣ Use `field-sizing: content` to make the textarea auto-resize to its content 2️⃣ Use `lh` units to set the height in the font's computed line-height units

boltdotnew's profile picture

bolt.new

121,673 subscribers

117,159 views • 2 years ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }
0:14

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Gabriel

86,969 views • 3 months ago

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →
0:10

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →

Chrome for Developers

16,453 views • 26 days ago

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

78,350 views • 1 year ago

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,904 views • 1 year ago

Not uncommon to see checkbox implementations make use of align-items: center which results in some awkward input positioning when the label text wraps. Instead you can make use of baseline which will align nicely across different line-height implementations.
0:16

Not uncommon to see checkbox implementations make use of align-items: center which results in some awkward input positioning when the label text wraps. Instead you can make use of baseline which will align nicely across different line-height implementations.

Alex Carpenter

46,466 views • 1 year ago

Use Qwen Code to parse the PDF document into markdown content, and then translate it. Follow us for more AI tips and updates!
0:18

Use Qwen Code to parse the PDF document into markdown content, and then translate it. Follow us for more AI tips and updates!

Alibaba Cloud

86,653 views • 8 months ago

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

66,034 views • 1 year ago

We're transitioning into the height of Summer ☀️ Here's some tips on how to get the most out of the season in #AssassinsCreedShadows. 🎨 Paint the legendary White Tanuki (only available in Summer). 🌊 Use bodies of water like ponds as camouflage. 🌿 More foliage to keep hidden.
0:19

We're transitioning into the height of Summer ☀️ Here's some tips on how to get the most out of the season in #AssassinsCreedShadows. 🎨 Paint the legendary White Tanuki (only available in Summer). 🌊 Use bodies of water like ponds as camouflage. 🌿 More foliage to keep hidden.

Assassin's Creed

34,698 views • 1 year ago

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗
0:17

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,912 views • 4 months ago

Only a few days left to enter in the Pixels Creator Contest. 1️⃣ Create content announcing Pixels coming to Ronin 🙌🏼 2️⃣ Reply to the original post below with your content 3️⃣ Submit the link to the "Pixels Creator Contest" quest on Moku HQ
0:15

Only a few days left to enter in the Pixels Creator Contest. 1️⃣ Create content announcing Pixels coming to Ronin 🙌🏼 2️⃣ Reply to the original post below with your content 3️⃣ Submit the link to the "Pixels Creator Contest" quest on Moku HQ

Moku✨

41,669 views • 2 years ago

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 views • 5 months ago

‼️NEW FREE UNITS EVENT REVEALED Head to Cyclops on the new Krakoa social hub map and claim daily units for 7 days in a row, up to 300 units per day. Also, invite friends to the 'Tandem Tides' event to unlock limited-time rewards
0:12

‼️NEW FREE UNITS EVENT REVEALED Head to Cyclops on the new Krakoa social hub map and claim daily units for 7 days in a row, up to 300 units per day. Also, invite friends to the 'Tandem Tides' event to unlock limited-time rewards

Marvel Rivals Intel

342,998 views • 3 months ago

The Colossus of Constantine, reconstructed in its full 12-metre height, soon to go on display at the Capitoline Museums in Rome.
0:19

The Colossus of Constantine, reconstructed in its full 12-metre height, soon to go on display at the Capitoline Museums in Rome.

Wanted in Rome

523,891 views • 2 years ago

The ultimate group hug. Sperm whales are incredibly social creatures that use touch and 'codas' (clicking sounds) to bond with their family units.
0:16

The ultimate group hug. Sperm whales are incredibly social creatures that use touch and 'codas' (clicking sounds) to bond with their family units.

Oceaiii🐋🐬

11,900 views • 6 months ago

The content creator quickly use the victory mood to take a selfie with Lamine Yamal. 👋
0:19

The content creator quickly use the victory mood to take a selfie with Lamine Yamal. 👋

POOJA!!!

115,643 views • 1 month ago

“Welcome to our trash revolution.” Mayor Adams introduces the new bin that buildings with 1-9 units will be required to use instead of loose bags of garbage
0:11

“Welcome to our trash revolution.” Mayor Adams introduces the new bin that buildings with 1-9 units will be required to use instead of loose bags of garbage

Liam Quigley

30,078,759 views • 2 years ago

Never underestimate colored lineart ✒️🎨 Make your coloring process faster with this auto action asset! 🔗 Download here: How to use: 1️⃣ Download & load the asset in Clip Studio Paint 2️⃣ Merge your coloring layers into one 3️⃣ Select the coloring layer & run the auto action 4️⃣ Place the generated clipping layer over your lineart ✨ Done!
0:12

Never underestimate colored lineart ✒️🎨 Make your coloring process faster with this auto action asset! 🔗 Download here: How to use: 1️⃣ Download & load the asset in Clip Studio Paint 2️⃣ Merge your coloring layers into one 3️⃣ Select the coloring layer & run the auto action 4️⃣ Place the generated clipping layer over your lineart ✨ Done!

CLIP STUDIO PAINT

27,543 views • 1 year ago

$STRX Airdrop 💸 🥳 To participate… 1️⃣ Like, RP & Follow Tradestrike 2️⃣ Use cross-chain swaps in StrikeX Wallet 3️⃣ Use same-chain swaps in StrikeX Wallet Get the App 👉 #Airdrop
0:14

$STRX Airdrop 💸 🥳 To participate… 1️⃣ Like, RP & Follow Tradestrike 2️⃣ Use cross-chain swaps in StrikeX Wallet 3️⃣ Use same-chain swaps in StrikeX Wallet Get the App 👉 #Airdrop

Tradestrike

23,732 views • 2 years ago