Rägnar O'ock Comments - Answer Overflow

You should not use grid or flex for this kind of layout because there is : - no structural constraints of size for the elements outside of the length of the text - no constraint from one element to its siblings regarding in-axis sizing (so no need for flex) - no visually apparent grid in the disposition of the elements (so no need for grid)

6 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 8/14/2024 in #front-end

Trying to use grid over flex-box in my own work, how would you do this?

The card itself is just a stack of elements, and by default block elements (like headings, paragraphs, and lists) stack vertically. You just need a max with on the card, and maybe some margin on the internal elements but that's it

6 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 8/14/2024 in #front-end

Trying to use grid over flex-box in my own work, how would you do this?

Everything else can be done without touching any display prop

6 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 8/14/2024 in #front-end

Trying to use grid over flex-box in my own work, how would you do this?

I fail to see where you would need to use either grid of flex for such a layout. The only grid/flex I would use there is to center the main container on both axis

6 replies

KPCKevin Powell - Community

•Created by Marie-ChristineD on 8/14/2024 in #front-end

border-radius percentage of what?

And if you want to mimic the "not circle" aspect of percentage based border-radius you can provide 2 values for each corner. One for the width of the radius and one for the height

10 replies

KPCKevin Powell - Community

•Created by Nick on 8/10/2024 in #front-end

Accessing multiple HTML ID selectors and changing innerHTML of them.

If you are explicit sure...

14 replies

KPCKevin Powell - Community

•Created by Orz on 8/10/2024 in #front-end

Does a TextArea component affect its siblings? Why does this happen (video)

The button in the last one is at the bottom because buttons are inline elements by default so the line up with the bottom of the line of text (e.i. the bottom of the container). If you set them to display: block they should jump to the top (and have their margins change a bit... But that's a detail)

5 replies

KPCKevin Powell - Community

•Created by Orz on 8/10/2024 in #front-end

Does a TextArea component affect its siblings? Why does this happen (video)

If you look at the space below the inputs and the text area you'll see it's the same on every line. I can't be sure with just a video but either the elements have a vertical-align (like Mark pointed out) or a margin-bottom that are pushing them up from the bottom of the container. The inputs looking center is just a coincidence (and if you check they aren't exactly centered) because the container's height is dictated by the biggest element. For the groups with inputs it's the button but for the last one it's the text area

5 replies

KPCKevin Powell - Community

•Created by Nick on 8/10/2024 in #front-end

Accessing multiple HTML ID selectors and changing innerHTML of them.

That's hacky... I would go with Mannix's solution or (if possible) add a class or a data-* attribute on the elements that needs formatting and do a single query selector on that class or attribute instead. It makes it so you don't need to maintain a list of stuff to format, but that might not be an issue for you (if you need to format every single element you deal with for example)

14 replies

KPCKevin Powell - Community

•Created by Rägnar O'ock on 8/7/2024 in #front-end

Help me understanding how a type works

Typescript Playground

2 replies

KPCKevin Powell - Community

•Created by CDL on 6/7/2024 in #front-end

Grid layout to cover spacing with Header/Footer/Content

one could use a grid to have the elements all lined up vertically... but that would be dumb. you can do this tho https://codepen.io/ragnar_ock/pen/VwOzaLa

3 replies

KPCKevin Powell - Community

•Created by vince on 5/20/2024 in #front-end

How would you start this tricky section?

That's what I did in the codepen I posted (the one I forked from B1)

146 replies

KPCKevin Powell - Community

•Created by vince on 5/20/2024 in #front-end

How would you start this tricky section?

it was too small

146 replies

KPCKevin Powell - Community