CODEWITHSUNDEEP
htmlcssreactjs
user11669757
user11669757

Reputation:

How can I move the green text under the image?

How can I move the green text from the image attached under the image icon?

I need to move it just under the image. I am using ReactJS and HTML. The text appears when a therapist has paid for their account.

enter image description here

<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
    <li key={this.props.index} className="tc-list-item">
        {/* Avatar Container */}
        <div className="tc-image-container">
            <img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
        </div>
        {/* User Profile Container */}
        <div className="tc-info-container">
            {/* Name & Title */}
            <div className="tc-main-info">
                <span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
                <span className="tc-u-title">&nbsp;{ ` ${this.therapist.title || 'Therapist'}` }</span>
            </div>
            <div className="flags-row">
                {this.renderVerifiedFlag()}
                {this.renderInsuranceFlag()}
            </div>
            {/* Details */}
            <div className="tc-details-info">
                {/* Email */}
                <div className="tr-reviews-row">
                    <Rating placeholderRating={this.therapist.avgScore || 0}
                        emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
                        placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />} 
                        readonly/>
                    <span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
                </div>
                {/* Phone */}
                {this.renderContactInfo()}

            </div>
        </div>
        <ReactTooltip type="info" place="right"/>
    </li>
</Link>

and here is the css part 

& .tc-image-container {
        width: 130px;
        height: 130px;
        border-radius: 15px;
        overflow: hidden;
    }

    & .tc-image-container img {
        width: 100%;
        height: 100%;
    }

    & .tc-info-container {
        //margin-left: 140px;
        flex: 1;
        padding-left: 50px;
    }

Upvotes: 0

Views: 83

Answers (3)

RichardDev
RichardDev

Reputation: 551

Moving the verified provider text code directly under the img code will do the trick. Might just have to adjust bottom margin for the img for spacing.

Upvotes: 0

Claire Lin
Claire Lin

Reputation: 2382

Try moving the flag row to the left column:

// Add a new div with the class name "left-col"
<div className="left-col">
    <div className="tc-image-container">
      <img src={this.getAvatarUrl(this.therapist)} alt="therapist-avatar" />
    </div>
    // Move the flags-row div from its original place to here
    <div className="flags-row">
      {this.renderVerifiedFlag()}
      {this.renderInsuranceFlag()}
    </div>
</div>
<div className="tc-info-container">
    ...the rest of your DOM remains unchanged
</div>

// Give .left-col div the same width as the current image-container.
& .left-col {
  width: 130px;
}

You might need to fiddle with the CSS a bit. But the general idea is here.

Upvotes: 0

TinMonkey
TinMonkey

Reputation: 1842

If I'm understanding your question correctly, its very simple... just move the div to the correct location in your html.

<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
<li key={this.props.index} className="tc-list-item">
    {/* Avatar Container */}
    <div className="tc-image-container">
        <img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
    </div>

    <!-- Moved it to here -- >
    <div className="flags-row">
        {this.renderVerifiedFlag()}
        {this.renderInsuranceFlag()}
    </div>

    {/* User Profile Container */}
    <div className="tc-info-container">
        {/* Name & Title */}
        <div className="tc-main-info">
            <span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
            <span className="tc-u-title">&nbsp;{ ` ${this.therapist.title || 'Therapist'}` }</span>
        </div>

        <!-- text was here -->

        {/* Details */}
        <div className="tc-details-info">
            {/* Email */}
            <div className="tr-reviews-row">
                <Rating placeholderRating={this.therapist.avgScore || 0}
                    emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
                    placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />} 
                    readonly/>
                <span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
            </div>
            {/* Phone */}
            {this.renderContactInfo()}

        </div>
    </div>
    <ReactTooltip type="info" place="right"/>
</li>

Upvotes: 1

Related Questions