CODEWITHSUNDEEP
javascriptreactjstextfield
user2026934
user2026934

Reputation: 133

textfields, icon and label in a single line

I am using react-reduxm office-fabric-ui. Here is my code:

<Icon className="delete-transform-icon" iconName="Delete" />
<Dropdown
   className="modal-value-transform-type-dropdown"
   label={translate("transformTypeLabel")}
   placeHolder={this.state.transform.transformType}                     
   ariaLabel={translate("transformTypeLabel")}
/>
 <br />
<TextField
    className="modal-value-transform-type-TextField"
    label={translate("transformDefaultValue")}
    ariaLabel={translate("transformDefaultValue")}
    placeholder={this.state.transform.defaultValue}
 />

it comes in 5 lines.enter image description here

But I want them in one line like: enter image description here How can I do it?

Upvotes: 0

Views: 49

Answers (1)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

I would recommend to remove the br and use any GRID LAYOUT like bootstrap, material-ui etc. It is much easier to manage elements in columns. you can do something like this:

<div className='row'>
  <div className = 'col-4'></div>
  <div className = 'col-4'></div>
  <div className = 'col-4'></div>
</div>

This is just an basic example how you can utilize the power of grid layout. Mostly UI libraries has 12 columns / row grid layout. I hope this would be helpful.

Upvotes: 1

Related Questions