My card element has a fixed height of h-80 (in Tailwind). usually I use the card in a grid.
Now, I have a div inside that card, which is bigger than it's parent div, however I want it to scroll vertically.
The problem becomes now, that I can not scroll completly down. The last line is cut off.
Overflow auto, but not completly scrollable:
Full height to see what content is missing:
I am using VueJS as framework, this is my Card component:
<div class="w-full overflow-hidden h-full px-3 py-2">
<div v-if="title" class="block text-gray-700 text-lg font-semibold py-2 px-2">
<i :class="title_icon" />
{{ title }}
</div>
<div class="h-full overflow-y-auto">
<slot>
<-- Here is another component which holds the appointments-->
</slot>
</div>
</div>
How do I fill the remaining space in a div with overflowing content in TailwindCSS?
Use the flex-grow property on the sub-div to allow it to grow.
Set flex on the parent div and flex-col to keep the styling.
Find the documentation here
<div class="flex flex-col w-full overflow-hidden h-full px-3 py-2">
<div v-if="title" class="block text-gray-700 text-lg font-semibold py-2 px-2">
<i :class="title_icon" />
{{ title }}
</div>
<div class="flex-grow h-full overflow-y-auto">
<slot>
<-- Here is another component which holds the appointments-->
</slot>
</div>
</div>
Related
I want to ask. I have a layout, there is a button when i click the button, a pop up will appear, the problem is when the modal appears, there are some components that are not dimmed, such as the button and the navbar as shown in the picture, I use vue cli and tailwind and for the modal I use flowbite. I've been looking for a way but still can't find it. Can anyone help me?
My website currently has a mobile-based display
this the web without modal
and this is the web when the button is clicked
here is the code in navbarWhite.vue
<template>
<header class="sticky h-14 top-0 z-50 bg-white" :class="boxShadow">
<div class="flex flex-row">
<div class="absolute" v-if="srcPictureLeft">
<img
#click="onClickBack"
class="ml-7 py-4 cursor-pointer text-black"
:src="require(`../assets/icon/${srcPictureLeft}`)"
/>
</div>
<div v-else></div>
<div class="py-4 relative mx-auto font-semibold text-black text-xl">
{{ title }}
</div>
</div>
</header>
</template>
<style>
</style>
<script>
export default {
name: "NavbarWhite",
props: {
onClickBack: {
type: Function,
},
title: String,
srcPictureLeft: String,
boxShadow: String,
},
};
</script>
and this is the button component (ButtonBottom.vue)
<template>
<div
class="
sticky
w-full
absolute
mb-0
bottom-0
z-50
bg-white
h-16
drop-shadow-[0_0_4px_rgba(0,0,0,0.25)]
"
>
<div class="mx-[30px] py-2">
<button-primary
class="
bg-green-button
text-white
hover:bg-green-button-darker hover:rounded-[32px]
"
>
<slot>Button</slot>
</button-primary>
</div>
</div>
</template>
<script>
import ButtonPrimary from "#/components/ButtonPrimary.vue";
export default {
name: "ButtonBottom",
components: {
ButtonPrimary,
},
};
</script>
and this is the parent where all the component called
<template>
<div class="h-screen relative">
<div class="h-[94%]">
<navbar-white
boxShadow="shadow-[0_0_10px_0_rgba(0,0,0,0.25)]"
srcPictureLeft="backIconBlack.svg"
:onClickBack="goBack"
title="Ringkasan Transaksi"
/>
<div class="mt-10 mx-[30px]">
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">No. Rekening</div>
<div>12345678</div>
</div>
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nama Penerima</div>
<div>Lorem Ipsum</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Bank Tujuan</div>
<div>12345678</div>
</div>
<hr class="mb-4" />
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nominal</div>
<div>Rp 200.000</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Fee</div>
<div>Rp 2.500</div>
</div>
<div class="flex flex-row justify-between">
<div class="font-semibold">Total</div>
<div class="font-semibold">Rp 202.500</div>
</div>
</div>
</div>
<button-bottom data-modal-toggle="biayaAdmin">Selanjutnya</button-bottom>
<!-- modal start here -->
<div
id="biayaAdmin"
tabindex="-1"
class="
hidden
overflow-y-auto overflow-x-hidden
fixed
top-0
right-0
left-0
z-50
w-full
md:inset-0
h-modal
md:h-full
"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div
class="
flex
justify-between
items-center
p-5
rounded-t
border-b
dark:border-gray-600
"
>
<h3 class="text-xl font-medium text-gray-900 dark:text-white">
Small modal
</h3>
<button
type="button"
class="
text-gray-400
bg-transparent
hover:bg-gray-200 hover:text-gray-900
rounded-lg
text-sm
p-1.5
ml-auto
inline-flex
items-center
dark:hover:bg-gray-600 dark:hover:text-white
"
data-modal-toggle="biayaAdmin"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
With less than a month to go before the European Union enacts new
consumer privacy laws for its citizens, companies around the world
are updating their terms of service agreements to comply.
</p>
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
The European Union’s General Data Protection Regulation (G.D.P.R.)
goes into effect on May 25 and is meant to ensure a common set of
data rights in the European Union. It requires organizations to
notify users as soon as possible of high-risk data breaches that
could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div
class="
flex
items-center
p-6
space-x-2
rounded-b
border-t border-gray-200
dark:border-gray-600
"
>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-white
bg-blue-700
hover:bg-blue-800
focus:ring-4 focus:outline-none focus:ring-blue-300
font-medium
rounded-lg
text-sm
px-5
py-2.5
text-center
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
"
>
I accept
</button>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-gray-500
bg-white
hover:bg-gray-100
focus:ring-4 focus:outline-none focus:ring-gray-200
rounded-lg
border border-gray-200
text-sm
font-medium
px-5
py-2.5
hover:text-gray-900
focus:z-10
dark:bg-gray-700
dark:text-gray-300
dark:border-gray-500
dark:hover:text-white
dark:hover:bg-gray-600
dark:focus:ring-gray-600
"
>
Decline
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ButtonBottom from "#/components/ButtonBottom.vue";
import NavbarWhite from "#/components/NavbarWhite.vue";
export default {
name: "TransactionSummary",
components: {
ButtonBottom,
NavbarWhite,
},
methods: {
goBack() {
this.$router.go(-1);
},
},
};
</script>
The css z-index of your header and footer might be higher than the z-index of the overlay mask.
Try inspecting the elements and evaluate their z-index values, try forcing new values to ensure that the z-index of the header and footer is a lower value than the grey overlay mask.
The issue might be the lack of a z-index value on some of those elements to indicate which should appear over the top of another.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I don't see the '...' after setting text-ellipsis, overflow hidden and nowrap on this div.
Here's my code:
import Image from "next/future/image";
import Link from "next/link";
export default function MenuOption({ title, description, icon, route }) {
return (
<Link href={route}>
<div className="flex h-[74px] w-full cursor-pointer gap-4 overflow-hidden text-ellipsis rounded-lg bg-gray-50 p-4 ring-1 ring-gray-300 drop-shadow-sm hover:ring-2">
<Image src={icon} alt={`${title} Icon`} className="mt-1 h-5 w-auto" />
<div className="float-left inline-block overflow-hidden text-ellipsis whitespace-nowrap">
<h2 className="text-md font-medium text-gray-900">{title}</h2>
<p className="text-sm text-gray-500">{description}</p>
</div>
</div>
</Link>
);
}
You have to use all the style on specific element, like <p></p> or <h2></h2> and with fix width like
<h2 className="text-md font-medium text-gray-900 inline-block overflow-hidden text-ellipsis whitespace-nowrap w-100">{title}</h2>
<p className="text-sm text-gray-500 inline-block overflow-hidden text-ellipsis whitespace-nowrap w-100">{description}</p>
here,
.w-100 {
width: 100%
}
I'm coded for drag and drop in angular material and dropped element should in correct hovered card , So I took index of card and drop the element using mouseover. Now the problem is for tab its not working because touchstart only take the index after touch the card.Is there any option to do that in correct way
<div class="xxl:m-2 m-1 xxl:rounded-xl rounded-lg xxl:min-h-24 min-h-14 bg-gray-400 bg-opacity-12
(mouseover)="dropped(i)" (touchstart)="dropped(i)" >
<div class="xxl:p-3 p-2">
<div class="z-20 flex items-center justify-between xxl:py-3 py-1 xxl:px-4 px-2 xxl:my-2 my-1 cursor-move xxl:rounded-lg rounded-md bg-card max-h-8 xxl:max-h-full"
*ngFor="let map of card.stages;" cdkDrag [cdkDragData]="map" (mousedown)="getData(map)" (touchstart)="getData(map)">
<div class="min-w-0" >
<div class="font-medium leading-5 truncate">{{map.stage_name}}</div>
</div>
<button mat-icon-button (click)="cutStage(map)">
<mat-icon class="xxl:icon-size-6 icon-size-5 " svgIcon="heroicons_outline:x-circle"></mat-icon>
</button>
</div>
</div>
</div>
This question already has answers here:
Why do I get the error "expressions must have one parent element", how do I fix this?
(8 answers)
Closed 1 year ago.
I've been making a password input box, however when I put it into my JS code it comes with the error in the title. Here's my code: (This is in TailwindCSS too)
function HomePage() {
return (
<div>
<p className="text-center text-green-600">Welcome to Next.js a!</p>
</div>
<div class=" relative ">
<label for="with-indications" class="text-gray-700">
Password
<span class="text-red-500 required-dot">
*
</span>
</label>
<input type="text" id="with-indications" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="passwor" placeholder="Password" />
<div class="grid w-full h-1 grid-cols-12 gap-4 mt-3">
<div class="h-full col-span-3 bg-green-500 rounded">
</div>
<div class="h-full col-span-3 bg-green-500 rounded">
</div>
<div class="h-full col-span-3 bg-green-500 rounded">
</div>
<div class="h-full col-span-3 bg-gray-200 rounded dark:bg-dark-1">
</div>
</div>
<div class="mt-2 text-green-500">
Valid password
</div>
</div>
)
}
export default HomePage
You are returning 2 divs at the top level.
Use a fragment or another container element as wrapper:
<React.Fragment>
<div>...</div>
<div>...</div>
</React.Fragment>
I have the following inertia link component
<inertia-link v-for="project in $page.props.user.favorite_projects" :key="project.id" class="flex items-center px-6 py-2 mb-1 text-sm leading-6 text-gray-300 transition duration-150 ease-in-out group focus:outline-none focus:bg-gray-700 hover:text-white hover:bg-gray-700" :href="route('projects.show',project.slug)">
<div class="w-3 h-3 mr-3 overflow-hidden rounded-full">
<div class="w-full h-full" style="background-color = {{ project.color }};">
</div>
</div>
{{ project.project_name }}
</inertia-link>
Where project.color contains a hex color value like #fc8181, which is used to color the element based on the project.
However, the circle with this color value is not being shown in the dom.
Is there a way to display the project color as background color?
you need to bind the style, try style
:style="{ background-color: project.color }"