I am currently working on developing an Angular application that will showcase a JSON data structure in a layout similar to a chatbox. To achieve this, I have created a component specifically for the "chatbox".
Here is an example of the data structure within my chatbox.component.ts file:
test = [
{ "date":"1","sender":"x","answer":"hello"},
{ "date": "2", "sender": "y", "answer": "hello my friend" },
{ "date": "3", "sender": "z", "answer": "bye" }
];
In the chatbox.component.html file:
<div class="inboxContainer">
<tr *ngFor="let msg of test">
<div class="wrapper">
<div class="sender">Sender: {{msg.sender}}</div>
<div class="date">Date : {{msg.date}}</div>
</div>
<div class="answer">Message: {{msg.answer}}<br></div>
</tr>
</div>
<div class="newMessageContainer">
<mat-form-field>
<mat-label>New Message</mat-label>
<textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="3"></textarea>
</mat-form-field>
</div>
<div class ="sendMessageContainer">
<button mat-button>
Send
</button>
</div>
Within the chatbox.component.css file:
.inboxContainer {
width: 40vw;
height: 60vh;
border: 1px solid black;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.newMessageContainer {
margin: auto;
position: absolute;
top: 80vh;
left: 30vw;
bottom: 0;
right: 0;
}
.mat-form-field {
width: 30vw;
top:0.1vh;
}
.mat-button {
left: 4vw;
top:1.4vh;
background-color: #B29B59;
}
.sendMessageContainer {
margin: auto;
position: absolute;
top: 80vh;
left: 60vw;
bottom: 0;
right: 0;
}
.wrapper {
display:flex;
}
.date {
border:1px solid black;
width: 20vw;
border-right:none;
border-left:none;
}
.sender {
border:1px solid black;
width: 20vw;
border-left:none;
}
.answer {
width: 38.8vw;
height: 18vh;
}
If you view the external links provided, you can see that currently, the messages overflow beyond the fixed border when more than three messages are displayed. My query is centered around how to implement scrollbars within the div to address this issue.