CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapreactjs
bsky
bsky

Reputation: 20222

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

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:

enter image description here

How could I add some padding between them?

Upvotes: 1

Views: 9714

Answers (2)

Jonathan Lam
Jonathan Lam

Reputation: 17351

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).

Upvotes: 0

Clarkie
Clarkie

Reputation: 7550

@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.

Upvotes: 2

Related Questions