Class If else on Angular - javascript

I have problem when isOnline all the box would be blue and if !isOnline all box would be red but there is problem like
if isOnline && status == Faulted I want this red but it's always go blue.
How to fix this problem
<div [class]="isOnline ? 'bg-gradient-to-br from-blue-900 to-blue-800 mx-4 rounded-2xl my-5 p-5' : 'bg-gradient-to-br from-red-600 to-red-400 mx-4 rounded-2xl my-5 p-5'">
<div *ngIf="status == 'Charging'" class="text-white">
<app-data-transaksi
[currentLanguage]="currentLanguage"
[session_id] = "session_id"
[Energi] = "Energi"
[start_time] = "start_time"
[end_time] = "end_time"
[dateCharging] = "dateCharging"
[timeCharging] = "timeCharging"
[estimateTime] = "estimateTime"
[notif]="notif"
[isMe]="!occupaid"
[user_id]="data.user_id"
></app-data-transaksi>
</div>
<div *ngIf="status !== 'Charging'" class="text-white text-sm flex flex-col justify-center items-center">
<div class="max-w-80 shadow-lg">
<iframe class="rounded-2xl w-full max-w-120" src="https://www.youtube.com/embed/7YC_K9fnoHo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div translate *ngIf="isOnline && !exp" class="mt-3 mx-3">
Hyundai charger is free to use for now
</div>
<div translate *ngIf="exp" class="mt-3 mx-3">
token is expired, please re-scan barcode
</div>
<div translate *ngIf="!isOnline && !exp" class="text-base mt-3 mx-3 font-mono font-semibold">
Hyundai charger is offline for now. Call Customer Center Please !!
</div>
<div translate *ngIf="isOnline && status === 'Faulted'" class="text-base mt-3 mx-3 font-mono font-semibold">
Hyundai charger is Faulted for now. Call Customer Center Please !!
</div>
<div *ngIf="!exp" class="mt-4 w-full max-w-100 px-5 h-12">
<div (click)="timeDown == 0 && checkPlugCharge(0)" *ngIf="isOnline" [class]="timeDown != 0 ? 'h-full bg-gray-400 text-lg font-bold shadow-lg rounded-lg flex items-center justify-center' : (status == 'Available' || status == 'Finishing') ? 'h-full text-blue-900 text-2xl bg-white hover:bg-blue-100 active:bg-blue-200 font-bold shadow-lg rounded-lg flex items-center justify-center cursor-pointer' : 'h-full bg-green-500 hover:bg-green-400 active:bg-green-600 text-white text-2xl shadow-lg rounded-lg flex items-center justify-center cursor-pointer'">
{{timeDown != 0 ? ('Plug the Cable in '| translate) + timeDown + ' s' : 'Activate' | translate}}
</div>
<a href="https://api.whatsapp.com/send?phone=62818878878" translate *ngIf="!isOnline" class="h-full text-red-500 font-bold bg-white hover:bg-blue-100 active:bg-blue-200 shadow-lg rounded-lg flex items-center justify-center cursor-pointer">
Customer Center
</a>
</div>
</div>
</div>


