Dynamic horizontal scrolling based on the amount of content

  Рет қаралды 36,702

Kevin Powell

Kevin Powell

Күн бұрын

Пікірлер: 31
@saidakhrarov5322
@saidakhrarov5322 8 ай бұрын
Kevin, you have been consistently teaching me new things ever since I've discovered your page. I've now almost ten years of experience in full-stack software development, and I always leave your videos learning something new. Thank you for your content - you are a pillar of the KZbin/CSS community.
@avi12
@avi12 8 ай бұрын
Holy cow, did you read my mind? I had just implemented today a horizontal scroll component and this video came just in time
@whistlerbrad
@whistlerbrad 8 ай бұрын
Thanks for posting this video Kevin. Always helpful to review the logic and issues we might face with CSS
@DennisTheZZZ
@DennisTheZZZ 8 ай бұрын
So, basically: min-height/min-width = how high/wide *should* an element at least be? max-height/max-width = how high/wide *can* an element be? height/width = how high/wide *is* an element?
@Ebishenmansfield
@Ebishenmansfield 8 ай бұрын
True
@mhewson
@mhewson 8 ай бұрын
This was next on my list! now to dynamically add user controls based on overflow - thanks!
@QwDragon
@QwDragon 8 ай бұрын
I can do it if you have a free pixel on each side :)
@NSKolazar
@NSKolazar 8 ай бұрын
To be real, this is good to learn as i didn't even know that sort of thing can be done (i'm still very much a newbie in all this), but what i love in your videos on these kinds of topics is that i find new tricks. What i mean is i never knew i could just type for example "p*10>lorem" to make 10 paragraph tags with lorem text in it. So now i can do assignments even quicker.
@iamtharunraj
@iamtharunraj 8 ай бұрын
Hi there, i strongly recommend you to learn the Emmet code completion. It will make your workflow much faster and easier!
@NSKolazar
@NSKolazar 8 ай бұрын
@@iamtharunraj Thank you for the recommendation. I guess i never realized it before. I maybe have used abbreviations so far like typing the tag name but never realized i could do more with it
@EricFressange
@EricFressange 8 ай бұрын
nice trick colums + overflow-x ^^
@MrJettann
@MrJettann 8 ай бұрын
Kevin, let's make some interesting horizontal layout to get inspiration and the idea of how to build horizontal scrolling website
@raptorvenom7983
@raptorvenom7983 8 ай бұрын
bump
@CharlieThorstenson
@CharlieThorstenson 8 ай бұрын
I really enjoy this “friendly” approach on videos. Great as always Kevin! Does anyone have tips on similar channels for JavaScript? Friendly and not those over-hyped guys…
@gudelvechio
@gudelvechio 8 ай бұрын
Thank you Kevin!! Very good. Please, how would you hide this horizontal scrollbar, but continue scrolling, like a Netflix or Disney+ row of movies? Is it possible in a simple way that works on all modern browsers? I got this result by absolute positioning the inner div and moving a little down this entire inner div. With outer div positioned as relative and overflow set to hidden, the horizontal scrollbar gets hidden down the outer div. To compensate the position, I used the negative margin-top to outer. Works well, but looks more an workaround than a simple solution!!! Thank you a lot!
@intsfanatic
@intsfanatic 8 ай бұрын
I dont understand why the outer and inner. Just apply height 100%, overflow-y hidden and overflow-x auto to the body itself. No need for vh units either.
@toddcamnitz6164
@toddcamnitz6164 8 ай бұрын
May as well ask a true css expert: can you think of a *css-only* way to style conditionally by the the user chooses? I’ve landed on “this is not possible without js.” For the sake of argument, let’s say the css-only constraint is a hard constraint imposed by the tech stack (actually true.)
@MrCrackerplays
@MrCrackerplays 8 ай бұрын
you should be able check for option:checked and put that in :has() to style the e.g. for the first example on the mozilla documentation on select#pet-select:has(option[value="dog"]:checked) { background: red; }
@toddcamnitz6164
@toddcamnitz6164 8 ай бұрын
@@MrCrackerplays this is so excellent. totally the answer. my deepest thanks. This question is all over SO through the years and everyone says there's no option. astounding. chaining :has :checked is new to me and super useful to know. It's worth pointing out that (at least in my codepen) this does format all the selections in the dropdown (but only in the dropdown) the same as whatever you've set here, but that styling does go away upon selecting something else (e.g., in your example, if you were to select dog, then click the dropdown again, the dropdown options will all display with the "dog" styling, but this goes away upon selecting something else. In case you're interested, the use case is where the first option is a placeholder text, and the remaining options are things the user is intended to click. Still, this is by far the closest I've seen anyone come. Well done.
@MrCrackerplays
@MrCrackerplays 8 ай бұрын
@@toddcamnitz6164 it's of course also possible to instead style the option rather than the select itself with select#pet-select option[value="dog"]:checked or using css variables you define on the select, use on the option, and can re-define on the select based on a select:has() but it entirely depends on what exactly you want to style about the select and the options also, the displaying of the background color differs a lot between chrome and firefox, if that's something you care about
@toddcamnitz6164
@toddcamnitz6164 8 ай бұрын
@@MrCrackerplays interesting ideas - I'll play around with this and see what I get. Definitely seeing the inconsistent results. I love that MDN leads with " is notoriously hard to style..." My thanks again for your time and ideas.
@Royal-1992
@Royal-1992 8 ай бұрын
Hi Kevin, could you please tell me can we get all spacing details at once in a web page? Is it margins or paddings..
@parenteseswebdev
@parenteseswebdev 8 ай бұрын
Be handy to know how discord works as I havn't a clue. Can you do a video as I can't understand it.
@probaye
@probaye 8 ай бұрын
another video, another self-imposed obstacle gone!
@aum6032
@aum6032 8 ай бұрын
Off to Google about "svh" brb
@NotKyleChicago
@NotKyleChicago Күн бұрын
Svh = small visible height? There's also dvh, which is similar.
@Zorrle001
@Zorrle001 8 ай бұрын
Hello
@shanappy7041
@shanappy7041 8 ай бұрын
Hi
@vontower
@vontower 8 ай бұрын
heyo
@dominicdomingo9654
@dominicdomingo9654 8 ай бұрын
Early
A better image reset for your CSS
11:16
Kevin Powell
Рет қаралды 115 М.
A new approach to container and wrapper classes
25:27
Kevin Powell
Рет қаралды 270 М.
The Best Band 😅 #toshleh #viralshort
00:11
Toshleh
Рет қаралды 21 МЛН
99.9% IMPOSSIBLE
00:24
STORROR
Рет қаралды 30 МЛН
Mom Hack for Cooking Solo with a Little One! 🍳👶
00:15
5-Minute Crafts HOUSE
Рет қаралды 22 МЛН
Can I clone this rotating, gradient, inner glow effect?
23:05
Kevin Powell
Рет қаралды 47 М.
Create a Sick Horizontal Scroll Animation | GreenSock / JS
12:57
DesignCourse
Рет қаралды 60 М.
i built a viral app but don't know how to code.
16:26
Nicolas Moser
Рет қаралды 27 М.
My top 5 most popular front-end tips
22:07
Kevin Powell
Рет қаралды 67 М.
Discord Made The Coolest CSS Only Input Animation
17:48
Web Dev Simplified
Рет қаралды 48 М.
Master CSS Overflow/Text Wrapping Like A Senior Developer
20:53
Web Dev Simplified
Рет қаралды 60 М.
A practical guide to responsive web design
23:13
Kevin Powell
Рет қаралды 247 М.
You Don't Need JavaScript For This - CSS ONLY Infinite Scroll
23:35
Slaying The Dragon
Рет қаралды 150 М.
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 748 М.
CSS Popover + Anchor Positioning is Magical
20:44
Kevin Powell
Рет қаралды 47 М.
The Best Band 😅 #toshleh #viralshort
00:11
Toshleh
Рет қаралды 21 МЛН