Can't set focus to textbook with javascript - javascript

This one has been driving me nuts and I have no clue what the problem is.
I have a quiz that has different kinds of question types (multiple choice, type in the answer, etc) and for each question, I set the innerHTML using a function and then populate it accordingly.
If it's a textbox question, I'd like to automatically set the focus to it. I've tried using javascript, jQuery, and the console window from within Chrome. I've set the tab index to -1. I've looked on this website, but none of the solutions seem to work.
Here's the code:
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>

function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>

Related

how to create milky overlay in vue js

I'm working with Vue 3 and Bootstrap 5.
I have a button and two inputs. When I click the button I want to have a "milky" overlay like following:
How can I achieve this?
Code to work with:
<template>
<div class="row">
<button class="btn btn-dark" #click="overlayMilky()">Button</button>
</div>
<div class="row mt-2">
<div class="col-12">
<span>Input 2</span>
<input class="form-control" />
</div>
<div class="col-12">
<span>Input 3</span>
<input class="form-control" />
</div>
</div>
</template>
<script>
export default {
methods: {
overlayMilky() {
//set overlay to milky
}
}
}
</script>
First, you need to surround the inputs with a container element and give this element position: relative and add to it a child which will be the overlay, this should have position: absolute to be absolute to the container element, also should have width: 100%; height: 100%; top: 0px; left: 0px; to take the full size of the container element and then conditionally with v-if you can show/hide it with a state
<div v-if="showOverlay" class="overlay"></div>
methods: {
overlayMilky() {
this.showOverlay = !this.showOverlay;
//set overlay to milky
},
},
This is a full example of code.
<template>
<div>
<div class="row">
<button class="btn btn-dark" #click="overlayMilky()">Button</button>
</div>
<div class="container">
<div v-if="showOverlay" class="overlay"></div>
<div class="row mt-2">
<div class="col-12">
<span>Input 2</span>
<input class="form-control" />
</div>
<div class="col-12">
<span>Input 3</span>
<input class="form-control" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showOverlay: false,
};
},
methods: {
overlayMilky() {
this.showOverlay = !this.showOverlay;
//set overlay to milky
},
},
};
</script>
<style>
.container {
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(255, 255, 255, 0.4);
}
</style>
You need to add a data field that will describe the "milky" overlay state.
So all you need to do in the overlayMilky method is to set this.milkyOverlay = true.
Then use this milkyOverlay property to add the milky css class or show milky div on top.

Rearrange Bootstrap page into three columns and items under each other

