admin管理员组文章数量:1323330
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:-
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 bees fixed to the bottom.
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 bees fixed to the bottom.
Share asked Apr 28, 2021 at 12:45 Tushar Gaurabh jha Tushar Gaurabh jha 5933 gold badges6 silver badges11 bronze badges 1- Hi, Can you create a codepen or fiddle for this? – Yash Maheshwari Commented Apr 28, 2021 at 13:01
4 Answers
Reset to default 4Wrap 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 forwidth: 100%
fixed
is forposition: fixed
bottom-0
is forbottom: 0
use this css on the main container div
{
position: fixed;
bottom: 0
}
<link href="https://unpkg.//[email protected]/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./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>
本文标签: javascriptHow to make button static and fixed at bottomStack Overflow
版权声明:本文标题:javascript - How to make button static and fixed at bottom - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742139611a2422524.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论