Looking for help with CSS + Inputs

[aaronkyle]

Hi Community!

I am trying to arrange Inputs using a table (if this not a good idea, please let me know). Making everything look nice with CSS is challenging -- particularly in terms of controlling the sizes of checkbox labels.

So far I can get the labels to wrap, and I can control the width of the labels. But no matter what I try, I can't get the div container for the input 'form' to work correctly.

The closest I have come is this bit of CSS:

[class*="inputs"][class*="checkbox"] > div {
    max-width: 200px; /* Optional max width */
}

This wraps the text, but the div is still being controlled by the theme CSS, which applies to all inputs (and I wish only to override for checkboxes). If I try to override like this:

[class*="inputs"][class*="checkbox"] {
    --input-width: 140px; /* Ensure input-width is overridden */
}

... The console code inspector shows that the override has taken, but the behavior doesn't change in the same manner as if I 'uncheck' the line (shown as strikeout).

That is, here's the override showing that it 'should be' applied

But I still get this (too much space):

Whereas if I uncheck this:

I get this (nice and tight):

... At the end of the day I am just trying to get a compact arrangement of Inputs that can be easily seen on the desktop and browser. I welcome all tips and suggestions!

Here's the page where I am working:
https://s3.us-east-1.amazonaws.com/data.exchange/ps/7/dist/report_input.html

And here's a GitHub repo showing where I am at:

https://github.com/aaronkyle/socdev-explorations/blob/main/src/report_input.md?plain=1

I'd love some help :) <3 Thank you!

[aaronkyle]

Merry Christmas to those who celebrate :) Still banging my head on this one. The original style parameter is coming from stdlib/inputs.css (rather than the theme), and I am not sure how to work around it. If I navigate into the stylesheet from the browser inspector and remove --input-width: 240px;, then everything renders how I wish:

If I try to 'unset' it on my page with:

form.inputs-3a86ea {
  --input-width: unset;
}

The behavior is different, and it breaks the customized max widths I have set for textarea and select:

Is my approach here completely incorrect? Should I instead be doing something like forcing the table column size or not using tables and reconstructing my layout somehow? I've seen this thread where @Fil demonstrates how to package inputs into a form, and then to renders them all on one line. I took the table approach because I wanted to 'stack' a couple of inputs in a single table column.... and also because it's easier for me to conceptually understand placement in a table vs. trying to accomplish the form definition with pure CSS.

I welcome your help!

<3

[aaronkyle]

... Updated the built site with some additional CSS--adding a class to fix the width of my column. This approach generally seems to work. Still many issues ahead (like why my overflow scrolling isn't working on mobile), but I figure this one is solved insofar as I determined my original approach probably wasn't the best.