Here's a quick rundown of the relevant code before I ask this question
The HomePage component
const Home = () => {
return (
<div>
<div>
{questions.map((question) => (
<div key={question.id} className="mb-4">
<Question
title={question.title}
contentPreview={question.contentPreview}
/>
</div>
))}
</div>
<Card className="p-4">Side Controlls</Card>
</div>
);
};
The Question component
const Question = ({ title, contentPreview }) => (
<Card className="p-4 break-words">
<h1 className="mb-4 text-lg text-blue-600">{title}</h1>
<p className="text-gray-500">{contentPreview}</p>
<div className="flex mt-4 gap-4">
<InfoIcon
icon={<HeartIcon />}
info={20}
iconClassName="text-red-400 w-6 h-6"
infoClassName="text-gray-500"
/>
<InfoIcon
icon={<CommentIcon />}
info={40}
iconClassName="text-blue-400 w-6 h-6"
infoClassName="text-gray-500"
/>
</div>
</Card>
);
The Layout component that HomePage is being wrapped in
const Layout = ({ children }) => (
<div className="bg-gray-100">
<div className="flex flex-col min-h-screen">
<NavBar />
<div className="mt-4 max-w-7xl self-center w-full px-4">{children}</div>
</div>
</div>
);
And here are some screenshots of whats happening
A screenshot with the containing div of the HomePage Component having a background so you can see better where it is
https://gyazo.com/b8aa356912f973f854299c665c66de76
A screenshot with the div that containing all the questions colored is the reddish color
and the (soon to be) controls/sidebar colored in green
https://gyazo.com/2ceb6a1277f1de4506531a2bcf0b9b17
And finally, the real problem is this screenshot, because I want both the controls and List of questions to be side by side my first instinct is to give the containing div of both of them a class of "flex" but when I do that this happens
https://gyazo.com/af6206b95dc684bbcb316a8d33362b62
and the controls get push beyond the "limits" to the right. if anyone knows or has any ideas about why this might be happening please let me know. thank you
(PS. please do not answer and say "use bootstrap" or use "x ui framework instead" because I'm using tailwind and do want to stay in tailwind)
I want both the controls and List of questions to be side by side
In such case, use flex flex-1 on both the sections to have even width. Else, you can still specify a width like question section flex w-8/12 and the side controls section flex w-4/12.
Related
I built a module, then broke it up into components and trying to put it back together.
The components work. Some components go inside the div of another component.
I have tried putting them into a div scaffold, but i was then writing more css to bring the module together.
I thought we just do this:
<CompOne>
<CompTwo />
</CompOne>
This gives an error:
Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.
So maybe the above is write i need to typescript? sorry couldnt find a working example on this.
function WaldoEye() {
return (
<WaldoEyeball>
<WaldoRetina/>
</WaldoEyeball>
)
}
export default WaldoEye
function WaldoEyeball() {
return (
<div className="
flex
relative
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
bg-gradient-to-r
from-slate-50
via-slate-100
to-slate-50
">
<div className="
absolute
flex
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
">
</div>
</div>
)
}
export default WaldoEyeball
function WaldoRetina() {
return (
<>
<div className="
flex
items-center
relative
mx-auto
w-16
h-16
rounded-full
border-2
border-sky-500
bg-gradient-radial
from-cyan-500
via-sky-300
to-sky-500
">
</div>
</>
)
}
export default WaldoRetina
So maybe the above is write i need to typescript? sorry couldnt find a working example on this.
Currently the WaldoEyeball component doesn't expect any children. You will need to adjust the props in the WaldoEyeball component so it accepts children.
const WaldoEyeball: FC = ({ children }) => {
return (
<div className="
flex
relative
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
bg-gradient-to-r
from-slate-50
via-slate-100
to-slate-50
">
<div className="
absolute
flex
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
">
{children} // drop children somewhere to render it
</div>
</div>
);
}
I am using Chakra-UI to create a UI for my NextJS project, and am struggling to get the navbar working correctly. It is fixed correctly as well as the mobile nav menu but the menu sits in front of the background div, but behind the hero div (with Flex' component with the setting blackAlpha)
How can I make the menu sit only at the front? using bog standard CSS i just use the z-index if I have problems like this but it hasn't been working for me. Any help appreciated
HomePage.js
import React from 'react';
import Hero from './Hero/Hero';
import Header from './Header/Header';
import Features from './Features/Features';
const HomePage = () => {
return (
<>
<Header/>
<Hero/>
<Features/>
</>
);
}
export default HomePage
my Header.js (with fluff removed)
const Header = () => {
return (
// Header/TopNav Container
<chakra.header
ref={ref}
shadow={y > height ? "sm" : undefined}
transition="box-shadow 0.2s"
bg={bg}
borderTop="6px solid"
borderTopColor="brand.400"
w="full"
overflowY="hidden"
borderBottomWidth={2}
borderBottomColor={useColorModeValue("gray.200", "gray.900")}
position="fixed"
top={0}
>
<chakra.div h="4.5rem" mx="auto" maxW="1200px" >
{DesktopNavContent}
{MobileNavContent}
</chakra.div>
</chakra.header>
);
}
my Hero.js
const Hero = () => {
const bg = useColorModeValue("white", "gray.800");
return(
<Box
w="full"
h="container.md"
backgroundImage="url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"
bgPos="center"
bgSize="cover"
>
<Flex
align="center"
pos="relative"
justify="center"
boxSize="full"
bg="blackAlpha.700"
>
<Stack textAlign="center" alignItems="center" spacing={6}>
<Heading
fontSize={["3xl", , "4xl"]}
fontWeight="semibold"
color="white"
>
Pay once, store forever....</Heading>
<Heading
fontSize={["3xl", , "4xl"]}
fontWeight="semibold"
color="blue.400"
textTransform="uppercase"
>
ARk Permanent Storage
</Heading>
<Button
colorScheme="brand"
textTransform="uppercase"
w="fit-content"
class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500"
>
Start project
</Button>
</Stack>
</Flex>
</Box>
)
}
Managed to do it by adding position:'static' to the problematic Flex as shown.
<Flex
align="center"
pos="relative"
justify="center"
boxSize="full"
bg="blackAlpha.700"
position="static"
>
I'm trying to get the condition if (course_module_index === 0) to be rendered on TOP of the const header when the screen is responsive (mobile version) of at most max-width: 599px.
I tried to do something in CSS but I couldn't. Is it possible to do this via javascript?
I'm still starting and I'm not sure how to start.
NOTE: Below is the Desktop rendering that is correct, only in the mobile version I wanted to change the position and put the const header underneath
renderHeader() {
const {course_module_index} = this.state;
const header = (
<>
<h4 className="col-3 md-col-8 sm-col-4 color__primary1 bold">Conversation</h4>
<p className="col-8 offset-3 md-col-8 sm-col-4 body2 back__type">
Practice your English in the conversation classes available in the schedule below.
You can join a class up to 10 min. after its start time, but
we recommend that you book a time as class size is limited.
</p>
</>
);
if (course_module_index === 0) {
return (
<>
{header}
<div className="header__opening-class md-col-8 sm-col-4">
<h6>Inaugural classes available!</h6>
<p>Mon/Wed/Fri from 9:00h to 9:30h | Tues/Thurs from 7:00 pm to 7:30 pm</p>
</div>
<hr ref={this.conversationBlockRef}className="margin-zero col-12 md-col-8 sm-col-4"/>
</>
);
}
return (
<>
{header}
<hr ref={this.conversationBlockRef} className="margin-zero col-12 md-col-8 sm-col-4"/>
</>
);
}
if you wrap your elements into a div with display: flex, you can manage order of components by order property
flex order docs
I am building a BlackJack game and I am mapping over a dealer cards array to display the dealer cards. I want to hide the first card that is returned from the array.
This is my DealerCards component.
import React from 'react'
const DealerCards = props => {
return (
<div className="text-center">
Dealer Cards
<div className="text-center m-auto flex justify-center">
{props.dealerCards.length > 0 ? (
<div className="mx-auto flex justify-center">
{props.dealerCards.map(card => (
<div key={card[0].code}>
<img
className="m-5 h-40 dealer-cards"
src={card[0].image}
alt={card[0].code}
/>
</div>
))}
</div>
) : (
<div></div>
)}
</div>
</div>
)
}
export default DealerCards
And this is the CSS I am using to try and hide it.
.dealer-cards:first-of-type {
display: none;
}
I also tried moving the dealer-cards className to the images parent div but got the same result.
What am I doing wrong??
Let me know if you need to see more of the code.
dealerCards.slice(1).map(...) will hide the first child.
You can update existing CSS style to like this,
.dealer-cards:nth-child(1) { display: none; }
I think this may help you.
I want the card header to be the normal text together with an image, side by side.
import logo from './images/logo.svg';
render() {
return (
<div>
<Card>
<Card.Content className='left aligned'>
<div className="two column headers">
<Card.Header>Hello World!</Card.Header>
<Image src={logo} size='tiny'/>
</div>
<Card.Meta>Item</Card.Meta>
<Card.Meta>Category</Card.Meta>
</Card.Content>
<Card.Content>
<Card.Description>10 units of test.</Card.Description>
</Card.Content>
</Card>
</div>
);
The image is appearing just after the 'Hello World!' header. How can I put them side by side, left aliging the text and right aligning the image ?
You can do this with CSS, however I will recomend to use Grid there.
<Card.Header>
<Grid>
<Grid.Column width={12}>Hello World!</Grid.Column>
<Grid.Column width={4}>
<Image src={logo} size='tiny'/>
</Grid.Column>
</Grid>
</Card.Header>
By the way, if you want to have an Image component on left, you can use Header component, see examples.