Display image cropped notification on side of a button - html

Question

I'm working with ReactJS and this success notification thing is not working as expected. When I crop the image and click on Confirm Crop button as shown in image below, I get the Loading loader and after the image is cropped it shows Image Saved! notification below the Confirm Crop button. But I want the Loading and Image Saved on side of the button, someone else worked on this before me and I am unable to solve this. What could fix the problem?
This is the form I'm working on below:
return (
<form className="form-horizontal" ref="form" onSubmit={this.handleForm}>
<fieldset>
<legend>
{this.state.success === true ? (
this.props.history.push(`/${serviceId}`)
) : this.state.success === false ? (
<Alert bsStyle="danger">
<strong>An error occured!</strong>
<ol>
{this.state.errorMessages.map((err, index) => (
<li key={index}>{err.message}</li>
))}
</ol>
</Alert>
) : (
""
)}
</legend>
<div className="row-fluid">
<div className="span5">
<div
className={
this.state.invalid.name === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="name">
Name: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="name"
defaultValue={this.state.form.name}
name="name"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.image === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="image">
Image: <i className="required">*</i>
</label>
<div className="controls">
<input
type="file"
name="image"
defaultValue={this.state.form.image}
onChange={this.handleState}
accept="image/gif, image/png, image/jpeg, image/jpg"
required
/>
<span className="help-inline">File Type: png, gif, jpg</span>
<div>
<ReactCrop
src={
this.state.companyImage === null
? ""
: this.state.companyImage
}
crop={this.state.crop}
onImageLoaded={this.handleImageLoaded.bind(this)}
onComplete={this.handleOnCropComplete.bind(this)}
onChange={this.handleOnCropChange.bind(this)}
keepSelection={true}
/>
</div>
{this.state.croppedImageUrl && (
<img alt="Crop" src={this.state.croppedImageUrl} />
)}
<br />
{this.state.croppedImageUrl ? (
<div>
<button
className="btn btn-primary"
type="button"
onClick={this.handleState}
>
Confirm Crop
</button>
</div>
) : null}
</div>
</div>
{this.state.imageFetching && (
<div className="controls">
<p className="imageWait">Loading...</p>
</div>
)}
{this.state.showImageSuccess && (
<div className="controls">
<p style={{ color: "green" }}>Image Saved! </p>
</div>
)}
<div
className={
this.state.invalid.address
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="address">
Address <i className="required">*</i>
</label>
<div className="controls">
<textarea
rows="4"
required
cols="20"
id="address"
name="address"
onChange={this.handleState}
defaultValue={this.state.form.address}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.telephone
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="telephone">
Telephone: <i className="required">*</i>
</label>
<div className="controls">
<input
type="number"
step="any"
required
name="telephone"
defaultValue={this.state.form.telephone}
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.city === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="city">
City: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="city"
defaultValue={this.state.form.city}
name="city"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.country === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="country">
Country: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="country"
defaultValue={this.state.form.country}
name="country"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div className="row-fluid">
<div className="span12">
<button
className={disabledColor}
type="submit"
disabled={this.state.disabled}
ref={button => {
this.submitButton = button;
}}
>
Submit
</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
);
How it looks right now:
The "Image Saved!" notification also appears in the same place as Loading as evident from code above, I need them on the side of the button.
This link provides the entire file and css associated with it that I'm working: https://gist.github.com/BikalNepal/0fe035e8845a5bb92c477abd9c003a50
CSS: https://gist.github.com/BikalNepal/73a3db6127ebda4b5489be8df3143d43

Answer 1

You need to re-structure you react element and that's all.
{this.state.croppedImageUrl ? (
<div className="flexContainer">
<button
className="btn btn-primary"
type="button"
onClick={this.handleState}
>
Confirm Crop
</button>
{this.state.imageFetching && (
<div className="controls">
<p className="imageWait">Loading...</p>
</div>
)}
{this.state.showImageSuccess && (
<div className="controls">
<p style={{ color: "green" }}>Image Saved! </p>
</div>
)}
</div>
) : null}
NOTE: All what I've done is: wrapped the elements that need to share same horizontal space, in one parent div.
And in the css file introduce a class:
.flexContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
This might lead to lot of spacing between your button and notification. If so, try adding max-width: requiredValue; in the definition of the flexContainer class.