How can I make text flow around an icon in my React App?

user_15937693 0
Viewed 108

I've been trying to create an note item in react, but I can't make the note description display over the trash icon, how can I get this effect?

This is what I want:

This is what I want

This is what I get:

This is what I get

My react code:

import React from 'react';
import { FiTrash2, FiCalendar, FiBookmark } from 'react-icons/fi';

import { NoteType } from '../../utils/types';
import { formatDate } from '../../utils/functions';

import './styles.css';

interface NoteItem {
    note: NoteType;
    onEdit(): void;
    onDelete(): void;
}

const NoteItem: React.FC<NoteItem> = ({ note, onEdit, onDelete }) => {
    return (
        <div className="NoteItem" style={{ borderColor: note.color }}>
            <div className="info" onClick={ onEdit }>
                <p>{ note.description }</p>
                
                <div className="rows">
                    <div className="row">
                        <FiBookmark size={ 18 } className="icon" color={ note.color } />
                        <p>{ note.status }</p>
                    </div>
                    <div className="row">
                        <FiCalendar size={ 18 } className="icon" color={ note.color } />
                        <p>{ formatDate(note.created_at) }</p>
                    </div>
                </div>
            </div>

            <div className="buttons">
                <button title="Deletar" onClick={ onDelete }>
                    <FiTrash2 size={ 18 } className="remove" />
                </button>
            </div>
        </div>
    );
}

export default NoteItem;

Can anyone help me?

typescript reactjs css html javascript
2 Answers

Required output can be achieved with the use of float. You need to provide float:right to buttons div. Here's the working fiddle -

JS fiddle link

Note - Maybe some changes are required in the JSX structure as well.

user_48492580

You can do that when you wrap the rows inside the Paragraph but first you have to give a specific width to the rows, put it at first and set it's style to float: right

const NoteItem: React.FC<NoteItem> = ({ note, onEdit, onDelete }) => {
    return (
        <div className="NoteItem" style={{ borderColor: note.color }}>
            <div className="info" onClick={ onEdit }>
                <p>
                <div className="rows" style="float:right; width:170px;">
                    <div className="row">
                        <FiBookmark size={ 18 } className="icon" color={ note.color } />
                        <p>{ note.status }</p>
                    </div>
                    <div className="row">
                        <FiCalendar size={ 18 } className="icon" color={ note.color } />
                        <p>{ formatDate(note.created_at) }</p>
                    </div>
                </div>
                  { note.description }
                </p>
                

            </div>

            <div className="buttons">
                <button title="Deletar" onClick={ onDelete }>
                    <FiTrash2 size={ 18 } className="remove" />
                </button>
            </div>
        </div>
    );
}
user_29549300
Related