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
Related
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
I am trying to achieve the animation on cards when they are scrolled as shown in the following link .
In the below example, I want the animation done in the right-hand side cards ( fade off when they are out the view ).
LINK HERE
I had used the whileInView attribute of framer motion, from Docs. But it not what I expected.
Below is my code, but it is very long. However you can take simply 6 cards in 4x2 (4 rows, 2 cols) as an example.
import React from "react";
import imgurl1s from "../public/mssmall.png";
import imgurl1l from "../public/mslarge.png";
import Image from "next/image";
import {
SiBootstrap,
SiFramer,
SiJavascript,
SiLichess,
SiMongodb,
SiNextdotjs,
SiPostman,
SiReact,
SiRedux,
SiTailwindcss,
} from "react-icons/si";
import { FaNodeJs, FaEye, FaHtml5, FaCss3, FaSpotify } from "react-icons/fa";
import { HiCode } from "react-icons/hi";
import { AiOutlineApi } from "react-icons/ai";
import { motionValue } from "framer-motion";
const Projects = () => {
const currentOffSetY = motionValue(0);
return (
<>
<div className="min-h-full">
<div className=" mx-auto shadow container">
<div className="px-4 py-6 sm:px-0">
<div className="p-5 border-2 border-red-400/20 flex flex-col lg:flex-col items-center justify-center ">
<div className="p-2 sm:p-10 flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-16 justify-center">
{/* card1 mschatapp*/}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
{/* card2 */}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
</div>
<div className="p-2 sm:p-10 flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-16 justify-center">
{/* card3 */}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
{/* card4 /}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Projects;
I have run my Vue JS app in development server multiple times and never faced a single issue with any of the functions. However, as soon as I deploy my application in the production server everything except this specific discount function causes my system to crash.
So after selecting one of the option (either amount or percentage) and as soon as I type in the value inside the input box, my application stops working.
I am still very new to web app development so it would be great if someone can help me out with this. TIA
This is my function that I am using to calculate discounts:
applyDiscount(){
this.balance=this.totalCost-this.totalPaid
if(this.isPercentage=='Percentage'){
if(this.discountAmount<=100 ){
this.discount=(this.totalCost/100)*this.discountAmount
this.form.discount=this.discount
this.str=""
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
else{
this.str="Percentage is exceeding 100%"
}
}else if(this.isPercentage=='Amount'){
this.str=""
this.discount=this.discountAmount
this.form.discount=this.discount
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
},
This template code:
<!--discount-->
<form #submit.prevent>
<div class="tracking-widest text-lg text-left title-font font-bold text-gray-500 border-b border-gray-300 ">
Discount:
</div>
<!--discount-->
<div class="inline-flex items-center mt-3 ">
<label for="" class="mb-3 text-gray-800">Give discount in?</label>
<input type="radio" name="test_id" #change="onChange($event)" value="Amount" class="form-radio h-5 w-5 text-indigo-600 mr-2" ><span class="ml-2 mr-2 text-gray-700">Amount</span>
<input type="radio" name="test_id" #change="onChange($event)" value="Percentage" class="form-radio h-5 w-5 text-indigo-600 mr-1"><span class="ml-2 mr-2 text-gray-700">Percentage</span>
</div>
<div class="flex justify-start">
<div class="">
<label class="text-gray-700 dark:text-gray-200" for="discount">Discount Amount</label>
<input #keypress="isNumber($event)" v-model.number="discountAmount" id="discount" type="text"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div>
</div>
<div>{{this.applyDiscount()}}</div>
<!--discount-->
<div v-if="this.str.length>=1">
<div class=" flex items-center mt-10 px-8">
<svg class="h-6 w-6 fill-current text-red-400 mr-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
</svg>
<div>
<p class="font-medium text-red-500">{{str}}</p>
</div>
</div>
</div>
<!--after discount-->
<div class="flex justify-end items-end ml-6" >
<div class=" mt-5 w-full sm:w-2/4 lg:w-1/4">
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Cost:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalCost}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Paid:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalPaid}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Discount:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Adjustment:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.totalCost-this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Balance:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.balance}}</span></span> </div>
<div class="w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
</div>
</div>
</form>
<!--form-->
</div>
</div>
<!--discount-->
I am sort of posting all of it since I can't really figure out what the issue is.
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>
currently I'm working on bulma css frameworks. I'm making contact us page but some unwanted space is there. I tried a lot but don't know how to remove that?
I just shared image of what is the problem below.
This is Image
This is Code
<section class="p-5">
<div class="columns is-desktop box has-background-grey-light m-0">
<div class="column">
<div class="has-text-centered">
<div class="box">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Our Address</p>
<p class="m-2">A108 Adam Street, New York, NY 535022</p>
</div>
<div class="columns is-desktop m-0">
<div class="column box">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Email Us</p>
<p class="m-2">info#example.com
contact#example.com</p>
</div>
<div class="column box ml-5">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Call Us</p>
<p class="m-2">+1 5589 55488 55<br />
+1 6678 254445 41</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="box">
</div>
</div>
</div>
</section>
try only with TailwindCSS like this,
<section class="flex w-full flex-col bg-gray-300 text-xl">
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Our Address</span>
<div class="flex flex-col md:flex-row items-center">
<span> A108 Adam Street,</span>
<span>New York, NY 535022</span>
</div>
</div>
<div class="flex flex-col md:flex-row justify-around w-full">
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Email Us</span>
<span>info#example.com</span>
<span>contact#example.com</span>
</div>
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Call Us</span>
<span>+1 5589 55488 55</span>
<span>+1 6678 254445 41</span>
</div>
</div>
</section>
Check on the Tailwind Play