Ionic grid, colum sizing

Ionic Framework Ionic React
1

Hello

I am building a chat functionality in my app. Everything works fine, i just need some help with the styling. I am using a grid for the chat, each message being a row. Depending on if you are the sender or receiver of the message, it has to have a different layout.
This is done with a ternary operator

eg: ${message.userid == userId ? styles.sender : styles.receiver}

As you can see in my screenshot, all rows/collumns are the same length. I want it to change length depending on the message.
Is there any way the column size can be adjusted dynamically using this grid format?

A second, less important, question. The

tag for message.text has 2 classes ‘text’ and ‘sender’ or ‘receiver’. The stuff i place in ‘text’ never works (shared stuff between sender and receiver was placed in text but i never got it work using regular css class selectors)

Message Component:

interface MessageProps {
    message: MessageModel;
}

const Message: React.FC<MessageProps> = ({ message}) => {
    const { userId } = useAuth();

    return (
        <IonRow class={"ion-no-margin ion-no-padding"} >
            <IonCol offset={`${message.userid == userId ? 3 : 0}`} size="9" className="ion-no-margin ion-no-padding">
                {message.userid != userId ?  <p className={styles.username} >{message.username}</p> : <div />}
                <p className={`text ${message.userid == userId ? styles.sender : styles.receiver}`}>{message.text}</p>
            </IonCol>
        </IonRow>
    );
};

export default Message;

styles for message component:

.username {
    font-size: 80%;
}


p.sender {
    background-color: var(--ion-color-tertiary);
    color: #fff;
    white-space: pre-wrap;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
}

p.receiver {
    background-color: var(--ion-color-secondary);
    text-align: left;
    color: #fff;
    white-space: pre-wrap;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
}

Message component being used in chat view:

                <IonGrid>
                    {messages.length == 0 ?
                        <h2 className="ion-margin ">Er zijn nog geen berichten verstuurd over dit recept.</h2>
                        :
                        messages.map((message, index) =>
                            <Message message={message} key={index} />
                    )}
                </IonGrid>

How it looks:

qsdsfdfsqdsdfdsqfdsfdsf
qsdsfdfsqdsdfdsqfdsfdsf560×1206 69.9 KB

2

If you dynamically adjust the column size, then when the column size becomes smaller, you will have multiple messages in the same line.

So instead of

SENDER MESSAGE
   RECEIVER MESSAGE
   RECEIVER MESSAGE
   RECEIVER MESSAGE

You might get:

SENDER MESSAGE
   RECEIVER MESSAGE RECEIVER MESSAGE
   RECEIVER MESSAGE

What you probably want is to change the alignment and length of the text bubble.

To do that, I would wrap your messages in a grid like this:

<IonCol>
  <div className="important-classes-go-here">
    <p>Message</p>

It’s much easier to position <div> than <p>, and it’s also more semantically correct (<p> is for paragraph, and if a user writes a very long chat message, that message could consist of multiple paragraphs).

3

I Dont think i would get

SENDER MESSAGE
   RECEIVER MESSAGE RECEIVER MESSAGE
   RECEIVER MESSAGE

As every message is its own row.

Right now the p tag is as wide as a colum:

Screenshot 2022-01-15 225310

I want it to be as wide as “needed” so the background color is only behind the text itself and not applied to the whole colum

4

If you want the background color only applied to the text, you can use a <span> tag inside the <p> tag as described in this SO question.