I modify the tailwind elements carousel with two columns left column with content and a right column with image. All functionality is correct but the problem is responsivity.
How can I modify this carousel so that I change the resolution to md or sm I get columns vertical?
I tried to do flex flex-row and when i change the resolution to md or sm to be flex flex-col and nothing changed the same with grid grid-cols-2 and after changing to md and sm to grid-cols-1
This is my code
<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96 ">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4 ">SOME TEXT</h1>
<p class="text-gray-500">Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 1</h1>
<p class="text-gray-500">Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 2</h1>
<p class="text-gray-500">Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have several component that I use in a component called QuickButton.vue:
<Tabs>
<TabPanels>
<TabPanel><EmployeesMainData/></TabPanel>
<TabPanel><ContactAddressData/></TabPanel>
<TabPanel><EmploymentData/></TabPanel>
<TabPanel><AdditionalData/></TabPanel>
</TabPanels>
<div>
<button type="submit" #click="signUp">Save</button>
</div>
</Tabs>
this is EmployeeMainData code:
<template>
<div class="col-span-6 sm:col-span-4">
<label for="email-address" class="block text-sm font-medium text-gray-700">Email address</label>
<input id="email-address" v-model="email" type="email" autocomplete="email" required
class="appearance-none rounded-md relative block w-full my-4 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Email address">
<p class="mt-2 text-sm text-gray-500">*Required</p>
</div>
<div class="col-span-6 sm:col-span-4 mb-2">
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input id="password" v-model="password" type="text" required
class="appearance-none rounded-md relative block w-full my-4 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Password">
<p class="mt-2 text-sm text-gray-500">*Required</p>
<p class="mt-2 text-sm text-gray-500">*Password is used for employee to login into their Android app. Save and share the password to the employee.</p>
</div>
</template>
How do I access email and password input using ref and script setup from QuickButton.vue? I already trying using defineExpose but didnt work
This chapter in the Vue docs contains information on v-model and using it with form input: https://vuejs.org/guide/essentials/forms.html. (Btw, the Vue docs are amazing! If you want to level up fast, review it a chapter or two at a time :).
I have this element where the code of the content is not inside normal html marks but inside a data-marker attribute of div :
<div class="profil-block d-flex firm" data-lat="45.812122" data-lon="3.112388" data-title="AGC CEGESMA" data-marker="<div class="profil-block firm w-auto m-0 p-0 no-box-shadow">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-block text-center">
<img class="avatar" src="/build/images/content/cabinet-anonyme.aa87fff0.svg"/>
</a>
<div class="name w-auto mt-2">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="text-decoration-none">AGC CEGESMA</a>
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"/>
</svg>
Clermont-Ferrand (63100)
</span>
<div class="info d-flex flex-row mt-2 justify-content-between align-items-center">
<div class="d-flex">
<span role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</span>
<span role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</span>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
">
<div class="d-flex align-items-start">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" title="En savoir plus sur le cabinet AGC CEGESMA">
<img src="/build/images/content/cabinet-anonyme.aa87fff0.svg" class="avatar" alt="AGC CEGESMA – Expert-comptable logo">
</a>
<div class="d-desktop-none">
<h3 class="name">
AGC CEGESMA
</h3>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:title="" xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
</div>
<div class="d-flex flex-column justify-content-between -medium">
<div class="d-desktop-block">
<div class="name">
AGC CEGESMA
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
<div class="competence-list">
<div class="competence ">RAY François</div>
</div>
</div>
<div class="info d-flex justify-content-between">
<div class="d-flex">
<div role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par téléphone">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</div>
<div role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par mail">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</div>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none" title="En savoir plus sur le cabinet AGC CEGESMA">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
I can retrieve the content with driver.find_elements(by=By.XPATH, value='//div[#class="profil-block d-flex firm"]').get_attribute('data-marker'), but then how to i select some buttons for example inside this attribute?
I need selenium to click a link inside this data-marker code
Thank you
I don't think it is possible to click on an element thats only in the data-marker. In your situation though you can just locate this element:
This code should work for locating that element:
driver.find_elements(by=By.XPATH, value='//div[#class="icon-block firm-contact cursor-pointer"]')
I tried to position the dropdown to the top of the page using Tailwind CSS and z-index.
But it goes behind of other elements in the grid
image
Code Snipets
<div class="flex flex-col gap-y-4">
<h1 class="text-3xl font-semibold text-left font-display sm:text-4xl">
Following
</h1>
<div class="flex flex-col w-full h-full gap-4 p-4 bg-white border border-gray-200 rounded shadow-md">
<h1 class="mb-3 text-xl font-semibold text-left font-display">
Legislators
</h1>
<div class="flex flex-col items-between">
<div class="relative z-10 grid gap-4 mb-5 xxs:grid-cols-1 xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
<FollowingCard
v-for="govId in legislatorsFollowed"
:key="govId"
class="w-full sm:w-auto"
:legor-id="govId"
/>
</div>
</div>
</div>
FollowingCard.vue
person
{{ name }}
{{ role }} | {{ party }} | {{ state }} of {{ country }} {{showDropdown}}
more_vert
<div v-if="showDropdown" class="absolute top-0 left-0 z-40 flex flex-col py-1 mt-8 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-sm max-h-40" data-testid="sessionDropdownBtn">
<button
v-for="session in topics"
:key="session"
class="relative z-50 flex items-center justify-start w-full px-4 py-2 text-sm text-left capitalize hover:bg-gray-100 font-body min-w-max"
>
{{ session }}
</button>
</div>
</button>
</div>
</transition>
</div>
I am trying to create a simple survey builder with Vue3 and Vue Draggable. All is going well until I try to create a multiple choice question. This type of questions has its own sortable list of possible answers. When I add another multiple choice question it then pulls from the same list which makes sense but I have tried to use a v-if to check the parents ID to match the choice ID..
Basically if I add a new choice it adds to the all multiple choice questions, which makes sense, but how to I keep it to the current item I am in?
Any ideas? I know the code is mess, it will be refactored once it works.
<template>
<div class="p-4">
<div class="container mx-auto rounded-md grid grid-cols-12 gap-4 h-full">
<div class="col-span-4 p-3 flex flex-col min-h-screen bg-gray-200 shadow-md rounded-md">
<div class="text-lg font-bold w-full bg-blue-600 text-white rounded-md p-2 mb-4">Builder your survey</div>
<div class="sticky top-4">
<div class="text-lg font-bold">Components</div>
<draggable
class="p-2 rounded-md"
:list="componentsList"
:group="{ name: 'questions', pull: 'clone', put: false, sort: false }"
:clone="cloneItem"
sort: false
#change="log"
item-key="id"
>
<template #item="{ element }">
<div
class="bg-gray-300 p-4 rounded-md mt-2 shadow-sm hover:shadow-md cursor-pointer border border-blue-800 border-dashed"
>
{{ element.name }}
</div>
</template>
</draggable>
</div>
</div>
<div class="col-span-8 flex p-3 flex-col bg-white shadow-md rounded-md">
<div class="text-lg font-bold pt-4">Survey</div>
<draggable
class="w-full h-full border border-blue-400 rounded-md p-2 flex flex-col flex-1"
:list="questionsList"
group="questions"
#change="log"
handle=".handle"
itemKey="name + index"
>
<template #item="{ element, index }">
<div>
<div v-if="element.name == 'Single Line of Text'" class="bg-gray-300 p-2 rounded-md mt-2 mb-2 shadow-lg hover:shadow-md">
<div class="w-full text-sm text-left">{{ element.name }} {{element.id}}</div>
<div class="flex justify-between items-center p-2 bg-gray-200 rounded-md mb-4">
<div class="w-10 font-bold hidden">Q{{ index + 1 }}</div>
<div class="w-full pr-4">
<input
type="text"
class="w-full p-2 bg-transparent flex-grow"
placeholder="Question title here..."
v-model="element.text"
/>
</div>
<div class="flex ">
<div class="cursor-pointer">
<i class="handle las la-arrows-alt la-2x mr-2"></i>
</div>
<div #click="remove(index)">
<i class="las la-trash-alt text-red-800 la-2x cursor-pointer"></i>
</div>
</div>
</div>
<div>
<input
type="text"
class="w-full p-2 rounded-md border border-gray-400"
placeholder="User response will go here"
/>
</div>
<div class="text-left flex justify-between items-center p-2 bg-gray-200 rounded-md mt-2">
<div class="flex items-center">
<div><input type="checkbox" class="mr-2" /></div>
<div>Required?</div>
</div>
</div>
</div>
<!-- START problem area -->
<div v-else-if="element.name == 'Multiple Choice'" class="bg-gray-300 p-2 rounded-md mt-2 mb-2 shadow-lg hover:shadow-md">
<div class="w-full text-sm text-left">{{ element.name }} {{element.id}}</div>
<div class="flex justify-between items-center p-2 bg-gray-200 rounded-md mb-4">
<div class="w-10 font-bold hidden">Q{{ index + 1 }}</div>
<div class="w-full pr-4">
<input
type="text"
class="w-full p-2 bg-transparent flex-grow"
placeholder="Question title here..."
v-model="element.text"
/>
</div>
<div class="flex ">
<div class="cursor-pointer">
<i class="handle las la-arrows-alt la-2x mr-2"></i>
</div>
<div #click="remove(index)">
<i class="las la-trash-alt text-red-800 la-2x cursor-pointer"></i>
</div>
</div>
</div>
<div class="flex items-center ">
<draggable
class="p-2 rounded-md w-full"
:list="multipleChoiceList"
:group="{ name: 'choice', pull: false, put: false, sort: true }"
sort: true
handle=".handle"
#change="log"
item-key="question"
>
<template #item="{ element }">
<div
class="bg-blue-100 p-4 flex items-center justify-start rounded-md mt-2 shadow-sm hover:shadow-md cursor-pointer w-full"
>
<div class="flex items-center flex-grow"
>
<input type="checkbox" class="w-6 h-6">
<input
type="text"
class="p-2 bg-transparent flex-grow"
placeholder="Add choice here"
v-model="element.text"
/>
</div>
<div class="flex ">
<div class="cursor-pointer">
<i class="handle las la-arrows-alt la-1x mr-2"></i>
</div>
<div #click="remove(index)">
<i class="las la-trash-alt text-red-800 la-1x cursor-pointer"></i>
</div>
</div>
</div>
</template>
<template #footer>
<div>
<button class="p-2 bg-blue-300 mt-2 rounded-md" #click="addChoice(element.id)">Add</button>
</div>
</template>
</draggable>
</div>
<div class="text-left flex justify-between items-center p-2 bg-gray-200 rounded-md mt-2">
<div class="flex items-center">
<div><input type="checkbox" class="mr-2" /></div>
<div>Required?</div>
</div>
</div>
</div>
<!-- END problem area -->
<div v-else-if="element.name == 'Open Ended'" class="bg-gray-300 p-2 rounded-md mt-2 mb-2 shadow-lg hover:shadow-md">
<div class="w-full text-sm text-left">{{ element.name }} {{element.id}}</div>
<div class="flex justify-between items-center p-2 bg-gray-200 rounded-md mb-4">
<div class="w-10 font-bold hidden">Q{{ index + 1 }}</div>
<div class="w-full pr-4">
<input
type="text"
class="w-full p-2 bg-transparent flex-grow"
placeholder="Question title here..."
v-model="element.text"
/>
</div>
<div class="flex ">
<div class="cursor-pointer">
<i class="handle las la-arrows-alt la-2x mr-2"></i>
</div>
<div #click="remove(index)">
<i class="las la-trash-alt text-red-800 la-2x cursor-pointer"></i>
</div>
</div>
</div>
<div>
<textarea
class="h-32 w-full w-full p-2 rounded-md border border-gray-400"
></textarea>
</div>
<div class="flex items-center">
<div>Max Length</div>
<div>
<input
type="number"
class="mr-2 w-20 border border-gray-400 p-2 rounded-md ml-2"
/>
</div>
</div>
<div class="text-left flex justify-between items-center p-2 bg-gray-200 rounded-md mt-2">
<div class="flex items-center">
<div><input type="checkbox" class="mr-2" /></div>
<div>Required?</div>
</div>
</div>
</div>
<div v-else-if="element.name == 'Divider'">
<div class="flex items-center">
<div class="flex-grow border-t border-black mx-4"> </div>
<div class="flex ">
<div class="cursor-pointer">
<i class="handle las la-arrows-alt la-2x mr-2"></i>
</div>
<div #click="remove(index)">
<i class="las la-trash-alt text-red-800 la-2x cursor-pointer"></i>
</div>
</div>
</div>
</div>
</div>
</template>
</draggable>
</div>
</div>
</div>
</template>
See Clone method which assigns a random number as the id
<script>
import draggable from "vuedraggable";
export default {
name: "Survey",
components: {
draggable,
},
data() {
return {
drag: false,
componentsList: [
{ name: "Single Line of Text", type: "question", text: "", id: 1 },
{ name: "Multiple Choice", type: "question", text: "", id: 2 },
{ name: "Matrix", type: "question", text: "", id: 3 },
{ name: "Open Ended", type: "question", text: "", id: 4 },
{ name: "Divider", type: "component", id: 9 },
],
questionsList: [],
multipleChoiceList: [
{text: "text A", type:"choice", question:"32"},
{text: "text B", type:"choice", question:"1"},
{text: "text A", type:"choice", question:"2"} ]
};
},
methods: {
onEnd: function(evt) {
console.log(evt);
},
log: function(evt) {
console.log(evt);
},
addChoice(id) {
this.multipleChoiceList.push({ text: "Choice " + id, type: "choice", question:id });
console.log(this.multipleChoiceList);
},
remove(index) {
this.questionsList.splice(index, 1);
},
cloneItem({ id, name, type }) {
return {
name: name,
id: Math.ceil(Math.random()*100),
text: "",
type: type,
};
}
},
mounted() {
// console.log("mounted");
},
};
</script>
https://github.com/SortableJS/Vue.Draggable/issues/687#issuecomment-1153083717
I just answered to a similar question on github.
Not sure would this help as Vue.Draggable and vue.draggable.next is slightly different.