https://codesandbox.io/s/tailwindcss-react-boilerplat-forked-7yrez?file=/src/components/app.js
im having problems with the styling in my Accordion Heading.
I set my Accordion Contents like this:
<Accordion
heading1= { <DishItem name="Döner Teller Spezial" price="13,60€"/> }
content1= { <AccordionContent /> }
</Accordion>
However, the way my flex-row is styled within my DishItem component (working without issues on other places, or tested by itself on tailwindplay.com) seems to break within the Accordion Heading and im not sure how to fix it.
This is my DishItem Component:
<div className="w-full">
<div className="flex flex-row py-2 bg-white">
<div>
<p className="pl-2 leading-none font-lato">{props.name}</p>
<p className="pl-2 text-base leading-none"> { props.zusatz }
</div>
<p className="m-2 ml-auto place-self-center"> 24,50€</p>
</div>
</div>
This way of pushing the last flex element to the end of the container worked fine, but not within the heading. I am new to using materialUI and would appreciate any help to fix this.
The problem mostly comes from:
<AccordionSummary aria-controls="panel1a-content" id="panel1a-header">
<Typography className={classes.heading}>{props.heading1}</Typography>
</AccordionSummary>
Typography adds a <P> tag to your content and that's making it impossible for you to stretch the content. You could also make your life much easier by using the <Grid> component from Material-UI.
See my sandbox: https://codesandbox.io/s/tailwindcss-react-boilerplat-forked-5yv3w?file=/src/components/Accordion.js
Related
I am using tailwind css, the collapse class is set 'hidden' and is toggled to 'block' on hover , but it is still not working, have seen on web and they show the same approach. I understand one way is to remove hidden class on hover but this too shall work , idk please help .
<div className='text-white text-xl font-bold relative right-8 p-2 hover:text-slate-300 cursor-pointer'>Menu
<div className='bg-white text-black z-30 w-44 right-14 hidden absolute hover:absolute'>
<div className=' block'>
<div>Add Project</div>
<div>My Projects</div>
<div>Logout</div>
</div>
</div>
</div>
I've been diving some time on css scroll-snap and it works fine but I wanted the scroll-snap to have custom scroll speed in which until now I haven't found any workarounds.
For context, I wanted the scrolling similar to arknights website
Here is what I've tried so far
export default function Home() {
return (
<div className="h-screen w-screen max-h-screen max-w-screen overflow-y-auto snap-mandatory snap-y scroll-smooth">
<div className="h-screen w-screen snap-start">
1st Section
</div>
<div className="h-screen w-screen snap-start">
2nd Section
</div>
<div className="h-screen w-screen snap-start">
3rd SECTION
</div>
</div>
);
}
Is there something I can do to make scroll-snap work like the website above? Or if not possible, any simple implementations/pseudocode for this?
Have a look at my current web page, developed using tailwindcss page below:
What now I want to achieve is to have a .PNG background instead of that blank green background in the center.
I am new to Tailwind, so I used to simply set a background: url(..) in a css file for particular div class. Looking at TailwindCSS documentation here about backround-image,I can't see similar functionalities there.
Below is snippet of my code for that particular div:
<!-- Content: background image url should be in this div, right?-->
<div class="flex-1 pt-2 text-2xl font-bold mt-2 mb-2 bg-green-50 rounded-br-3xl">
<div>
<!--Search field -->
<div class="w-full">
<form class="rounded">
<div class="px-5">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Ask me anything (Press CTRL+K to focus)")>
</div>
</form>
</div>
<!-- content -->
<div class="px-5 pt-8">Course content here</div>
</div>
</div>
You can add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
}
so hero-pattern will become bg-hero-pattern for example.
Now that Tailwind 3 is out, you can use one-off background images like this, without having to use inline styles or extend tailwind:
<div class="bg-[url('/img/background.png')]">
<!-- ... -->
</div>
You can learn more about using arbitrary values in Tailwind 3 in the docs.
So my site's navbar shows up differently on Android and iOS phone, on Chrome/Android it looks fine but for some reason, the hamburger icon got stretched out and covers the whole page on Safari/iOS.
I use TailwindCSS and here's my code:
<nav className="fixed sticky top-0 z-10 flex gap-2 p-2 bg-white cursor-pointer md:pl-4">
<img
onClick={toggleOpen}
src="/hamburger-menu-red.png" className="w-10" alt="menu"
/>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-20 cursor-pointer" />
</Link>
)}
</nav>
Is it because I don't specify the height of the hamburger icon or is it some compatibility issue with Safari? Any help would be greatly appreciated.
Update based on Seth's input
<nav className="fixed sticky top-0 z-10 flex items-center h-12 gap-2 p-2 bg-white md:pl-4">
<button
onClick={toggleOpen}
>
<img
src="/hamburger-menu-red.png" className="w-10 h-8" alt="menu"
/>
</button>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-16 h-8"
/>
</Link>
)}
</nav>
Because it is the child of a flex item and the default align-items property of flex items is stretch.
However, there are other issues that are more of concern with your code, it is invalid. Neither an image of a hamburger or a site logo are justifiable nav items. A nav element should contain navigation links to site pages.
You should not attach a click event to an image. An image element is just for showing an image, nothing else. If it goes somewhere use a link, if it does something use a button element.
You don't need to put cursors on links, they already have them; images don't because they are not interactive elements.
I would suggest that the best approach is to use a button elemement (which already comes with clicky behaviours built in) to reveal a list of links (which come with linky behaviours built in).
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16