CSS grid - DIV's as radio

HTML-CSS
5

The overarching document structure shouldn’t affect it at all, I just used flexbox for the sake of making a quick demo.

6

@lasjorg indeed that’s what I’m trying to achieve. :slight_smile:

7

What you have now works you just need to add Jquery and fix the selector for the click handler.

$('.acht').click

Edit: That selector obviously will only work for the one input

8

I’ve updated my codepen, as I realized my proposed solution failed accessibility considerations (impossible to navigate with keyboard).

The fix:

.invisible-radio {
-   display: none;
+   /* per https://a11yproject.com/posts/how-to-hide-content/ */
+   position: absolute;
+   height: 1px;
+   width: 1px;
+   overflow: hidden;
+   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+   clip: rect(1px, 1px, 1px, 1px);
}

...

+ .invisible-radio:focus + label .styled-radio {
+   outline: 8px solid blue;
+ }
9

@lionel-rowe Is it possible to show an example with css grid because it doesn’t seem to work with mee transforming it to css grid. The flex box approach isn’t responsive.

10

To be honest, I haven’t used CSS grid much. CSS grid is overkill for most use cases, unless you have complex full-page layouts that don’t fit into standard columns and rows.

Flexbox is perfect for responsive layouts most of the time. For instance, just by adding flex-wrap: wrap; to the container, the styled radio buttons now wrap around on smaller screens (I updated my pen with the change).

11

Using grid shouldn’t affect anything. If you change the Codepen to make the .flex-container use Grid it works just fine.

.flex-container {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

One thing I don’t get. @quintendewilde Your Codepen is using Jquery is that the plan? What is supposed to happen when you click the radio inputs? What are the requirements?

12

You don’t need jQuery or JavaScript at all if you use label elements.

13

Well, that depends on what you’re trying to do. The original Codepen is alerting out a date attribute value so I assume some kind of JS is going to be used, for something.

14

I sorta assumed that was just for debugging purposes. @quintendewilde could you confirm what your requirements are? Do you just need checkbox-equivalent functionality or something else?

15

@lionel-rowe @lasjorg I’m indeed using javascript for calculating purposes.

I’m following this example http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml

I’m trying out the pens now!

Thanks ahead.

16

In that case, I’d suggest listening to the input event of the form as a whole. Attaching individual click handlers to each checkbox/radio is inefficient, but more importantly, it will fail to account for users changing the state of the form using the keyboard.

This is beyond the scope of styling divs and hiding radio buttons, so I’ve made a new proof-of-concept pen:

17

So your suggestion is to skip the styling of the radios in divs and just focus on the working of it as in the example I showed here: http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml

If so I’ll skip the whole layout and keep it simple. It is a shame that it’s really hard (for me…) to stylize radio inputs.

18

No, you can combine the ideas too. For example, if you try forking my second pen and then drop in the styled radio buttons to replace the unstyled ones, you’ll see that the JavaScript to track form state still works just the same.

If you’re having trouble conceptualizing the ideas, though, it may be better to go back to first principles. The best article I could find that covers this stuff in detail was this one:

Interneting is Hard — HTML Forms

However, it doesn’t touch on how to style radio buttons specifically. I guess fully covering both semantics and styles of forms would be too long for one article. But it’s a good jumping-off point, at least.

19

Thank you, that link is a very great help!

1 Like
20

Focusing on both the CSS and JS at the same time might not be the best approach to take. I would start with the JS as that seems to be your main focus when following the tutorial like you are. I will say without really looking too much at the tutorial code I wasn’t super impressed with it.

Here is another version, I’m not saying the code is great or anything just a different approach. I didn’t really bother to change much of the HTML/CSS and mainly just copied it from the tutorial.

1 Like
21

@lasjorg I’m just coming back on this one for a sec.

In your example which I’m trying to implement i’m unable to multiply the filling (which in my case is a topping) and i’m not finding how to do that in the code (still need to learn a lot about js, that’s why I was following the other form calculation to learn.

22

Why do you need to multiply anything? If it’s similar to the cake example, it should be adding, which is done by this function in @lasjorg’s code:

const getTotal = prices => {
  return prices.reduce((acc, next) => acc + next);
};

If you don’t follow the logic, I recommend reading MDN’s article on Array#reduce.

23

@lionel-rowe In my case it’s multiplying for a topping ex: 2 times topping 1 (1.25$) or 12 times topping 2 (1.75$)

I’ll look into the documentation. thanks!

24