Thank you for both #SehaxX and Farouk Mhamdi, after all conclusion I finally made it thank you
<div [class]="isOnline && status != 'Faulted' ? 'bg-gradient-to-br from-blue-900 to-blue-800 mx-4 rounded-2xl my-5 p-5' : 'bg-gradient-to-br from-red-600 to-red-400 mx-4 rounded-2xl my-5 p-5'">
<div *ngIf="status == 'Charging'" class="text-white">
<app-data-transaksi
[currentLanguage]="currentLanguage"
[session_id] = "session_id"
[Energi] = "Energi"
[start_time] = "start_time"
[end_time] = "end_time"
[dateCharging] = "dateCharging"
[timeCharging] = "timeCharging"
[estimateTime] = "estimateTime"
[notif]="notif"
[isMe]="!occupaid"
[user_id]="data.user_id"
></app-data-transaksi>
</div>
<div *ngIf="status !== 'Charging'" class="text-white text-sm flex flex-col justify-center items-center">
<div class="max-w-80 shadow-lg">
<iframe class="rounded-2xl w-full max-w-120" src="https://www.youtube.com/embed/7YC_K9fnoHo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div translate *ngIf="isOnline && !exp" class="mt-3 mx-3">
Hyundai charger is free to use for now
</div>
<div translate *ngIf="exp" class="mt-3 mx-3">
token is expired, please re-scan barcode
</div>
<div translate *ngIf="!isOnline && !exp" class="text-base mt-3 mx-3 font-mono font-semibold">
Hyundai charger is offline for now. Call Customer Center Please !!
</div>
<div class="flex my-2 space-x-5" *ngIf="status === 'Preparing'">
<form class="p-1" [formGroup]="timerForm">
<input class="border-2 mt-3 w-full px-3 py-1 rounded-md text-black" formControlName="timer" [value]="timerForm.value.timer"
type="number" placeholder="Charging Time in minutes" min="1"/>
</form>
</div>
<div translate *ngIf="status == 'Faulted'" class="text-base mt-3 mx-3 font-mono font-semibold">
Hyundai charger is Faulted for now. Call Customer Center Please !!
</div>

Related

Overflow Issues with Tailwind

I am trying to create a chat like app using tailwind, and I can't seem to get overflow to function properly.
Instead of overflowing, it just stretches the box to fit all the contents.
Please see the code snippet or link below, at line 25 is where the container begins, the top container should span over 5/6 grid rows, and only overflow if the contents exceed the container!
<div class="grid h-screen w-screen grid-rows-6 gap-2 bg-neutral-900 p-1">
<div class="row-span-1 bg-neutral-800">
<div class="h-full w-full p-1">
<div class="mt-5">
<div class="flex flex-wrap justify-between px-5 w-full text-white">
<div>Com</div>
<div>3dub</div>
<div>Prof</div>
</div>
</div>
</div>
</div>
<div class="row-span-5 bg-neutral-800 p-1">
<div class="grid grid-cols-6 w-full h-full gap-1 p-1">
<div class="col-span-1 h-full">
<div class="h-full w-full p-1 bg-neutral-700">
<div class="text-white">Nodes</div>
</div>
</div>
<div class="col-span-5 h-full">
<div class="h-full w-full p-1 bg-neutral-700">
<div class="h-full w-full rounded-lg bg-neutral-600 p-4">
<div class="h-full w-full">
<div class="grid grid-rows-6 h-full w-full gap-y-1">
<div class="row-span-5 w-full rounded-lg bg-neutral-500">
<div class="h-full w-full min-h-0 rounded-lg bg-neutral-500 p-4">
<div class="flex flex-col h-full w-full overflow-y-scroll gap-y-2">
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
</div>
</div>
</div>
<div class="row-span-1 w-full rounded-lg bg-neutral-500">
<div>Message</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://play.tailwindcss.com/2G6f2owRqQ
Edit: Included the wrong play.tailwindcss link

You can just add "overflow-hidden" to line 20.
In line 20 your code must be like below:
<div class="col-span-5 h-full overflow-hidden">
And if you change "overflow-y-scroll" to "overflow-y-auto" in line 28, scrollbar doesn't appear if messages heights don't exceed their parent div.

I am trying to resolve your problem. you can check here

How to change a scroll bar height?

This is my tailwind scroll bar and I want to change its height how can I do that? The below image shows its height. I cannot change the sm:h-96 can you suggest to me an method to change the height ?
{/** Chat Scroll View */}
<div class=" text-gray-500 bg-white rounded-lg border w-full max-w-xl sm:h-96 p-4 overflow-y-scroll scrollbar border-solid border-2 border-red-500">
<div class="space-y-1">
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/300"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Ryann Remo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
23
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/300"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Ryann Remo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
23
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/500"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Karp Bonolo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
10
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/500"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Karp Bonolo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
10
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md border-l-4 border-red-500">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/200"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Mercedes Yemelyan</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/600"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Cadi Kajetán</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/650"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Rina Samuel</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
</div>
</div>
{/** Chat Scroll View */}

