In my vuejs component, I have a form with submit button and a cancel button.
I want my buttons to align right
Following is my current code
<template slot="modal_actions">
<div class="flex items-center justify-end">
<close-overlay class="h-full" identifier="addNewScheduleModal">
<cs-button variant="blank">Cancel</cs-button>
</close-overlay>
<disables-submit-on-errors
:identifier="identifier"
#proceed="addNewSchedule"
>
<loading-button ref="submitBtnSave" size="normal">
Save & Close
</loading-button>
</disables-submit-on-errors>
</div>
</template>
Even though I'm using justify-end class, still the button are aligned left...
I'm struggling to find what I'm doing wrong and align them right....
I'm using tailwind-css
Assuming that your cancel button is at left and loading button is at right of cancel button.
Then there are two ways,
you can change the order of buttons inside div like this:
<template slot="modal_actions">
<div class="flex items-center justify-end">
<loading-button ref="submitBtnSave" size="normal">
Save & Close
</loading-button>
<disables-submit-on-errors
:identifier="identifier"
#proceed="addNewSchedule"
>
<close-overlay class="h-full" identifier="addNewScheduleModal">
<cs-button variant="blank">Cancel</cs-button>
</close-overlay>
.
.
</div>
</template>
You can change the flex-direction to row-reverse by adding class flex-row-reverse to the div. I have created a similar example below for understanding purpose.
<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
<h3>Before</h3>
<div class="flex items-center justify-end h-96 w-full bg-red-200 space-x-10">
<div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
<div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
<h3>After</h3>
<div class="flex flex-row-reverse items-center justify-end h-96 w-full bg-red-200 space-x-10">
<div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
<div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
</div>
Related
Im doing a little blog project to practice vue.js. Im using composition API script setup. When you write a post it saves in localStorage. When you click on the text in the blog it opens up an overlay and a big sized blogtext. its just that its not only showing the one I clicked on but the other earlier blog posts aswell. How can I focus so it only shows the one I click on. Im using tailwind as css.
On this link you can test yourself but here I have some dummytext in before I made it so the note.text will be shown; https://unique-sprinkles-d1a6cd.netlify.app/
<template>
<div v-if="showModal" #click="showModal = false" class="absolute w-screen h-screen bg-black opacity-75 z-10 flex cursor-pointer items-center justify-center">
<div v-for="note in notes" :key="note.id" class="bg-white hover:border-red-400 p-4 rounded-full text-2xl font-bold"><p>{{ note.text }}</p></div>
</div>
<div class="w-6/12 text-center m-auto">
<h1 class="text-4xl font-bold text-indigo-500 m-5">Blog Posts</h1>
<div class="border-2 border-slate-100 rounded-3xl hover:border-red-400" v-for="note in notes" :key="note.id" >
<div class="relative flex flex-col m-0 justify-around cursor-pointer">
<button class="absolute top-0 right-0 w-5 h-5 cursor-pointer rounded-full hover:bg-red-400 p-2.5" #click="deleteBtn(note)">x</button>
<img class="w-24 h-24 p-3.5 rounded-full" :src="note.img">
<p class="text-xs text-right pr-3.5"> {{ note.writer }}</p>
<p class="text-lg font-bold"> {{ note.headline }}</p>
<p #click="showModal = true" class="text-left p-3.5 text-sm"> {{ note.text }}</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const notes = ref([]);
notes.value = JSON.parse(localStorage.getItem('notes'));
function deleteBtn(note){
notes.value.splice(notes.value.indexOf(note), 1);
localStorage.setItem('notes', JSON.stringify(notes.value));
notes.value = JSON.parse(localStorage.getItem('notes'));
console.log(notes.value)
}
const showModal = ref(false)
</script>
after changes it looks like this; How can I make the empty squares dissapear and also the opacity to 0 in the white textarea so no text from the behind shows. Ive tried tailwind opacity functions but doesnt work.
Here's a method you can use for conditional rendering.
When dealing with v-loops without using a child component, you can use index in the loop then conditionally render it with v-if="selectedIndex = index.
In the modal section, you add the v-if like this
<div
v-if="showModal"
#click="showModal = false"
class="absolute w-screen h-screen bg-black opacity-75 z-10 flex cursor-pointer items-center justify-center"
>
<div
v-for="(note, index) in notes"
:key="note.id"
class="bg-white hover:border-red-400 p-4 rounded-full text-2xl font-bold"
>
<p v-if="selectedIndex === index">{{ note.text }}</p>
</div>
</div>
then in the place where you rendered the text to be clicked, you add a click event to update selectedIndex when you click on different rendered contents with their relevant index.
<div
v-for="(note, index) in notes"
:key="note.id"
class="border-2 border-slate-100 rounded-3xl hover:border-red-400"
#click="selectedIndex = index"
>
<div
class="relative flex flex-col m-0 justify-around cursor-pointer"
>
...
</div>
</div>
then in the script tag, just add a ref of the selectedIndex
const selectedIndex = ref(null)
Note:
If your #click="showModal = true" is faster than the selectedIndex update, you will get a "delayed" update. To fix this you want to convert the #click="showModal = true" into a function, which includes the updateIndex and this showModal reassigning.
It would look something like this
<template>
// other parts...
<p #click="updateValues(index)" class="text-left p-3.5 text-sm"> {{ note.text }}</p>
// other parts...
</template>
<script setup>
// ... your other functions above
const updateValues = (index) => {
selectedIndex.value = index
showModal.value = true
}
</script>
Anyhow, I think it would be better to split those 2 items (the modal and the render text) into different components, that way you will be able to have an easier time handling the logic.
I have created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature
<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div
v-for="filter in filterTypes"
:key="filter.type"
class="flex flex-row items-center px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :
<div class=" bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div class="flex items-center">
<div
v-for="filter in filterTypes"
:key="filter.type"
class=" px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
I can't seem to find a working way for vertically & horizontally centering a div when using tailwindcss.
This is my current code that doesn't particularly works :
<div class="absolute flex items-center justify-center">
<Contact />
</div>
If you have a header and you want to ignore the header and center the content the code goes like:
<div>
<div className="flex h-screen flex-col bg-gray-100">
<header className="text-white text-center fixed top-0 left-0 right-0 bg-blue-600">
Header
</header>
<main className=" flex flex-1 justify-center items-center">
<div className="shadow bg-white rounded-md w-full text-center">
Content
</div>
</main>
</div>
</div>
Try with this example
something like <div class="grid place-items-center h-screen">
So I'm trying to bind the click event so it only runs when the actually href title is clicked on. here is my code.
<collapse :multiple-active="false">
<div v-for="(campaign, index) in allCampaigns" :key="index">
<collapse-item :title="campaign.campaign_name" #click.native.prevent="grabClientFacebookData(campaign.id)">
<div v-if="spinner == true" style="text-align: center"><img src="../../../../img/spinner.gif"></div>
<div v-if="search == true">
<vue-good-table
:columns="columns"
:rows="tableData"
styleClass="vgt-table striped bordered"/>
<highcharts :options="chartOptions"></highcharts>
</div>
</collapse-item>
</div>
</collapse>
And here is the parent element:
<div class="card card-plain">
<div role="tab" id="headingOne" class="card-header">
<a data-toggle="collapse"
data-parent="#accordion"
:href="`#${itemId}`"
#click.prevent="activate"
:aria-expanded="active"
:aria-controls="`content-${itemId}`">
<slot name="title" #click.prevent="grabClientFacebookData(campaign.id)">
{{title}}
</slot>
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<collapse-transition :duration="animationDuration">
<div v-show="active"
:id="`content-${itemId}`"
role="tabpanel"
:aria-labelledby="title"
class="collapsed">
<div class="card-body">
<slot></slot>
</div>
</div>
</collapse-transition>
I am fairly new to vue and was wondering if it's possible. My problem is that the click event shoots whenever any port of the collapse is clicked, not just the title.
have you tried wrapping {{title}} in a span with the event bound to that? i.e.
<span #click.prevent="grabClientFacebookData(campaign.id)">{{title}}</span>
I need to render a div with item class
<div class="ui horizontal list">
<transition-group name="custom-classes-transition” enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
<div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex”> .. </div>
</transition-group>
</div>
.item should be directly nested of .ui.list
I try to add tag="div” but this add a new div with my div.item
Simply add a class prop to your transition-group.
Example:
<transition-group class="ui horizontal list" name="custom-classes-transition" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
<div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex"> .. </div>
</transition-group>