Place label and input field on the same row, with padding

Question

I have a label and a text field which I want to be displayed on the same line.

I looked this up here Label on the left side instead above an input field and changed my code to use form-inline:

<div className="form-group form-inline">
    <label style={{display: 'margin-right:10px'}}>Category</label>
    <select className="form-control" value={this.state.selectCategoryValue} onChange={this.handleSelectCat} style={{display:'inline-block'}}>
        <option value="defaultCategory" disabled selected></option>
        {categoryDesc}
    </select>
</div>

However, now there is no padding between the text and the input field, although I tried setting margin-right:

How could I add some padding between them?

Try setting either the label to have `style="margin-right: 10px; display: inline-block;"` or have the select have `style="margin-left: 10px; display: inline-block;"` — Aeolingamenfel, Nov 19 '15 at 19:05

score 2 · Answer 1 · edited May 23 '17 at 12:10

@Jonathan's answer will work but that may well not be what you're after. By letting React handle the styles for you allows for greater flexibility when you want to manipulate the styles based on external interactions (e.g. server state, user input, etc).

In your example you may want to use the following:

<div className="form-group form-inline">
    <label style={{marginRight: '10px'}}>Category</label>
    <select className="form-control" value={this.state.selectCategoryValue} onChange={this.handleSelectCat} style={{display:'inline-block'}}>
        <option value="defaultCategory" disabled selected></option>
        {categoryDesc}
    </select>
</div>

Basically you can use any css style but you need to camelCase the property.

React inline styles docs

There's then some further discussion here on best practices.

score 0 · Answer 2 · edited Nov 20 '15 at 08:36

0

All you have to do is change the {{[style]}} to "[style]". I'm not sure what you're doing with the curly brackets because I don't understand React.js (and I assume that is React.js syntax), but you can simply put the style in quotations.

Therefore, the following line:

<label style={{display: 'margin-right:10px'}}>Category</label>

should simply be:

<label style={{marginRight: '10px'}}>Category</label>

See working example here on JSFiddle.net (I exaggerated the margin-right just to show the difference).

edited Nov 20 '15 at 08:36

Brigand

84,529
20
165
173

answered Nov 19 '15 at 19:59

Jonathan Lam

16,831
17
68
94

The double curly brackets are indeed jsx syntax; it is basically a standard js object inside a jsx 'placeholder'. – Clarkie Nov 20 '15 at 07:37

Place label and input field on the same row, with padding

2 Answers2