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
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 am trying to apply an onhover effect for a viewport larger than 768px. Below 768px it should look like the elements are "always onhover".
Specifically, on desktop or larger devices in general, there should be a background in a box at onhover. This background should always be shown on mobile, i.e. <768px in my case.
What am I doing wrong?
Here are the snippets.
JSX-Snippet:
import { features } from "../constants"; import styles from "../style";
const FeatureCard = ({ icon, title, content, index }) => (
<div className=
{`
flex flex-row p-6 rounded-[20px]
ss:max-sm:feature-card-small
sm:feature-card
${index !== features.length - 1 ? "mb-6" : "mb-0"}
`}
>
<div className={`
w-[64px]
h-[64px]
rounded-full
${styles.flexCenter}
bg-dimBlue`
}>
<img
src={icon}
alt="star"
className="
w-[50%]
h-[50%]
object-contain"
/>
</div>
<div className="flex-1 flex flex-col ml-3">
<h4 className="
font-poppins
font-semibold
text-white
text-[18px]
leading-[23.4px]
mb-1">
{title}
</h4>
<p className="
font-poppins
font-normal
text-dimWhite
text-[16px]
leading-[24px]
">
{content}
</p>
);
export default FeatureCard;
CSS-Snippet:
.feature-card:hover { background: var(--black-gradient); box-shadow: var(--card-shadow); }
.feature-card-small { background: var(--black-gradient); box-shadow: var(--card-shadow); }
simply apply feature-card as class without viewport specification works as expected; onhover --> background changes
different viewport-specifications (sm:..., ss:max-sm and sm:) and creation of different CSS classes (so there can be no overlap for sure) did not work
sorry if the code block looks like a mess here on stackoverflow. my first post, still learning.
Hello so I have been working on this for hours and tried brute forcing it, with as many different solutions I could think of, but I don't seem to be getting it to work.
Goal: make the cards take up more width, when the screen is bigger
This is my root component:
function App() {
const event = new Date(Date.UTC(2000, 11, 20, 3, 0, 0));
return (
<div className="bg-gray-200 p-8 min-h-screen flex items-center justify-center antialiased text-gray-900 flex-col">
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
</div>
);
}
export default App;
This is the Expenses Component
export default function Expenses(props) {
return (
<div className="">
<ExpenseItem time={props.date}></ExpenseItem>
</div>
);
}
This is the Expense Item Component
export default function ExpenseItem(props) {
return (
<div className="bg-white rounded-lg overflow-hidden border flex h-auto mt-4 shadow">
<CalendarItem date={props.time}></CalendarItem>
<div className="p-4">
<h4 className="font-semibold text-lg">All my money for software engineering</h4>
<div>10000€</div>
<div className="mt-4 inline-block bg-indigo-300 text-white px-4 py-1 rounded-lg shadow-lg uppercase tracking-wide font-semibold text-sm ">
Delete
</div>
</div>
</div>
);
}
I am grateful for every input! Thank you!
Add "width: 100%" to the card and its parent component. When Browser resize(expand or shrink), they will resize too. You can handle the detail of their size by giving some width to the parent and the parent's width will be limit width of the card component.
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.
I'm using TailwindCSS -a utility class framework- to style my elements. Altough this is more a generic CSS question.
I can't manage to position the box so this gets the remaining space without overflowing it. This is my actual state:
<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
<!-- SUBTITLE -->
<div>
<h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
</div>
<div class="relative self-auto mb-8">
<!-- ELEMENTS -->
<a href="#">
<img class="absolute z-10" style="top: 131px; left: 235px;"
src="{{ asset('some.svg') }}">
</a>
</div>
</div>
Output (omitting some of the inside elements):
As you can see, the scrollbar shows because the div is too big. In order to see the bothom of the box I have to scrolldown:
This is my desired output:
Thanks in advance.
Fiddle
Link.
The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.
.h-screen{
height:calc(100vh - 2rem)!important;
}
https://jsfiddle.net/c28145au/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This is the solution I found: w-[calc(100%_-_10px)]
you are using class h-screen which has height: 100vh; remove that class from the div.