I want to make a button to move a specific page...like if I click the #move_to_slide2, then the page moves to slide2, but the moveTo function doesn't work.
There is only one section and 4 slides.
How can I make the move to button?
<div class="section" anchor="s0">
<div class="slide" data-anchor="slide1">
<div class="container w-1/3 mx-auto">
<div class="my-40">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="text-xl font-bold text-center text-unifolio-blue">Getting Started</div>
<div class="flex w-full mt-5 items-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 rounded-full bg-unifolio-blue cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide2">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide3">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<div class="flex w-full mb-5 items-center text-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 text-xs text-unifolio-blue cursor-pointer">아이디 및 비밀번호 설정</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide2">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">개인정보 입력</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide3">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">핸드폰 인증</p>
</p>
<div class="h-px w-full bg-white"></div>
this is my script.
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true
});
$('#move_to_slide1').click(function(){
fullpage_api.moveTo(1,slide1);
});
$('#move_to_slide2').click(function(){
fullpage_api.moveTo(1,slide2);
});
$('#move_to_slide3').click(function(){
fullpage_api.moveTo(1,slide3);
});
$('#move_to_slide4').click(function(){
fullpage_api.moveTo(1,slide4);
});
});
</script>
You are not passing the correct parameters to moveTo.*
2nd param should be the slide anchor string or the slide index.
For example:
fullpage_api.moveTo(1, 1); // using slide index
fullpage_api.moveTo(1, 'slide1'); // using slide anchor
Related
I need your help for my Breadcrumb component.
It did work last time but after I add the Pinia it did not work anymore.
I don't know if this is related to Pinia or not.
This is the screenshot of the project
my_vue_project_screenshot
If you additional detail more than below, please let me know
Thank you all in advance
Also, I'm not sure my Vue project structure is correct or not.
Main layout
|
|- BreadCrumb
|- RouterView
I put BreadCrumb component inside every View pages. Like this (for example)
<script setup>
import breadcrumb from '../../components/breadcrumb.vue';
const pages=[{ name: 'ช่าง', href: '/staff', current: true }]
const technicians = [
{ id: 0, name: 'Mr A', score: 25, role: 'กลึง' },
{ id: 1, name: 'Mr B', score: 35, role: 'เจาะ' },
]
</script>
<template>
<breadcrumb :pages="pages"/>
<div class="space-y-6 pt-8 sm:space-y-5 sm:pt-10">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-xl font-semibold text-gray-900">รายชื่อช่าง</h1>
<p class="mt-2 text-sm text-gray-700">Admin</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<router-link to="/staff/add">
<button type="button" class="inline-flex items-center justify-center rounded-md border border-transparent
bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">เพิ่มช่าง</button>
</router-link>
</div>
</div>
<div class="mt-8 flex flex-col">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">ชื่อ</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">แผนก</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">คะแนน</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="technician in technicians" :key="technician.id">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{{ technician.name }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.role }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.score }}</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<router-link :to="{ name: 'editstaff', params: { id: technician.id }}"
class="text-indigo-600 hover:text-indigo-900"
>Edit<span class="sr-only">, {{ technician.name }}</span>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
This is my BreadCrumb.vue
<script setup>
import { ChevronRightIcon, HomeIcon } from '#heroicons/vue/20/solid'
</script>
<template>
<nav class="flex" aria-label="Breadcrumb">
<ol role="list" class="flex items-center space-x-4">
<li>
<div>
<a href="/" class="text-gray-400 hover:text-gray-500">
<HomeIcon class="h-5 w-5 flex-shrink-0" aria-hidden="true" />
<span class="sr-only">Home</span>
</a>
</div>
</li>
<li v-for="page in pages" :key="page.name">
<div class="flex items-center">
<ChevronRightIcon class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
<a :href="page.href" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
:aria-current="page.current ? 'page' : undefined">{{ page.name }}</a>
</div>
</li>
</ol>
</nav>
</template>
Lastly, this is my main Layout (Not sure if this is related too or not
<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '#headlessui/vue'
import {
HomeIcon,
Bars3Icon,
FolderIcon,
UsersIcon,
XMarkIcon
} from '#heroicons/vue/24/outline'
const authenticated = false;
const navigation = [
{ name: 'home', to: '/', icon: HomeIcon },
{ name: 'enj', to: '/staff', icon: UsersIcon },
{ name: 'proj', to: '/project', icon: FolderIcon },
{ name: 'selectproj', to: '/selectproject', icon: FolderIcon },
{ name: 'validateproj', to: '/validateproject', icon: FolderIcon },
]
const sidebarOpen = ref(false)
</script>
<template>
<div>
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog as="div" class="relative z-40 md:hidden" #close="sidebarOpen = false">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-40 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
<DialogPanel class="relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" #click="sidebarOpen = false">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<div class="h-0 flex-1 overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 space-y-1 px-2">
<router-link v-for="item in navigation" :key="item.name" :to="item.to" class="['text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']">
<component :is="item.icon" :class="[isActive ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-4 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</router-link>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<a href="#" class="group block flex-shrink-0">
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<p class="text-base font-medium text-white">Tom Cook</p>
<p class="text-sm font-medium text-gray-400 group-hover:text-gray-300">View profile</p>
</div>
</div>
</a>
</div>
</DialogPanel>
</TransitionChild>
<div class="w-14 flex-shrink-0">
<!-- Force sidebar to shrink to fit close icon -->
</div>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex min-h-0 flex-1 flex-col bg-gray-800">
<div class="flex flex-1 flex-col overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 flex-1 space-y-1 px-2">
<RouterLink v-for="item in navigation" :key="item.name" :to="item.to" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-sm font-medium rounded-md']">
<component :is="item.icon" :class="[item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-3 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</RouterLink>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<div class="group block w-full flex-shrink-0">
<div v-if="authenticated" class="flex items-center">
<div class="ml-3">
<p class="text-base font-medium text-white pl-2">:Username</p>
<RouterLink to="/">
<p class="text-xs font-medium text-gray-300 group-hover:text-gray-200">Logout</p>
</RouterLink>
</div>
</div>
<div v-else class="flex items-center">
<div class="ml-3">
<RouterLink to="/signin">
<p class="text-base font-medium text-gray-300 group-hover:text-gray-200">เข้าสู่ระบบ</p>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-1 flex-col md:pl-64">
<div class="sticky top-0 z-10 bg-gray-100 pl-1 pt-1 sm:pl-3 sm:pt-3 md:hidden">
<button type="button" class="-ml-0.5 -mt-0.5 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" #click="sidebarOpen = true">
<span class="sr-only">Open sidebar</span>
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<main class="flex-1">
<div class="py-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<slot>
<RouterView/>
</slot>
<!-- /End replace -->
</div>
</div>
</main>
</div>
</div>
</template>
Below is my code, I want to change background and text color on clicking the container that has a tailwind class of h-36. Can any one help me and come up with a solution to that issue.
<template>
<div>
<SideBar />
<NavBar />
<div class="mt-20 ml-24 mr-2 mb-2 bg-white h-screen flex">
<div class="flex w-1/3 flex-col divide-y overflow-auto">
<div class="h-20 text-black bg-white flex shadow-sm text-lg uppercase font-black w-full items-center px-4">
<span>Configurations</span>
</div>
<div class="overflow-y-scroll">
<div class="h-36 w-full bg-yellow-650 px-4 flex items-center cursor-pointer">
<DesktopComputerIcon class="text-white h-12 w-12 flex-none"/>
<div class="flex flex-col w-3/4 ml-3 text-white">
<h3 class="text-white text-base font-bold">Front Office</h3>
<p class="text-xs">
Manage front office settings and appointments
</p>
</div>
</div>
<div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer">
<UserGroupIcon class="text-black h-12 w-12 flex-none"/>
<div class="flex flex-col w-3/4 ml-3 text-black">
<h2 class="text-black text-base font-bold">Patients</h2>
<p class="text-xs">
Manage patients infomation and settings
</p>
</div>
</div>
<div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer">
<PhotographIcon class="text-black h-12 w-12 flex-none"/>
<div class="flex flex-col w-3/4 ml-3 text-black">
<h2 class="text-black text-base font-bold">Imaging</h2>
<p class="text-xs">
Settings and management for imaging
</p>
</div>
</div>
<div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer" #click="showConfig('custom')">
<AdjustmentsIcon class="text-black h-12 w-12 flex-none"/>
<div class="flex flex-col w-3/4 ml-3 text-black">
<h2 class="text-black text-base font-bold">Custom Settings</h2>
<p class="text-xs">
Manage time slots, departments, and others
</p>
</div>
</div>
<div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer" #click="showConfig('billing')">
<CashIcon class="text-black h-12 w-12 flex-none"/>
<div class="flex flex-col w-3/4 ml-3 text-black">
<h2 class="text-black text-base font-bold">Billing</h2>
<p class="text-xs">
Manage billing controls, currency, amounts, treatments
</p>
</div>
</div>
<div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer">
<LibraryIcon class="text-black h-12 w-12 flex-none"/>
<div class="flex flex-col w-3/4 ml-3 text-black">
<h2 class="text-black text-base font-bold">Insurance</h2>
<p class="text-xs">
Manage insurance claims and payments
</p>
</div>
</div>
<div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer" #click="showConfig('users')">
<UserIcon class="text-black h-12 w-12 flex-none"/>
<div class="flex flex-col w-3/4 ml-3 text-black">
<h2 class="text-black text-base font-bold">Users</h2>
<p class="text-xs">
Create new users, manage uses, edit and delete
</p>
</div>
</div>
</div>
</div>
<div class="flex w-2/3 p-10">
<div class="w-full overflow-auto">
<Billing v-if='billing'/>
<CustomsConfig v-if='custom'/>
<Users v-if='users'/>
</div>
</div>
</div>
</div>
</template>
<script>
import {
UserGroupIcon,
PhotographIcon,
AdjustmentsIcon,
CashIcon,
LibraryIcon,
UserIcon,
DesktopComputerIcon,
} from '#heroicons/vue/outline';
import { ref } from 'vue';
import SideBar from '#/components/shared/SideBar.vue';
import NavBar from '#/components/shared/NavBar.vue';
import Billing from '#/components/configurations/settings/ui/billing.vue';
import CustomsConfig from '#/components/configurations/settings/ui/customConfig.vue';
import Users from '#/components/configurations/settings/ui/allUsers.vue';
export default {
components: {
SideBar,
NavBar,
UserGroupIcon,
PhotographIcon,
AdjustmentsIcon,
CashIcon,
LibraryIcon,
UserIcon,
DesktopComputerIcon,
CustomsConfig,
Users,
Billing,
},
setup() {
const custom = ref(false);
const users = ref(false);
const billing = ref(false);
const showConfig = (config) => {
if (config === 'custom') {
custom.value = true;
users.value = false;
billing.value = false;
}
if (config === 'users') {
custom.value = false;
users.value = true;
billing.value = false;
}
if (config === 'billing') {
custom.value = false;
users.value = false;
billing.value = true;
}
};
return {
custom,
users,
billing,
showConfig,
};
},
};
</script>
Because I want when the user clicks that div it changes the background and text color and render a component on the right hand side.
You can simply bind class property in the container so it takes the desired value
<div :class="desiredClass" class="h-36 w-full.....
and in your showConfig function you can update the value of desiredClass accordingly
this.desiredClass = "h-26"
you may want also to declare desiredClass as a reactive state .
I am working on image upload component in my react app and I design the image uploader component.
Here is the code and the result respectively.
<div className="px-8 py-6 mt-2 text-left bg-white shadow-lg">
<form action="">
<div class="flex items-center justify-center bg-grey-lighter">
<label class=" flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:bg-blue hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</div>
</form>
</div>
But I want change it exactly as the following component.
Make sure you have the same width and height for the element you want circular, in combination with rounded-full.
I adapted your example and used h-40 and w-40 to control height and width. With rounded-full, the result is a circular component.
<div class="flex items-center justify-center">
<form action="">
<label class="text-blue border-blue hover:bg-blue flex h-40 w-40 cursor-pointer flex-col items-center justify-center rounded-full border bg-white uppercase tracking-wide shadow-lg hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</form>
</div>
Is this you want ??
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10 w-72 border-4 border-gray-200 rounded-full">
<div class="bg-gray-300 p-20 w-52 rounded-full text-center">
Upload <br/>Photo
</div>
</div>
i am trying to fire click event from div but if v-if false on component rendering click event not working
here my code:
export default {
name: "ProSelect",
data() { return {
isActive: false,
}},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
}
}
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
if i change isActive variable to true on rendering click is working
i found the answer but i wonder why this is not working.If i use #mousedown.prevent instead of #click its working
I am not sure if I get it correctly but as per the code you posted. Your parent div will be removed from the DOM as v-if is false. You can assign isActive as true while mounting.
Working Demo :
new Vue({
el: '#app',
data() {
return {
isActive: false,
}
},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
},
mounted() {
this.isActive = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
this is whole template code
<template>
<div>
<div class="flex flex-col items-center">
<div class="w-full flex flex-col items-center">
<div class="w-full">
<div class="flex flex-col items-center relative">
<div class="w-full">
<div class="flex">
<div class="flex flex-auto flex-wrap"></div>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:rounded-none focus:rounded-t-lg focus:border-b-0 focus:bg-white focus:border-indigo-500 border-transparent focus:border-transparent focus:ring-0"
type="text"
v-model="selected"
:name="name"
#focusin="isActive = !isActive"
#focusout="isActive = !isActive"
placeholder="Search by position">
</div>
</div>
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
My Component
return (
<div>
<section>
<div class="md:grid md:grid-cols-2 gap-4">
{pinnedRepos.map((r) => {
const bgColor = {
backgroundColor: r.node.primaryLanguage.color,
};
return (
<div
id="project-outer-container"
class="text-sm border-solid border border-gray-300 rounded shadow mb-4 md:mb-0 pb-4">
<div id="project-inner-container" class="p-4 relative">
<div id="project-title" class="flex items-center">
<span class="mr-3 text-xl">
<GoRepo />
</span>
<a href={r.node.url}>{r.node.name}</a>
</div>
<div class="flex flex-col justify-between">
<div id="project-about" class="">
<p class="">{r.node.description}</p>
</div>
<div id="project-lang" class="flex items-center content-end">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
</div>
</div>
</div>
);
})}
</div>
</section>
</div>
);
I want to keep this section...
<div id="project-lang" class="flex items-center content-end">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
at the bottom of its parent always. Otherwise I end up with stuff like this:
which just looks messy. I have tried multiple flexbox alignments and justified rulings. I have set the parent element to absolute and the child to a relative still nothing.
I have even tried the way of using a sticky footer but nope.
Any CSS wizards to move me in the right direction would be great
With the tip of above this is how I managed to do it
<div
id="project-outer-container"
class="text-sm border-solid border border-slate-300 dark:border-slate-700 rounded shadow mb-4 md:mb-0 pb-4">
<div id="project-inner-container" class="p-4 h-full relative">
<div id="project-title" class="flex items-center">
<span class="mr-3 text-xl">
<GoRepo />
</span>
<a href={r.node.url}>{r.node.name}</a>
</div>
<div id="project-about" class="">
<p class="">{r.node.description}</p>
</div>
//----------------- this is what I wanted to be placed at the bottom
<div id="project-lang" class="flex items-center absolute bottom-0">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
</div>
</div>