I've created a popup element using Tailwindcss.
Functionality-wise the popup renders and is removed totally fine but the problem is that the Popup component's properties are set to h-screen (height: 100%;) and if I'm scrolled down, the pop-up looks off.
For functionality, I've added a class to the body that prevents scrolling but the component is still rendered weirdly.
Image for Example
Popup component code:
interface OrderSummaryProps {
renderOrderSummary: () => void;
OrderSummaryPopupState: boolean;
}
// { cartList, renderPopUp }: OrderSummaryProps
function OrderSummary({ renderOrderSummary, OrderSummaryPopupState }: OrderSummaryProps) {
const getBody = document.querySelector('body')
if (OrderSummaryPopupState) getBody?.classList.add('overflow-hidden')
else getBody?.classList.remove('overflow-hidden')
return (
<>
<div className='absolute top-0 bg-black z-10 w-full backdrop-filter backdrop-blur-sm bg-opacity-25 flex justify-center items-center' style={{ height: '100%' }}>
<div className='bg-white shadow-xl w-max h-max border border-neutral-200 rounded-xl flex items-center justify-between flex-col px-20 py-10'>
<div className='flex flex-col justify-center my-10'>
<button onClick={() => renderOrderSummary()} className='rounded-full py-2 px-6 border-2 border-red-200 bg-red-500 font-bold text-white'>סגור חלון</button>
</div>
</div>
</div>
</>
);
}
export default OrderSummary;
The answer to that challenge was using wisely the 'fixed' and 'inset-0' tailwind properties. this has fixed the popup to the screen no matter where you're located in the page.
Just a tip for newbies like me - Codepen for front-end can be your best friend.
Check out also Tailwind CSS Docs
Related
I'm trying to import a video to my JSX but the video doesn't seem to play, it acts like an image.
Here's what I've tried:
import React from "react";
import MyVideoComponent from "./MyVideoComponent";
const Video = () => {
return (
<div className="w-full max-w-[800px] sm:h-[704px] h-[680px] bg-white flex flex-col sm:justify-between justify-center items-center mx-auto p-4">
<div>
<div className="h-[10%] flex items-center relative">
<div className="h-[100%] w-[8%] bg-gray-200"></div>
<div className="flex items-center">
<h5 className="text-sm py-2 text-[#575e72] font-mono left-9 absolute">
VIDEO TITLE
</h5>
</div>
</div>
<div className="my-5 py-4 px-1 w-[80%]">
<h1 className="text-4xl font-bold text-[#061237]">
Inform users with video sections
</h1>
</div>
<div>
<MyVideoComponent />
</div>
</div>
</div>
);
};
export default Video;
MyVideoComponent:
import React from "react";
import MyVideo from "../assets/video.mp4";
class MyVideoComponent extends React.Component {
render() {
return (
<video width="100%" height="100%" preload="auto">
<source src={MyVideo} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
);
}
}
export default MyVideoComponent;
I've also tried using the code below instead of importing MyVideoComponent component
<video width="auto" height="auto" autoplay>
<source src={require('../assets/video.mp4')} />
</video>
This is common problem when you deal with html5 tag in react. You need toJust set a name for the autoplay attribute or use autoPlay. In addition, set the muted tag for the video. Chrome for instance block autoplay videos that have sound.
The code structure should look like this
i've been trying to use heroicons and keep facing errors i tried installing the '#heroicons/react#v1', i tried importing from "#heroicons/react/outline" and "#heroicons/react/24/outline" too, it sometimes work on phone and if i refresh it doesn't anymore even on phone. i tried using the command prompt separately, didn't help much either. and it keeps saying:
Server Error
Error: You're trying to import #heroicons/react/outline/SearchIcon from Heroicons v1 but have installed Heroicons v2. Install #heroicons/react#v1 to resolve this error.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
components\Header.js (35:25) # Header
import React from 'react'
import Image from 'next/image'
import {
SearchIcon,
PlusCircleIcon,
UserGroupIcon,
HeartIcon,
PaperAirplaneIcon,
MenuIcon
} from "#heroicons/react/outline";
import {HomeIcon} from "#heroicons/react/solid"
function Header() {
return (
<div className='shadow-sm border-b bg-white sticky top-0 z-50'>
<div className='flex justify-between max-w-6xl mx-5 lg:mx-auto'>
{/* Left */}
<div className="relative hidden lg:inline-grid h-24 w-24 cursor-pointer">
<Image src="https://links.papareact.com/ocw"
layout="fill"
objectFit='contain'
/>
</div>
<div className="relative w-10 lg:hidden flex-shrink-0 cursor-pointer">
<Image src="https://links.papareact.com/jjm"
layout="fill"
objectFit='contain'
/>
</div>
{/* Middle */}
<div className='max-w-xs'>
<div className='relative mt-1 p-3 rounded-md '>
<div className='absolute insert-y-0 pl-3 flex items-center pointer-events-none pt-2.5'>
<SearchIcon className='h-5 w-5 text-gray-500'/>
</div>
<input className="bg-gray-50 w-full pl-10 sm:text-sm border-gray-300 focus:ring-black focus:border-black rounded-md" type="text" placeholder='Search'/>
</div>
</div>
{/* Right */}
<div className='flex items-center justify-end space-x-4'>
<MenuIcon className='h-6 w-6 md:hidden cursor-pointer'/>
<HomeIcon className='navBtn'/>
<div className='relative navbtn'>
<PaperAirplaneIcon className='navBtn rotate-45'/>
<div className='hidden first-letter:absolute -top-1 -right-2 text-xs w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-white'>3</div>
</div>
<PlusCircleIcon className='navBtn'/>
<UserGroupIcon className='navBtn'/>
<HeartIcon className='navBtn'/>
<img src='https://media.newstracklive.com/uploads/entertainment-news/bollywood-news/Nov/18/big_thumb/rajpal-yadav-3_5dd2562ba99a5.jpg' alt="profile pic"
className='hidden h-10 w-10 rounded-full cursor-pointer'/>
</div>
</div>
</div>
)
}
export default Header
SearchIcon is called MagnifyingGlassIcon In #heroicons/react/#v2.
So, use MagnifyingGlassIcon for the same functionality.
Bonus tip: import like this =>
import {iconName} from "#heroicons/react/24/solid";
// or
import {iconName} from "#heroicons/react/24/outline";
// 24 denotes 24x24 sized icons newly released by heroicons
If anyone facing same issue, this might help, If the component name is not renamed in later version. Source
You'll have to add the size in your import (import { SearchIcon } from '#heroicons/react/24/outline').
As you can read here: https://github.com/tailwindlabs/heroicons#react
Install #heroicons/react#v1 to resolve this error.
npm i #heroicons/react#v1
My navbar will not scroll horizontally, it only scrolls a tiny bit vertically. I'm using the tailwind-scrollbar-hide plugin and added it to my config file.
Screenshot
import requests from "../utils/requests";
function Nav() {
return (
<nav className="relative">
<div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap
space-x-10 sm:space-x-20 overflow-x-scroll overflow-y-hidden scrollbar-hide">
{Object.entries(requests).map(([key, { title, url }]) => (
<h2
key={key}
className="last:pr-24 cursor-pointer transition duration-100 transform hover:scale-125 hover:text-white
active:text-red-500 "
>
{title}
</h2>
))}
</div>
<div className="absolute top-0 right-0 bg-gradient-to-l from-[#06202A] h-10 w-1/12" />
</nav>
);
}
export default Nav;
The example you've provided scrolls horizontally.
Here is the working code with minimal modifications and tailwind-scrollbar-hide plugin installed (see in config tab): https://play.tailwindcss.com/gCJb6kO4yP?file=config
Please note, you can't scroll horizontally just by scrolling the mouse wheel. You have to hold "shift" key while scrolling. This is a default behaviour (see https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_hor_scroll).
I have a layout that has the left navigation, the top navigation bar and then the main area for the child components. The issue is all the child components slightly push down past the bottom of the screen.
I can somewhat fix this by adding a pb-36 for example but that leaves an annoying gap.
const style = {
container: `h-screen overflow-hidden relative `,
mainContainer: `bg-gray-800 flex flex-col pl-0 w-full lg:w-[calc(100%-13rem)]`,
main: `bg-gray-100 h-screen overflow-auto lg:rounded-tl-3xl `,
};
the rendered part:
<LayoutProvider>
<div className={style.container}>
<div className="flex items-start">
<Overlay />
<SideNavigation mobilePosition="left" />
<div className={style.mainContainer}>
<TopNavigation />
<main className={style.main}>{children}</main>
</div>
</div>
</div>
</LayoutProvider>
For example, if I remove the TopNavigation above, then it will remove the header and then the child components will fit correctly. So the child components are offset down by that much.
top navigation is :
<header className="bg-gray-800 h-[74px] items-center relative w-full ">
Since the header is occupying 74px of the screen, you have to reduce the height of the child component by the height of the header. So replace the main's h-screen with h-[calc(100vh-74px)]
I mean change
main: `bg-gray-100 h-screen overflow-auto lg:rounded-tl-3xl `
To this instead
main: `bg-gray-100 h-[calc(100vh-74px)] overflow-auto lg:rounded-tl-3xl `
I'm new to Next.js. I have the HomePage within the pages folder, and I'm trying to center the <h1></h1> in the middle of the picture but instead, it pushes it down. Here is my code...
import image from '../public/images/background.jpg'
import Image from "next/image";
import Layout from "../components/Layout";
export default function HomePage() {
return (
<Layout>
<main>
<Image
src={image}
alt="Programming"
className="absolute object-cover w-full h-full"
/>
<section className="relative flex justify-center min-h-screen pt-12 lg:pt-64 px-8">
<h1 className="text-6xl text-green-100 font-bold cursive leading-none lg:leading-snug home-name">Hi. I'm
Shloimi</h1>
</section>
</main>
</Layout>
)
}
Can someone help me, please. And I'm using Tailwind.css
Try this,
<main className="relative">
<Image
src={image}
alt="Programming"
className="w-full h-full bg-cover"
/>
<h1 className="absolute w-full text-6xl font-bold leading-none text-center text-green-100 top-1/2 transform translate-y-1/2 cursive lg:leading-snug home-name ">
asdf
</h1>
</main>
I deleted pt-12 lg:pt-64 to make your goal and inserted items-center, but if you want to use pt, then you can customise with that values.
Happy coding :)