I have a small tool for scrum teams to track people in the meeting. Now we are more people, one team is added and right now it seems more logical to re-arrange the elements.
Now if you click on team1/team2/team3 button, the names are sorted in 3 columns and next to each other. I want to change this, to 3 columns, but every team will have it's own column. So, team1 names will fill up the first column and the names in this team will come under each other. After that if I click on team2, the names of team2 will fill up the second column and the team3 will fill up the third column. I assume on every team button click the script should create one column and fill up this column, on the second team button click it will again create one column next to the first also on the third time. Is this possible? Thank you very much.
This is the one page working version, all names are randomly generated, completely anonym:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Team Members</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
}
.alert.member-clicked {
text-decoration-line: line-through;
background-color: #ddd;
border-color: #ddd;
}
.alert.member-absent {
text-decoration-line: line-through;
background-color: #f8d7da;
border-color: #f8d7da;
}
.copyright {
margin-top: 10px;
margin-right: 10px;
text-align: right;
}
.form-inline.form-members .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline.form-members .input-group .input-group-btn {
width: auto;
}
h2 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<div class="container">
<h2 class="text text-success text-center">My Team Members</h2>
<div id="memberlist" class="row"></div>
</div>
<footer class="footer">
<div class="container">
<!-- Input for members -->
<div class="form-inline form-members">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add member" id="text" value="Alasdair Mckee">
<div class="input-group-btn">
<button class="btn btn-success btn-addmember"><i class="glyphicon glyphicon-plus"></i></button>
</div>
</div>
<button class="btn btn-success" data-team="team1"><i class="glyphicon glyphicon-plus"></i> Team1</button>
<button class="btn btn-success" data-team="team2"><i class="glyphicon glyphicon-plus"></i> Team2</button>
<button class="btn btn-success" data-team="team3"><i class="glyphicon glyphicon-plus"></i> Team3</button>
</div>
<div class="form-group hidden">
<label for="exampleFormControlTextarea1">Team1</label>
<textarea class="form-control" id="team1" rows="9">
Bentley Parrish
Hunter Pineda
Ammar Burks
Tanya Vang
Aimie Ewing
Anabella Chan
Amayah Sparks
Priyanka Cooke
Boyd Pacheco
Mai Lynch
</textarea>
<label for="exampleFormControlTextarea1">Team2</label>
<textarea class="form-control" id="team2" rows="9">
Alan Rangel
Ikra Knowles
Chelsea Avalos
Aysha Glenn
Margaret Couch
Effie Corbett
Yassin Arias
Caspian Rice
</textarea>
<label for="exampleFormControlTextarea1">Team3</label>
<textarea class="form-control" id="team3" rows="9">
Armani Curran
Monica Kemp
Nur Davis
Hashir Dodson
Ty Hagan
Aariz Rowley
</textarea>
</div>
</div>
<p class="copyright">Created by: Me • me#me.com • ver 1.5</p>
</footer>
</center>
<script>
$(document).ready(function() {
var memberList = $("#memberlist");
memberList.on("click", ".alert", function () {
$(this).toggleClass("member-clicked");
});
memberList.on("click", ".close", function () {
var memberColumn = $(this).parent().parent();
memberColumn.fadeOut();
});
$(".btn-addmember").click(function () {
var newMember = $("#text").val().trim();
if (newMember) {
addMember(newMember);
} else {
alert("Please, enter the name of the member");
}
$("#text").val("");
});
$(".btn[data-team]").click(function () {
addTeam($(this).data("team"));
});
function addMember(member) {
member = member.trim();
if (member) {
memberList.append(
`<div class="col-xs-6 col-sm-4"><div class="alert alert-success">` +
`<span class="close" aria-label="close">×</span><b>` +
member +
`</b></div></div>`
);
}
}
function addTeam(id) {
var team = $("#" + id)
.val()
.trim();
if (team) {
var members = team.split("\n");
console.log(members);
for (var i = 0; i < members.length; i++) {
addMember(members[i]);
}
}
}
$(document).on('dblclick', '.alert', function() {
$(this).toggleClass("member-absent");
});
});
</script>
</body>
</html>
I think you need to use 3 member lists instead of one.
var memberList1 = $("#listteam1");
var memberList2 = $("#listteam2");
var memberList3 = $("#listteam3");
that means the layout will change:
<div class="row">
<div class="col-xs-6 col-sm-4">
<h3>Team 1</h3>
<div class="column" id="listteam1">
</div>
</div>
<div class="col-xs-6 col-sm-4">
<h3>Team 2</h3>
<div class="column" id="listteam2">
</div>
</div>
<div class="col-xs-6 col-sm-4">
<h3>Team 3</h3>
<div class="column" id="listteam3">
</div>
</div>
</div>
also, addMember needs to take the list name as an argument
function addMember(member, list) {
member = member.trim();
if (member) {
$("#list" + list).append(
`<div class="alert alert-success">` +
`<span class="close" aria-label="close">×</span><b>` +
member +
`</b></div>`
);
}
}
please find the whole script here: https://pastebin.com/VQEVKCaF

How do I save multiple instances of the same JS code on firebase?

Sorry I don't code much and have adapted this code, so help would be greatly appreciated.
I'm trying to emulate a shopping page where you can 'like' a product and shows number of 'likes' for each product.
What is happening:
When I click on different instances of the 'like' button they get saved as one instance on firebase and all the 'like' counters show the same number of 'likes'
What I want:
Every time I click a different instance of the 'like' button I want it saved as a different instance on firebase so the counts are different for each 'like' button.
var dCounters = document.querySelectorAll('.CountLike');
[].forEach.call(dCounters, function(dCounter) {
var el = dCounter.querySelector('button');
var cId = dCounter.id;
var dDatabase = firebase.database().ref('Like Number Counter').child(cId);
// get firebase data
dDatabase.on('value', function(snap) {
var data = snap.val() || 0;
dCounter.querySelector('span').innerHTML = data;
});
// set firebase data
el.addEventListener('click', function() {
dDatabase.transaction(function(dCount) {
return (dCount || 0) + 1;
});
});
});
.CountLike div {
display: inline-flex;
}
.item-like {
font-size: 18px;
display: inline-block;
margin-top: 10px;
}
.counterStat {
margin-right: 15px;
margin-top: 5px;
}
.heart {
width: 32px;
height: 32px;
}
.btn {
background: none;
border: none;
cursor: pointer;
}
<div>
<div class="store-action">
<div class="CountLike" id="Like Count">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>
<div>
<div class="store-action">
<div class="CountLike" id="Like Count">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>
Below snippet should do it for now. Both of your elements have the same id value set which is set as id="Like Count"
So right now you just end up writing and reading from the same field for every cell you have.
As it is also stated on this link you should always make sure the id values you assign are unique.
<div>
<div class="store-action">
<div class="CountLike" id="xyz">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>
<div>
<div class="store-action">
<div class="CountLike" id="xyzt">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>

