Open NashJames opened 2 years ago
Hey @NashJames, do you have an example of the exact issue you're running into that we could take a look at? It would help with prescribing a solution
This any help?
I had to use a styled-components global style to fix it for now:
const CheckBoxStyleFix = createGlobalStyle`
.bx--form-item.bx--checkbox-wrapper {
margin-top: 0.1875rem
}
`
@NashJames Thanks for that, I think this makes sense as an enhancement. We should add a prop that allows users to have the checkboxes display horizontally rather than stack in columns
Found this
:first-of-type
property messing with out layout with a bunch of checkboxes. There's lots of cases to use them in a row, rather than column. Looks like it was built deliberately for column usage. The spacing between also is based on column, so is the:last-of-type
.https://github.com/carbon-design-system/carbon/blob/699b700b80ccdd31e6bc46a166b184e58571bbd4/packages/styles/scss/components/checkbox/_checkbox.scss#L25-L27
I would have sent a PR to delete those properties, and maybe replace space between with gap. But there's a couple ways to solve it you might prefer.