Dynamic horizontal scrolling based on the amount of content
Vložit
- čas přidán 27. 03. 2024
- Join the Discord 👉 kevinpowell.co/discord
Looking to step up your CSS game? 👉 kevinpowell.co/courses?...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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 CZcams/CSS community.
Holy cow, did you read my mind? I had just implemented today a horizontal scroll component and this video came just in time
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?
True
Thanks for posting this video Kevin. Always helpful to review the logic and issues we might face with CSS
nice trick colums + overflow-x ^^
This was next on my list! now to dynamically add user controls based on overflow - thanks!
I can do it if you have a free pixel on each side :)
Kevin, let's make some interesting horizontal layout to get inspiration and the idea of how to build horizontal scrolling website
bump
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…
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.
Hi there, i strongly recommend you to learn the Emmet code completion. It will make your workflow much faster and easier!
@@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
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!
Hi Kevin, could you please tell me can we get all spacing details at once in a web page? Is it margins or paddings..
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.
Be handy to know how discord works as I havn't a clue. Can you do a video as I can't understand it.
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.)
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;
}
@@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.
@@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
@@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.
Off to Google about "svh" brb
another video, another self-imposed obstacle gone!
heyo
Hello
Hi
Early