For filtering using data-attributes, In JS how do I match 2 arrays that have the same words but in a different order?

I am trying to create a filter system that uses data-attributes, I can get it to work if the items selected match the order of the elements data-attributes eg: items selected {fun, easy, cheap} and the elements attributes are in the same order but if I click {easy, cheap, fun} then I don't have any results returned.
Any help on solving this would be greatly appreciated.
var filterBtns = document.querySelectorAll('.request-btn'),
slider = document.querySelector('.slider'),
cardContainers = $('.cards-container'),
selectedFilters = [];
filterBtns.forEach(function(el) {
el.addEventListener('click', function() {
this.classList.toggle('clicked');
if (this.classList.contains('clicked')) {
selectedFilters.push(this.dataset.filter);
} else {
selectedFilters.splice(selectedFilters.indexOf(this.dataset.filter), 1);
}
updateCards();
});
});
slider.addEventListener('change', function() {
if (this.value === '0') {
selectedFilters.push('easy');
} else if (this.value === '1') {
selectedFilters.splice(selectedFilters.indexOf('easy', 'diy'), 1);
} else {
selectedFilters.push('diy');
}
updateCards();
});
var updateCards = function() {
cardContainers.removeClass('show').filter(function() {
var data = this.dataset;
var selectedFiltersValues = selectedFilters.join(' ');
return selectedFilters.length ? data.filter.includes(selectedFiltersValues) : true;
}).addClass('show');
}
.card {
width: 200px;
border: 1px solid coral;
margin: 15px;
padding: 15px;
float: left;
}
.cards-container {
display: none;
}
.show {
display: block;
}
.request-btn.clicked {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="filter-container">
<div class="left-filter">
<p>EASY<input type="range" class="slider provider-complexity" min="0" max="2" value="1" step="1">DIY</p>
</div>
<div class="right-filter">
<button class="request-btn" data-filter="cheap">Cheap</button>
<button class="request-btn" data-filter="fun">fun</button>
<button class="request-btn" data-filter="green">green</button>
<button class="request-btn" data-filter="big">big</button>
</div>
</div>
<div class="cards-container show" data-filter="green">
<div class="card">1 the tag is - green</div>
</div>
<div class="cards-container show" data-filter="fun">
<div class="card">2 the tag is - fun</div>
</div>
<div class="cards-container show" data-filter="cheap">
<div class="card">3 the tag is - cheap</div>
</div>
<div class="cards-container show" data-filter="big">
<div class="card">4 the tag is - big</div>
</div>
<div class="cards-container show" data-filter="cheap big">
<div class="card">5 the tags are - cheap big</div>
</div>
<div class="cards-container show" data-filter="fun easy cheap">
<div class="card">6 the tags are - fun easy cheap</div>
</div>
<div class="cards-container show" data-filter="diy">
<div class="card">7 the tag is - diy</div>
</div>
<div class="cards-container show" data-filter="easy">
<div class="card">8 hthe tag is - easy</div>
</div>
<div class="cards-container show" data-filter="easy green">
<div class="card">9 the tags are - easy green</div>
</div>
Update based on comment
Based on the comment, the requirement is that each item must contain all of the filters. If "cheap" and "big" are selected, only items that have "cheap" and "big" can be returned.
The change:
// Get the individual item filters as an array
var itemData = data.filter.split(' ')
return selectedFilters.length
// match on every
? selectedFilters.every(function (val) {
return itemData.indexOf(val) > -1;
})
: true;
var filterBtns = document.querySelectorAll('.request-btn'),
slider = document.querySelector('.slider'),
cardContainers = $('.cards-container'),
selectedFilters = [];
filterBtns.forEach(function(el) {
el.addEventListener('click', function() {
this.classList.toggle('clicked');
if (this.classList.contains('clicked')) {
selectedFilters.push(this.dataset.filter);
} else {
selectedFilters.splice(selectedFilters.indexOf(this.dataset.filter), 1);
}
updateCards();
});
});
slider.addEventListener('change', function() {
if (this.value === '0') {
selectedFilters.push('easy');
} else if (this.value === '1') {
selectedFilters.splice(selectedFilters.indexOf('easy', 'diy'), 1);
} else {
selectedFilters.push('diy');
}
updateCards();
});
var updateCards = function() {
cardContainers.removeClass('show').filter(function() {
var itemData = data.filter.split(' ')
return selectedFilters.length
? selectedFilters.every(function (val) {
return itemData.indexOf(val) > -1;
})
: true;
}).addClass('show');
}
.card {
width: 200px;
border: 1px solid coral;
margin: 15px;
padding: 15px;
float: left;
}
.cards-container {
display: none;
}
.show {
display: block;
}
.request-btn.clicked {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="filter-container">
<div class="left-filter">
<p>EASY<input type="range" class="slider provider-complexity" min="0" max="2" value="1" step="1">DIY</p>
</div>
<div class="right-filter">
<button class="request-btn" data-filter="cheap">Cheap</button>
<button class="request-btn" data-filter="fun">fun</button>
<button class="request-btn" data-filter="green">green</button>
<button class="request-btn" data-filter="big">big</button>
</div>
</div>
<div class="cards-container show" data-filter="green">
<div class="card">1 the tag is - green</div>
</div>
<div class="cards-container show" data-filter="fun">
<div class="card">2 the tag is - fun</div>
</div>
<div class="cards-container show" data-filter="cheap">
<div class="card">3 the tag is - cheap</div>
</div>
<div class="cards-container show" data-filter="big">
<div class="card">4 the tag is - big</div>
</div>
<div class="cards-container show" data-filter="cheap big">
<div class="card">5 the tags are - cheap big</div>
</div>
<div class="cards-container show" data-filter="fun easy cheap">
<div class="card">6 the tags are - fun easy cheap</div>
</div>
<div class="cards-container show" data-filter="diy">
<div class="card">7 the tag is - diy</div>
</div>
<div class="cards-container show" data-filter="easy">
<div class="card">8 hthe tag is - easy</div>
</div>
<div class="cards-container show" data-filter="easy green">
<div class="card">9 the tags are - easy green</div>
</div>
Original
You problem is that you've joined your selected filters, in your updateCards function you're then checking if the items data-filter includes cheap fun green.
The solution is to check if the array of selectedFilters includes the elements attribute(s).
The change
const itemData = data.filter.split(' ')
return selectedFilters.length
? selectedFilters.every(function (val) {
return itemData.indexOf(val) > -1;
})
: true;
I've updated your example below.
A note on the usage of .some It works across all major browsers, if you need to support i.e 6-8 for some hellish reason, you will need a polyfill. CanIUse
var filterBtns = document.querySelectorAll('.request-btn'),
slider = document.querySelector('.slider'),
cardContainers = $('.cards-container'),
selectedFilters = [];
filterBtns.forEach(function(el) {
el.addEventListener('click', function() {
this.classList.toggle('clicked');
if (this.classList.contains('clicked')) {
selectedFilters.push(this.dataset.filter);
} else {
selectedFilters.splice(selectedFilters.indexOf(this.dataset.filter), 1);
}
updateCards();
});
});
slider.addEventListener('change', function() {
if (this.value === '0') {
selectedFilters.push('easy');
} else if (this.value === '1') {
selectedFilters.splice(selectedFilters.indexOf('easy', 'diy'), 1);
} else {
selectedFilters.push('diy');
}
updateCards();
});
var updateCards = function() {
cardContainers.removeClass('show').filter(function() {
var data = this.dataset;
return selectedFilters.length
? selectedFilters.some(function (val) {
return data.filter.includes(val);
})
: true;
}).addClass('show');
}
.card {
width: 200px;
border: 1px solid coral;
margin: 15px;
padding: 15px;
float: left;
}
.cards-container {
display: none;
}
.show {
display: block;
}
.request-btn.clicked {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="filter-container">
<div class="left-filter">
<p>EASY<input type="range" class="slider provider-complexity" min="0" max="2" value="1" step="1">DIY</p>
</div>
<div class="right-filter">
<button class="request-btn" data-filter="cheap">Cheap</button>
<button class="request-btn" data-filter="fun">fun</button>
<button class="request-btn" data-filter="green">green</button>
<button class="request-btn" data-filter="big">big</button>
</div>
</div>
<div class="cards-container show" data-filter="green">
<div class="card">1 the tag is - green</div>
</div>
<div class="cards-container show" data-filter="fun">
<div class="card">2 the tag is - fun</div>
</div>
<div class="cards-container show" data-filter="cheap">
<div class="card">3 the tag is - cheap</div>
</div>
<div class="cards-container show" data-filter="big">
<div class="card">4 the tag is - big</div>
</div>
<div class="cards-container show" data-filter="cheap big">
<div class="card">5 the tags are - cheap big</div>
</div>
<div class="cards-container show" data-filter="fun easy cheap">
<div class="card">6 the tags are - fun easy cheap</div>
</div>
<div class="cards-container show" data-filter="diy">
<div class="card">7 the tag is - diy</div>
</div>
<div class="cards-container show" data-filter="easy">
<div class="card">8 hthe tag is - easy</div>
</div>
<div class="cards-container show" data-filter="easy green">
<div class="card">9 the tags are - easy green</div>
</div>
function isArrayEqual(a, b) {
var arrA = a.join() // Array as String
var arrB = b.join() // Array as String
// Compare length of two string
if (arrA.length != arrB.length) {
return false
}
var totalA = 0
var totalB = 0
for (var i = 0; i < arrA.length; i++) {
totalA += arrA.charCodeAt(i)
totalB += arrB.charCodeAt(i)
}
// Array is same, if both total equal
if (totalA == totalB) {
return true
}
}
I found a solution that looks at the values of each array and then only shows cards that have that combination of values in it's data-attribute.
The problen with the original question, it only showed cards that had values in the same order, the first soultion showed any card that matched a value, not combination of values.
var checker = function(arr, target) {
return target.every(function(v){
return arr.includes(v);
});
}
return checker(dataArray, selectedFilters);

VueJS Bulma Sweet modal always toggles to the top of the page inside For loop

I am using Vue JS and Bulma Frameworks. To show the modal I am using .
I have list of items(10) which is displayed in a For Loop. In every item I have a button which opens the sweet modal. No matter which button I click, the modal is displayed at the top of the page always. Can anyone help me how to show the modal near to the clicked button?
Template index.html
<div class="content column is-full-mobile no-devices-found-wraper">
<div class="columns is-mobile">
<div class="column is-full-mobile ">
<div class="columns is-mobile is-marginless">
<div class="column is-half-mobile padding-bottom-
zero padding-top-3">mobile devices:</div>
<div class="column padding-bottom-zero padding-top-3">
<a #click.stop.prevent="openDeviceModal()"
class="add_icon is-pulled-right add-location-btn level-
item">
<i class="fa fa-plus"></i>ADD ITEMS
</a>
</div>
</div>
</div>
</div>
</div>
sweet-modal outside for loop
<sweet-modal class="Add mobile device" ref="deviceAddLocation"
von:close="closeModal">
<form #submit.prevent="saveDeviceToLocation">
<div class="field add-devices-height-with-error">
<label class="label" >mobile device Name</label>
</div>
</form>
</sweet-modal>
//index.vue-- openDeviceModal()//
openDeviceModal() {
this.isModalOpen = true;
this.$refs.deviceAddLocation.blocking = true;
this.$refs.deviceAddLocation.open();
}
//CSS//
.isModalOpen {
height: 100vh;
overflow: hidden;
}
.sweet-modal {
overflow: inherit;
}
.sweet-modal-overlay {
background: transparent !important;
height: 100% !important;
}
.sweet-modal .sweet-content {
padding-top: 10px;
}
.sweet-modal.is-visible {
transform: translate(-62%, -50%) !important
}
sweet-modal .sweet-box-actions {
top: 15px !important;
}

Categories