I have an AppLayout component which has:
A div with the h-full utility class, to make it take the full page height.
A Background component to make a background with blur. It has three main elements:
Navbar
Outlet, which dynamically changes height
Footer
import { Outlet } from 'react-router-dom';
import Background from '../components/Background';
import Footer from '../components/Footer';
import NewNavbar from '../components/NewNavbar';
export const AppLayout = () => (
<div className='h-full'>
<Background>
<div className='min-h-full backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div className=''>
<Footer />
</div>
</div>
</Background>
</div>
);
As you see, I applied flex flex-col to my "wrapper" div and flex-auto to a div wrapping my Outlet component, but this is not working. When I use straight HTML and CSS, the footer is placed correctly at the bottom of the page, and it always works.
All was so simple.
export const AppLayout = () => (
<div className='h-full'>
<Background >
<div className='min-h-screen backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div>
<Footer />
</div>
</div>
</Background>
</div>
);
Replace the min-h-full to min-h-screen
Related
I want to build a Carousel in Sitecore NextJs. I found a carousel package to do so, but it hardcodes the number of slides. Since the author will create the slides dynamically in Sitecore, my NextJs component should be smart enough to detect the number of "child slides" added to the Carousel and render them accordingly.
This is the example I found online:
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
export default class NextJsCarousel extends Component {
render() {
return (
<div>
<h2>NextJs Carousel - GeeksforGeeks</h2>
<Carousel>
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
<div>
<img src="/2.png" alt="image2" />
<p className="legend">Image 2</p>
</div>
<div>
<img src="/3.png" alt="image3"/>
<p className="legend">Image 3</p>
</div>
<div>
<img src="/4.png" alt="image4"/>
<p className="legend">Image 4</p>
</div>
<div>
<img src="/5.png" alt="image5"/>
<p className="legend">Image 5</p>
</div>
</Carousel>
</div>
);
}
};
Instead, I want the Slides within the Carousel to be dynamic and use a loop based on how many slides are added under my Carousel component in Sitecore.
I am using react-slick for my carousels you may follow something similar approach as i did for your react-responsive-carousel.
My Slider Component:
export const MainSlider: FC<SliderProps> = ({
settings,
data,
type,
className,
}) => {
if (!(data.length > 0)) return null;
return (
<Fragment>
<div className="mian-slider">
<div className="container cus-container">
<div className="main-sec-slider">
<div className="img-box-back" />
<SlickSlider {...settings} className={className}>
{data.map((value, index) => {
return (
<div key={index}>
{type === "main-carousel"
? InnerSlider.Main(value)
: InnerSlider.Article(value)}
</div>
);
})}
</SlickSlider>
</div>
</div>
</div>
</Fragment>
);
};
Inside map function you can pass another component as i did with name InnerSlider which contains html code for your carousel images.
In your case you need to pass this:
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
at last pass props data for MainSlider component :
<MainSlider
settings={settings}
data={[YOUR_SLIDER_DATA_ARRAY]}
type="main-carousel"
className="slider-main-text"
/>
I am using Tailwind with reactJS,
I have 2 different jsx file i.e Navpanel.jsx & Home.jsx
When I used fixed Position Home Text is going in navpanel. I also use block instead of flex but Navpanel then cover entire screen.
Please give me solution.
function Navpanel() {
return (
<div className="fixed flex h-full w-1/5 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>
)
}
function Home() {
return (
<div className='flex relative'>Home</div>
)
}
Keep the nav and the below nav component in App.js file. You can write you app.js file like this
const App = () => {
return (
<>
<div className="max-h-screen w-full">
<Navbar />
<div className="flex items-center w-full" >
<SidePanel />
<HomePage />
</div>
</div>
</>
)
}
export default App;
And inside home page component you can define any thing you want .
You can take refer from below example
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-h-screen h-full w-full">
<div class="flex items-center w-full ">
<div class="w-1/3 h-screen bg-rose-500">Side Panel</div>
<div class="w-2/3 h-screen bg-blue-500">Home Panel</div>
</div>
</div>
Consider the code:
import React from 'react'
import DarkPattern from '../Assets/dark-pattern.jpg'
const Profile = () => {
return (
<div>
<section className="bg-dark text-light text-center ">
<img src='https://i.pinimg.com/originals/ba/c1/37/bac13770cdea801e72852d8dc7160295.png' className='profile-img' alt='profile-img' />
<div className="row px-5 w-75 mx-auto" >
<div className="text-start col-md-6 col-md-4">
<h1>Name</h1>
<p>Tag</p>
</div>
<div className="text-end col-md-6 col-md-4 ">
<h1>Level</h1>
<p>Score</p>
</div>
</div>
</section>
</div>
)
}
export default Profile
With the output:
and in mobile mode:
What I want to do in mobile mode is to make the text-align center only on mobile mode. I want to left column to text-align-start and the right to text-align-end. Any ideas??
P.S. Only bootstrap, don't wanna use the CSS Media Queries.
Check out the documentation around text classes:
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment
https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment
You could set your default to be center and add on a text-md-left class on medium up.
As always mobile should be your default styling and then change as you go up in size.
I am trying to have some text on the left side and my pure-react-carousel on the right side.
The carousel stretches to fill in the width of it's parent.
How do I adjust the flexbox to have 50% width without carousel without overflowing on the y axis?
Index.js
const index = () => {
return (
<div>
<div className="flex">
<div className="bg-red-200 w-1/2">Hello</div>
<div className="bg-gray-400 w-1/2 ">
<Carousel />
</div>
</div>
<div>
<h1>THIS IS A BLOCK ELEMENT</h1>
</div>
</div>
);
};
Carousel.js(pure-react-carousel)
const Carousel = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
totalSlides={3}
>
<Slider className="rounded">
<Slide index={0}>
<img
src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
</Slide>
<Slide index={1}>
<img
src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
</Slide>
<Slide index={2}>
<img
src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
</Slide>
</Slider>
</CarouselProvider>
);
};
I started creating a blog like react application and using bootstrap grid system.
There seems to be a big space between my two columns. Is there a way to get rid of this?
A screen shot is attached.
import React from 'react';
import ReactDom from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import faker from 'faker';
//Now create a new component
const App = () => {
const myCustomStyle = {color:'green', fontSize:'50px'}
return (
<div className="container">
<div className="row">
<div class="col-3">
<img alt="avatar" src={faker.image.avatar()}></img>
</div>
<div class="col-9" >
<p><b>Alex</b><span>Today at 5.00pm</span></p>
<p>Great blog post!</p>
</div>
</div>
</div>
)
}
ReactDom.render(<App />, document.querySelector('#root'))
Use the Bootstrap 4 auto layout columns instead...
col-auto - flex shrink
col - flex grow
<div class="container">
<div class="row">
<div class="col-auto">
<img alt="avatar" src="//placehold.it/100" />
</div>
<div class="col">
<p><b>Alex</b><span>Today at 5.00pm</span></p>
<p>Great blog post!</p>
</div>
</div>
</div>
https://www.codeply.com/go/ZHoBi8rAHB