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

117,657 subscribers

116,846 views • 1 year 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

82,890 views • 11 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 ʕ•ᴥ•ʔ

77,042 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,394 views • 1 year ago

gonna start measuring snow height in units of Corgi
0:11

gonna start measuring snow height in units of Corgi

ᴘᴀᴠʟᴏᴠ ᴛʜᴇ ᴄᴏʀɢɪ

1,921,838 views • 3 years 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,527 views • 1 year ago

The reveal, height change, motion blur, selection... Was a joy to build and still a joy to use.
0:12

The reveal, height change, motion blur, selection... Was a joy to build and still a joy to use.

Brotzky

102,882 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 • 5 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 ʕ•ᴥ•ʔ

65,006 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,666 views • 10 months 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,753 views • 26 days ago

¡POR FIN podremos hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "form-sizing: content". Aquí te dejo una demostración:
0:14

¡POR FIN podremos hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "form-sizing: content". Aquí te dejo una demostración:

Miguel Ángel Durán

174,701 views • 2 years 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,652 views • 2 years ago

"Someone should learn the correct use of height from this baboon!"
0:15

"Someone should learn the correct use of height from this baboon!"

Nature Chapter

1,143,767 views • 4 months 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 • 2 months ago

cliff 🪨 - make stepped planes with sop - use them for height map with triplanar #houdini
0:18

cliff 🪨 - make stepped planes with sop - use them for height map with triplanar #houdini

tinybugbot

19,576 views • 1 year 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,782 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,859 views • 2 months ago