I have read through multiple posts regarding the issue of the footer not staying at the bottom of the page and resolved it with relative min-h-[calc(100vh-95px)] in the main div and absolute inset-x-0 bottom-0 in the footer. However, it is now the case that the page, or more precisely the button for the form is overlapping with the footer.
As the page height decreases, the button overlaps the footer and the rest of the page elements are overlapped by the footer. As the page height increases, so does the space between the page and footer. I've tried to adjust the min-height but that doesn't seem to resolve the issue.
I have also tried to set mb-1 to the page, the z-index to 9999 for the footer and mt-1 to the footer but the issue hasn't resolved.
Edit
The z-index class set to 9999 keeps the footer at the bottom but changing the max-height:500px to static causes the footer to move upwards and overlap with the page.
Footer.jsx
import React from 'react';
import { CiTwitter } from 'react-icons/ci';
import { IoLogoInstagram } from 'react-icons/io';
const Footer = () => {
return (
<div className='relative min-h-[calc(100vh-95px)]'>
<footer className='bg-black text-white text-center w-full absolute inset-x-0 bottom-0 z-index'>
...
</footer>
</div>
)
}
export default Footer
Contact.jsx
import React from 'react'
import Stockpic15 from '../img/stockpic15.jpg'
const Contact = () => {
return (
<div className='mb-1'>
<div className='flex flex-col justify-center items-center space-y-5'>
...
</div>
</div>
)
}
export default Contact
Index.css
#tailwind base;
#layer base {
html {
#apply font-serif
}
}
#tailwind components;
#layer components {
.contact-input{
#apply border-b border-black text-center sm:px-2.5 mobile:px-10 tablet:px-28;
}
.z-index{
z-index: 9999;
}
}
#tailwind utilities;
Did you try to add a media query for the footer? Can you try to set a static position for a maximum height?
For example:
#media (max-height: 500px) {
footer {
position: static;
}
}
Or did you try to add the z-index class with a value of 9999 to the footer, to ensure that the footer is always in front of the other elements regardless of the device height.
All I needed to do was to change absolute to sticky and remove the min-height from the parent div.
Hope this helps someone else :)
import React from 'react';
import { CiTwitter } from 'react-icons/ci';
import { IoLogoInstagram } from 'react-icons/io';
const Footer = () => {
return (
<div className=''>
<footer className='bg-black text-white text-center w-full sticky inset-x-0 bottom-0 mt-5'>
....
</footer>
Related
I'm using react and tailwindcss to create a web app for news. Headline of the page looks like the picture below (the image and text were randomly chosen):
When I hover my mouse on the div the image is supposed to zoom in while changing the state on hover and setting the scale while based on the isMouseIn boolean value. But the problem is that it sometimes works but other times it doesn't. I tried checking the state value and it works perfectly, the values are getting set without any problems but it doesn't scale when I enter the page for the first time. If I refresh the page or change the scale while manually in the code, then it works but otherwise it doesn't. Is this maybe a bug from react or am I doing something wrong?
Check the code down below for a better understanding of my implementation:
export default function Headline() {
/*
*
* green border --> the whole component
* orange border --> div that is darkening the whole component
*/
const [isMouseIn, setMousePos] = useState(false);
function mouseEnter() {
setMousePos(true);
}
function mouseLeave() {
setMousePos(false);
}
return (
<div
onMouseEnter={() => mouseEnter()}
onMouseLeave={() => mouseLeave()}
className="mb-[.1em] overflow-hidden 950:rounded-xl cursor-pointer w-[100%] h-[300px] 380:h-[400px] 1215:h-[500px] max-h-[500px] relative shadow-2xl"
>
<img
src={headline}
className={`w-full scale-${
isMouseIn ? "150" : "100"
} object-cover transition-all duration-700 h-full max-h-full absolute`}
/>
.
.
.
.
.
We can use group modifier of tailwindcss.
Give "group" class the parent element
Give class names to child element according to the parent elements state
export default function Headline() {
return <div
className="
group mb-[.1em] overflow-hidden 950:rounded-xl cursor-pointer w-[100%]
h-[300px] 380:h-[400px] 1215:h-[500px] max-h-[500px] relative shadow-2xl"
>
<img
src={"https://i.stack.imgur.com/6TEEa.png"}
className="
object-cover transition-all duration-700 h-full max-h-full absolute
group-hover:scale-150 scale-100"
/>
</div>;
};
Referance
Tailwind CSS Doc: Group Modifier
I'm using Tailwind to style a React component called "BlurImage" which displays an image by default and then on hover removes the image and displays a button at the bottom of the component and a text box at the top that has overflow-y-auto behavior to allow for scrolling if the text grows too long.
By default, the overflow responsibility is given to the body as discussed here and so I need to give the parent top-level div of BlurImage overflow as well. This causes both the text and the button to be scrollable. Is there a way to avoid having the button scroll?
This seems like it should be a common situation - I can imagine using this concept to write self-contained components that have a header/footer and some scrollable content as well. Unfortunately, I can't find much addressing this in the Tailwind docs or online.
I appreciate any suggestions! Here is the component code that I currently have:
import Image from 'next/image';
import cn from 'classnames';
import { useState } from 'react';
import { ImageInfo } from '../../types/images';
import Button from './button';
import { useRouter } from 'next/router';
type BlurImageProps = {
image: ImageInfo;
};
const BlurImage = ({ image }: BlurImageProps): JSX.Element => {
const [isLoading, setLoading] = useState(true);
return (
<div className="group shrink-0 h-40 w-40 relative aspect-w-1 aspect-h-1 overflow-hidden rounded-lg xl:aspect-w-7 xl:aspect-h-8 drop-shadow-xl bg-black">
<Image
alt=""
src={image.url}
width={512}
height={512}
className={cn(
'flex h-full duration-700 ease-in-out group-hover:opacity-20',
{
'scale-110 blur-2xl grayscale': isLoading,
'scale-100 blur-0 grayscale-0': !isLoading,
},
)}
onLoadingComplete={() => setLoading(false)}
/>
{!isLoading && (
<div className="absolute bottom-0 left-0 overflow-y-scroll items-center justify-center w-full h-full align-middle text-center px-2 opacity-0 duration-700 ease-in-out group-hover:opacity-100">
<a href={image.url}>
<p className="text-base text-white mb-2">
{image.prompt}
</p>
</a>
<Button
className="flex-shrink-0 px-2 py-2 text-sm font-bold text-white rounded bg-green-500"
type="button"
text="click me"
isSubmit={true}
onClick={() => console.log("clicked")}
/>
</div>
)}
</div>
);
};
export default BlurImage;
I'm trying to implement responsiveness to this screen but I'm having trouble keeping things in place. When I'm in desktop mode, the laptop image stays where it should be, in the center of the lines, on top of the square. But I just shrink the screen, and the image of the lines meets the edge of the screen and shrinks out of sync with the laptop image. Is there any way I can synchronize this downsizing?
This is my page:
import type { NextPage } from 'next'
import Navbar from '../components/Navbar'
import logo from '../assets/logomarca-branco.png'
import wave from '../assets/svg/wave.svg'
import Lines from '../components/Lines'
import Computer from '../components/Computer'
import AutoWrite from '../components/AutoWrite'
import MobileNavbar from '../components/MobileNavbar'
const Home: NextPage = () => {
console.log(wave);
return (
<div>
<section className='bg-[#352575] w-full h-screen relative'>
<Navbar logo={logo}>
<span>Home</span>
<span>Sobre</span>
<span>Serviços</span>
<span>Portifólio</span>
<span>Contato</span>
</Navbar>
<MobileNavbar logo={logo}></MobileNavbar>
<div style={{ height: 'calc(100% - 56px)' }} className="relative">
<div className='inline-block ml-16 mt-32'>
<AutoWrite></AutoWrite>
</div>
<Computer></Computer>
<Lines></Lines>
<img src={wave.src} alt="wave" className='absolute bottom-0' />
</div>
</section>
<section className='bg-[#F3F4F5] w-full h-screen relative'></section>
</div>
)
}
export default Home
This is the computer container:
import computer from '../assets/svg/computer.svg'
import computerFloor from '../assets/svg/computer-floor.svg'
export default function Computer() {
return (
<>
<img src={computer.src} alt="computer" className='absolute z-10 right-8 bottom-20' />
<img src={computerFloor.src} alt="computerFloor" className='absolute z-0 right-8 bottom-20 opacity-50' />
</>
)
}
This is the lines container:
import lineBright from '../assets/svg/lines-bright.svg'
import linesClean from '../assets/svg/lines-clean.svg'
export default function Lines() {
return (
<div className='w-min h-min'>
<img src={lineBright.src} alt="lineBright" className='absolute right-0 bottom-0 opacity-40' />
<img src={linesClean.src} alt="lineClean" className='absolute right-8 bottom-0 opacity-40' />
</div>
)
}
You can use background-position-x with the desired horizontal placement of the lines background.
For example:
.w-min img{
background-position-x: 25%;
}
...if the lines background would be a part of the CSS,
but in your case you'd need left (or right), like so:
.w-min{
left: 25%;
position: relative;
}
I'm new to programming. Here I have an antd modal and I've been trying to find a way to make it full screen. I want the modal to be full scree when it's opened and it shouldn't have any margin or paddings. For example, in the code I added width={1000} but there is still some margin on the left and right of the modal.
So how do I make the modal to take the whole screen without any margin and padding?
code:
https://codesandbox.io/s/otjy6?file=/index.js:539-560
Remove the fixed value for modal width and the centered attribute from your code file:
index.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Modal, Button } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setVisible(true)}>
Open Modal of 1000px width
</Button>
<Modal
title="Modal 1000px width"
// This was removed
// centered
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
// This was removed
// width={'1000'}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
</>
);
};
ReactDOM.render(<App />, document.getElementById('container'));
You need to add these CSS rules to the CSS file.
index.css
.ant-modal, .ant-modal-content {
height: 100vh;
width: 100vw;
margin: 0;
top: 0;
}
.ant-modal-body {
height: calc(100vh - 110px);
}
you need to unset max-width and margin of modal
.ant-modal {
max-width: unset;
margin: unset;
}
you need to unset content in before pseudo-element of ant-modal-centered class
.ant-modal-centered::before {
content: unset;
}
Working Demo
I think instead of Modal you can use the Antd Drawer. Here is the implementation.
import React,{useState} from 'react';
import {Drawer} from 'antd;
const FullScreenDrawer = ()=>{
const [visible,setVisible] = useState(false)
return(
<>
<button onClick={()=>setVisible(true)/>
<Drawer
visible={isVisible}
onClose={() => setVisible(false)}
width="100VW"
>
The content goes here
</Drawer>
</>
);
}
I just need a way to make the footer sticky and stay at the bottom of the page while using react.
The footer does not stay at the bottom of the page, despite following the materialize docs and creating the header, main, footer format in my app.
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
Here is the render method of app.js:
render() {
return (
<React.Fragment>
<Header />
<main>
... my stuff here ...
</main>
<Footer />
</React.Fragment>
);
}
Here is the Header component:
export default function About() {
return (
<header></header>
);
}
Here is the Footer component (copied exact from the materialize docs):
export default function About() {
return (
<footer className="page-footer">
<div className="container">
<div className="row">
<div className="col l6 s12">
<h5 className="white-text">Footer Content</h5>
<p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div className="col l4 offset-l2 s12">
<h5 className="white-text">Links</h5>
<ul>
<li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
</ul>
</div>
</div>
</div>
<div className="footer-copyright">
<div className="container">
© 2014 Copyright Text
<a className="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
);
}
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
I have this in the head of index.html (the docs say this is how to make a sticky footer):
<script>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</script>
(I think it is because react mounts my app content inside a <div id="root"> in index.html and thus breaks the header, main, footer format materialize requires for the footer to be sticky.)
I just need a way to make the footer sticky and stay at the bottom of the page while using react.
In react jsx you must use className instead of class.
class is a reserved word in javascript.
You can use a <div> tag instead of a <React.Fragment> with display: flex and min-height: 100vh. In the <Footer /> tag you can apply a style with align-self: flex-end it should align the footer to the bottom of the page.
You can see this fiddle: https://jsfiddle.net/brunohgv/cjypx5wL/4/