I am working with tailwind CSS and making a page where it uses Next and Back buttons to navigate between pages. But the problem is when the content is less on the page the button sticks to the top You can see this image for more reference.
Image link:- https://ibb.co/pw5QN2N
This is the code used for Buttons
<div className="flex justify-between">
<NavLink to={"/course/" + courseName + "/" + (+moduleID - 1)}>
<button
className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
>
Back
</button>
</NavLink>
{courseContent[courseName][+moduleID - 1].quiz === true ? (
<NavLink to={"/course/" + courseName + "/" + +moduleID + "/quiz"}>
<button
className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
>
Next (Quiz)
</button>
</NavLink>
) : (
<NavLink to={"/course/" + courseName + "/" + (+moduleID + 1)}>
<button
className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
>
Next
</button>
</NavLink>
)}
</div>
How can I fix this so that button becomes fixed to the bottom.
Wrap those buttons with <div> tag and add classes fixed bottom-0 w-full to that <div> tag.
Example:
<div class='fixed bottom-0 w-full'>
<button class='my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none'>Back</button>
<button class='my-8 ml-auto px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none'>Next(Quiz)</button>
<button class='bottom-0 my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none'>Next</button>
</div>
w-full is for width: 100%
fixed is for position: fixed
bottom-0 is for bottom: 0
use this css on the main container div
{
position: fixed;
bottom: 0
}
<link href="https://unpkg.com//tailwindcss#2.1.1/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col justify-between min-h-screen p-5">
<div>
<h1 class="text-3xl font-bold">Cyber security</h1>
<h1 class="mt-5 text-2xl font-medium text-blue-500">Basic Terms</h1>
<p>Cybersecurity 101...</p>
</div>
<div class="flex justify-between">
<button class="px-5 py-2 text-sm font-bold tracking-wide text-white bg-red-500 rounded-full focus:outline-none">Back</button>
<button class="px-5 py-2 text-sm font-bold tracking-wide text-white bg-red-500 rounded-full focus:outline-none">Next</button>
</div>
</div>
https://play.tailwindcss.com/WY4qZvba15
If you want your buttons to be fixed to the bottom and not relative to the content above, then you might want to try this. It just sets the buttons to the bottom of the page and tells the code not to worry about the other content. You can then change the other CSS of the buttons (ie, how far left or right, or the color) individually.
.b {
position: absolute;
bottom: 10px;
}
.next {
right: 50px;
}
.back {
left: 50px;
}
<div>
<!-- you can still have your container -->
<div>content up here, buttons below</div>
<!-- you can still have your content -->
<button class="b next">next</button>
<!-- and your buttons will stick to the bottom -->
<button class="b back">back</button>
</div>
Related
I've a map that creates edit and delete buttons.
The delete button needs to be confirmed.
So I created a modal.
console.log(additive._id) at the first delete button gives me the correct ._id
the confirm button inside the modal gives me always the last ._id of the array i map through, so it'll always delete the last item.
How can i get the correct ._id?
{additives.sort(byId).map((additive) => (
<div key={additive._id}>
<div>
<div </div>
<div>{additive.additive[0]?.label}</div>
</div>
<div className='flex justify-between items-center'>
<button
onClick={() =>
editAdditive(
additive._id,
additive.additive[0]?.value,
additive.additive[0]?.label
)
}>
Edit
</button>
<button
onClick={() => {
setShowModal(!showModal);
console.log(additive._id);
}}
>
Delete
</button>
{showModal && (
<>
<div
className='backdrop'
onClick={(e) => {
if (e.target.className === 'backdrop') {
setShowModal(false);
}
}}
>
<div className='relative w-auto my-6 mx-auto max-w-3xl'>
<div className=' rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
<div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t bg-gray-600'>
<h3 className='text-3xl font-semibold text-red-500'>
Delete Additive
</h3>
</div>
<div className='relative p-6 flex-auto bg-gray-600'>
<p className='my-4 text-white text-lg leading-relaxed'>
Are you sure?
</p>
</div>
<div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b bg-gray-600'>
<button
className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => setShowModal(!showModal)}
>
Cancel
</button>
<button
className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => {
deleteAdditive(additive._id);
setShowModal(!showModal);
console.log(additive._id);
}}
>
Confirm
</button>
</div>
</div>
</div>
</div>
</>
)}
</div>
</div>
))}
store the additive id in a state and use it in the modal
const [additiveId, setAdditiveId] = useState()
<button
onClick={() => {
setShowModal(!showModal);
setAdditiveId(additive._id)
console.log(additive._id);
}}
>
Delete
</button>
<button
className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => {
deleteAdditive(additiveId);
setShowModal(!showModal);
console.log(additiveId);
}}
>
Confirm
</button>
I want to ask. I have a layout, there is a button when i click the button, a pop up will appear, the problem is when the modal appears, there are some components that are not dimmed, such as the button and the navbar as shown in the picture, I use vue cli and tailwind and for the modal I use flowbite. I've been looking for a way but still can't find it. Can anyone help me?
My website currently has a mobile-based display
this the web without modal
and this is the web when the button is clicked
here is the code in navbarWhite.vue
<template>
<header class="sticky h-14 top-0 z-50 bg-white" :class="boxShadow">
<div class="flex flex-row">
<div class="absolute" v-if="srcPictureLeft">
<img
#click="onClickBack"
class="ml-7 py-4 cursor-pointer text-black"
:src="require(`../assets/icon/${srcPictureLeft}`)"
/>
</div>
<div v-else></div>
<div class="py-4 relative mx-auto font-semibold text-black text-xl">
{{ title }}
</div>
</div>
</header>
</template>
<style>
</style>
<script>
export default {
name: "NavbarWhite",
props: {
onClickBack: {
type: Function,
},
title: String,
srcPictureLeft: String,
boxShadow: String,
},
};
</script>
and this is the button component (ButtonBottom.vue)
<template>
<div
class="
sticky
w-full
absolute
mb-0
bottom-0
z-50
bg-white
h-16
drop-shadow-[0_0_4px_rgba(0,0,0,0.25)]
"
>
<div class="mx-[30px] py-2">
<button-primary
class="
bg-green-button
text-white
hover:bg-green-button-darker hover:rounded-[32px]
"
>
<slot>Button</slot>
</button-primary>
</div>
</div>
</template>
<script>
import ButtonPrimary from "#/components/ButtonPrimary.vue";
export default {
name: "ButtonBottom",
components: {
ButtonPrimary,
},
};
</script>
and this is the parent where all the component called
<template>
<div class="h-screen relative">
<div class="h-[94%]">
<navbar-white
boxShadow="shadow-[0_0_10px_0_rgba(0,0,0,0.25)]"
srcPictureLeft="backIconBlack.svg"
:onClickBack="goBack"
title="Ringkasan Transaksi"
/>
<div class="mt-10 mx-[30px]">
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">No. Rekening</div>
<div>12345678</div>
</div>
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nama Penerima</div>
<div>Lorem Ipsum</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Bank Tujuan</div>
<div>12345678</div>
</div>
<hr class="mb-4" />
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nominal</div>
<div>Rp 200.000</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Fee</div>
<div>Rp 2.500</div>
</div>
<div class="flex flex-row justify-between">
<div class="font-semibold">Total</div>
<div class="font-semibold">Rp 202.500</div>
</div>
</div>
</div>
<button-bottom data-modal-toggle="biayaAdmin">Selanjutnya</button-bottom>
<!-- modal start here -->
<div
id="biayaAdmin"
tabindex="-1"
class="
hidden
overflow-y-auto overflow-x-hidden
fixed
top-0
right-0
left-0
z-50
w-full
md:inset-0
h-modal
md:h-full
"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div
class="
flex
justify-between
items-center
p-5
rounded-t
border-b
dark:border-gray-600
"
>
<h3 class="text-xl font-medium text-gray-900 dark:text-white">
Small modal
</h3>
<button
type="button"
class="
text-gray-400
bg-transparent
hover:bg-gray-200 hover:text-gray-900
rounded-lg
text-sm
p-1.5
ml-auto
inline-flex
items-center
dark:hover:bg-gray-600 dark:hover:text-white
"
data-modal-toggle="biayaAdmin"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
With less than a month to go before the European Union enacts new
consumer privacy laws for its citizens, companies around the world
are updating their terms of service agreements to comply.
</p>
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
The European Union’s General Data Protection Regulation (G.D.P.R.)
goes into effect on May 25 and is meant to ensure a common set of
data rights in the European Union. It requires organizations to
notify users as soon as possible of high-risk data breaches that
could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div
class="
flex
items-center
p-6
space-x-2
rounded-b
border-t border-gray-200
dark:border-gray-600
"
>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-white
bg-blue-700
hover:bg-blue-800
focus:ring-4 focus:outline-none focus:ring-blue-300
font-medium
rounded-lg
text-sm
px-5
py-2.5
text-center
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
"
>
I accept
</button>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-gray-500
bg-white
hover:bg-gray-100
focus:ring-4 focus:outline-none focus:ring-gray-200
rounded-lg
border border-gray-200
text-sm
font-medium
px-5
py-2.5
hover:text-gray-900
focus:z-10
dark:bg-gray-700
dark:text-gray-300
dark:border-gray-500
dark:hover:text-white
dark:hover:bg-gray-600
dark:focus:ring-gray-600
"
>
Decline
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ButtonBottom from "#/components/ButtonBottom.vue";
import NavbarWhite from "#/components/NavbarWhite.vue";
export default {
name: "TransactionSummary",
components: {
ButtonBottom,
NavbarWhite,
},
methods: {
goBack() {
this.$router.go(-1);
},
},
};
</script>
The css z-index of your header and footer might be higher than the z-index of the overlay mask.
Try inspecting the elements and evaluate their z-index values, try forcing new values to ensure that the z-index of the header and footer is a lower value than the grey overlay mask.
The issue might be the lack of a z-index value on some of those elements to indicate which should appear over the top of another.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I don't see the '...' after setting text-ellipsis, overflow hidden and nowrap on this div.
Here's my code:
import Image from "next/future/image";
import Link from "next/link";
export default function MenuOption({ title, description, icon, route }) {
return (
<Link href={route}>
<div className="flex h-[74px] w-full cursor-pointer gap-4 overflow-hidden text-ellipsis rounded-lg bg-gray-50 p-4 ring-1 ring-gray-300 drop-shadow-sm hover:ring-2">
<Image src={icon} alt={`${title} Icon`} className="mt-1 h-5 w-auto" />
<div className="float-left inline-block overflow-hidden text-ellipsis whitespace-nowrap">
<h2 className="text-md font-medium text-gray-900">{title}</h2>
<p className="text-sm text-gray-500">{description}</p>
</div>
</div>
</Link>
);
}
You have to use all the style on specific element, like <p></p> or <h2></h2> and with fix width like
<h2 className="text-md font-medium text-gray-900 inline-block overflow-hidden text-ellipsis whitespace-nowrap w-100">{title}</h2>
<p className="text-sm text-gray-500 inline-block overflow-hidden text-ellipsis whitespace-nowrap w-100">{description}</p>
here,
.w-100 {
width: 100%
}
how can I display my Invitee2 a bit upper in my gray bar ? And for my button how can I put it on the extrem right side of my gray bar ?
<div className="bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500 font-bold text-gray-500">
Invitee {i + 1}
<span className="float-right -mt-5">
{!!i && (
<Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
- Invitee
</Button>
)}
</span>
And Button.jsx:
export default function Button({ onClick,primary,children,disabled }) {
return <button
onClick={onClick}
className={`${primary
? ' cursor-pointer rounded-md bg-primary-700 py-2 px-3 text-white hover:bg-blue-700 hover:text-white'
: 'bg-transparent text-gray border border-primary-500 hover:border-primary-100 hover:text-primary-100 transition duration-200 '}
text-primary-fg py-2 px-3 rounded-md transition-colors `}
disabled={disabled}
>{children}</button>
}
Here a picture to get the idea :
Add flex flex-row justify-between items-center in your div class
and remove the -mt-5 in span class beside float-right
check the code below
<div className="flex flex-row justify-between items-center bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500 font-bold text-gray-500">
Invitee {i + 1}
<span className="float-right">
{!!i && (
<Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
- Invitee
</Button>
)}
</span>
</div>
You can use the flexbox properties to make the design you want. I had created the very similar example below , please add your functions here and replace class with className.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
<div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md">
<div class=" font-bold text-gray-500 ml-4" >Invitee 2</div>
<div class="">
<Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)">
- Invitee
</Button>
</div>
</div>
</div>
This is the code and I want to add a PNG logo in place of the SVG logo, but every time I add an img element, nothing gets rendered.
The image/logo I want to add has to be more or less the same size as the SVG logo.
import Link from 'next/link';
import { useState } from 'react';
export const Navbar = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(!active);
};
return (
<>
<nav className='flex items-center flex-wrap bg-green-400 p-3 '>
<Link href='/'>
<a className='inline-flex items-center p-2 mr-4 '>
<svg
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
className='fill-current text-white h-8 w-8 mr-2'
>
<path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
</svg>
<span className='text-xl text-white font-bold uppercase tracking-wide'>
Talwind CSS
</span>
</a>
</Link>
<button
className=' inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none'
onClick={handleClick}
>
<svg
className='w-6 h-6'
fill='none'
stroke='currentColor'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={2}
d='M4 6h16M4 12h16M4 18h16'
/>
</svg>
</button>
{/*Note that in this div we will use a ternary operator to decide whether or not to display the content of the div */}
<div
className={`${
active ? '' : 'hidden'
} w-full lg:inline-flex lg:flex-grow lg:w-auto`}
>
<div className='lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start flex flex-col lg:h-auto'>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white '>
Home
</a>
</Link>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
Services
</a>
</Link>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
About us
</a>
</Link>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
Contact us
</a>
</Link>
</div>
</div>
</nav>
</>
);
};
Also if possible please link a good similar example.
Use next/image, these are some examples.
Layout = fill
code - https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js
preview - https://image-component.nextjs.gallery/layout-fill
Layout = fixed
code - https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fixed.js
preview - https://image-component.nextjs.gallery/layout-fixed
Layout = responsive
code - https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-responsive.js
preview - https://image-component.nextjs.gallery/layout-responsive