React-Toolbox checkboxes inline

Question

I'm currently facing a problem with react-toolbox-checkboxes https://github.com/react-toolbox/react-toolbox/tree/dev/components/checkbox while trying to display them inline like this:

But all I can do is displaying them like this:

Code looks like this:

           <Checkbox
                checked={this.state.checkboxes[0].task}
                label={t('search:instance_template.task')}
                onChange={() => {
                    this.handleCheckboxChange(0, 'task')
                }}
            />

Styles like this:

input[type="checkbox"]{
    display: inline-block;
}

The checkboxes does receive classes and attributes but attributes like "display: inline-block" don't have any effect onto them. Any ideas? Thanks!

Yes i did. Variations of: `style={{display: 'flex', flexDirection: 'row'}}` — Nocebo, Aug 04 '17 at 06:39
@Hash Looks pretty good. Only a little margin and padding and that's what I wanted. Thank you! — Nocebo, Aug 04 '17 at 06:45

score 2 · Answer 1 · answered Aug 04 '17 at 06:53

Based on the comment of @Hash this is the result:

        <div id="instanceCheckboxes" style={{display: 'inline-flex', flexDirection: 'row'}}>
                <Checkbox
                    checked={this.state.checkboxes[0].task}
                    label={t('search:instance_template.task')}
                    onChange={() => {
                        this.handleCheckboxChange(0, 'task')
                    }}
                />
                ...
            </div>

It wasn't necessary to style the checkboxes directly. That's the result:

score 2 · Accepted Answer · answered Aug 04 '17 at 07:15

2

[Reading Purposes] Linking two pages as well that will help on how each style works. Flexbox, CSSFlexbox

Sample related to question.

answered Aug 04 '17 at 07:15

Hash

7,726
9
34
53

@Nocebo have a great day :) – Hash Aug 04 '17 at 07:32

React-Toolbox checkboxes inline

2 Answers2