If you want to change the height based on your preference you can use an arbitrary value like h-[120px] or h-[30rem] or h-[180px] for example. you can change the value inside the square brackets according to the height you want.
You can learn more about arbitrary values ​​in the tailwind documentation here:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

Close popover in JS when another is opened with popper.js

I have some basic HTML and load popper.js.
I have about 3 popovers but they don't close when I click open another one.
I use tailwind as css and vanilla JS. I don't want to use jQuery to get this to work. It also shows some error about the event being deprecated but not sure how to fix it.
Please help!
Here is my pen: https://codepen.io/RobineSavert/pen/xxLMqpX
Here is my code:
function openPopover(event, tooltipID, position) {
let element = event.target;
while (element.nodeName !== "BUTTON") {
element = element.parentNode;
}
var popper = Popper.createPopper(
element,
document.getElementById(tooltipID), {
placement: position,
}
);
document.getElementById(tooltipID).classList.toggle("hidden");
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/#popperjs/core#2.10.2/dist/umd/popper.min.js"></script>
<section class="bg-gradient-to-b from-night to-babyblue w-full h-95vh justify-center">
<div class="flex flex-1 pr-2 pt-2">
<button onclick="openPopover(event,'popover-cv-bottom', 'bottom')" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12" type="button">
click
</button>
<button onclick="openPopover(event,'popover-email-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
click
</button>
<button onclick="openPopover(event,'popover-save-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
click </button>
<div class="hidden bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-cv-bottom">
<div>
<div
class="text-gray-700 opacity-75 font-semibold p-3
mb-0
border-b border-solid border-gray-100
uppercase
rounded-t-lg
"
>
Popover 1 - title
</div>
<div class="text-gray-700 p-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
non.
</div>
</div>
</div>
<div class="hidden bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-email-bottom">
<div>
<div
class="
text-gray-700
opacity-75
font-semibold
p-3
mb-0
border-b border-solid border-gray-100
uppercase
rounded-t-lg
"
>
Popover 2 - title
</div>
<div class="text-gray-700 p-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
non.
</div>
</div>
</div>
<div class="hidden bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-save-bottom">
<div>
<div
class="
text-gray-700
opacity-75
font-semibold
p-3
mb-0
border-b border-solid border-gray-100
uppercase
rounded-t-lg
"
>
Popover 3 - title
</div>
<div class="text-gray-700 p-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
non.
</div>
</div>
</div>
</div>
</section>

You can try this:
allPoppers = [];
function openPopover(event, tooltipID, position)
{
var el = document.getElementById(tooltipID);
var state = el.style.visibility;
// Close all popovers
hideElements(allPoppers);
let element = event.target;
while (element.nodeName !== "BUTTON") {
element = element.parentNode;
}
Popper.createPopper(
element,
el, {
placement: position,
}
);
allPoppers.push(tooltipID);
toggle(el, state);
}
function toggle(el, state)
{
if (state == "hidden") {
el.style.visibility = "visible";
} else if (state == "visible") {
el.style.visibility = "hidden";
} else {
el.style.visibility = "visible";
}
}
function hideElements(elements)
{
var length = elements.length;
if (length > 0) {
for (var i = 0; i < length; i++) {
document.getElementById(elements[i]).style.visibility = "hidden";
}
}
}
.popover {
visibility: hidden;
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/#popperjs/core#2.10.2/dist/umd/popper.min.js"></script>
<section class="bg-gradient-to-b from-night to-babyblue w-full h-95vh justify-center">
<div class="flex flex-1 pr-2 pt-2">
<button onclick="openPopover(event,'popover-cv-bottom', 'bottom')" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12" type="button">
click
</button>
<button onclick="openPopover(event,'popover-email-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
click
</button>
<button onclick="openPopover(event,'popover-save-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
click </button>
<div class="bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg popover" id="popover-cv-bottom">
<div>
<div
class="text-gray-700 opacity-75 font-semibold p-3
mb-0
border-b border-solid border-gray-100
uppercase
rounded-t-lg
"
>
Popover A
</div>
<div class="text-gray-700 p-3">
A
</div>
</div>
</div>
<div class="bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg popover" id="popover-email-bottom">
<div>
<div
class="
text-gray-700
opacity-75
font-semibold
p-3
mb-0
border-b border-solid border-gray-100
uppercase
rounded-t-lg
"
>
Popover B
</div>
<div class="text-gray-700 p-3">
B
</div>
</div>
</div>
<div class="bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg popover" id="popover-save-bottom">
<div>
<div
class="
text-gray-700
opacity-75
font-semibold
p-3
mb-0
border-b border-solid border-gray-100
uppercase
rounded-t-lg
"
>
Popover C
</div>
<div class="text-gray-700 p-3">
C
</div>
</div>
</div>
</div>
</section>

Adding comments to video with jQuery

I want to comment dynamically on a video with jQuery, but when I comment on what I'm doing, the old comment changes and all comments receive the same text. The value I get from the input is written to all comments. How can I fix this?
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
$('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content").text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

With the selector .comment-content, you are selecting all the elements with that class, so of course all comments' text content will be overwritten. Save your new element into a variable and restrict the class selector on that new element instead:
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
let newComment = $('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content", newComment).text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

Overflow issue on mobile device

As you can see from the screen I have a problem with my portion of the page, I state that all the other sections of the site that have overflow work very well. I have tried several times to review the code but I do not know what it can be ... also put the code of the portion that does not work below
<div class="messageDiv w-full h-full flex flex-col justify-start overflow-scroll relative text-xl lg:text-xs">
<!--prototipo di messaggio-->
<% for(var i=messages.length-1 ; i >= 0 ; i--){ %>
<% if(messages[i].id_user == userId){ %>
<div class="flex justify-end items-center">
<div class="talk-bubble tri-right radius right-in bg-gray-900 text-white w-auto px-5 py-2 mb-2 lg:mb-1 mr-5">
<div class="talktext flex flex-col justify-center items-center">
<p class="text-left w-full"><%=messages[i].text%></p>
<div class="info-message flex justify-start items-center w-full pt-1 mt-1 overflow-hidden">
<p class="title text-rigth username"><%=messages[i].username%></p>
<i class="fas fa-circle text-white px-2"></i>
<i class="far fa-clock title"></i>
<p class="title ml-1"><%=messages[i].date.getHours()%>:<%=messages[i].date.getMinutes()%></p>
</div>
</div>
</div>
</div>
<% } else{ %>
<div class="flex justify-start items-center">
<div class="talk-bubble tri-left radius left-in bg-black text-white w-auto px-5 py-2 ml-5 mb-2 lg:mb-1">
<div class="talktext flex flex-col justify-center items-center">
<p class="text-left w-full"><%=messages[i].text%></p>
<div class="info-message flex justify-end items-center w-full pt-1 mt-1 overflow-hidden flex-no-wrap">
<p class="text-giallo text-rigth username"><%=messages[i].username%></p>
<i class="fas fa-circle text-white px-2"></i>
<i class="far fa-clock text-giallo"></i>
<p class="text-giallo ml-1"><%=messages[i].date.getHours()%>:<%=messages[i].date.getMinutes()%></p>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<!--end-->
</div>
I use tailwind as a css framework and it's how you can guess a project in node.js.
Thanks in advance.

For mobile devices use:-
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up|pan-down ] || pinch-zoom ] | manipulation
This is same as overflow axis.

Categories

Resources