We Keep Coding

Measuring overflow is incorrect in Vue

I'm trying to make a overflow with tagging, which fades out in the beginning to give the user a hint that there's more. This is what it looks like:
I put the fading gradient as a :after inside the CSS and "activate" it by Vue's style binding, when scrollWidth > offsetWidth (overflow bigger than the box itself).
But the problem is that it sometimes (lags?) behind and does not calculate the scrollWidth right, especially when I enter a long word and then delete it. It doesn't "like" that and it says that the overflow is false, but there's no tag in the box. Basically this happens:
I tried to put the calculation inside this $nextTick(), but it didn't solve the issue. I also tried using Vue's keyDown, keyUp and keyPress listeners, but nothing solved this also.
This (also on CodePen) demonstrates the issue:
new Vue({
el: '#tagsinput',
data: {
input_value: "",
tags: []
},
methods: {
addTag: function() {
if (this.input_value > "") {
this.tags.push(this.input_value)
this.input_value = "";
// Refocus the text input, so it stays at the end
this.$refs.input.blur();
this.$nextTick(function() {
this.$refs.input.focus();
})
}
},
deleteTag: function() {
if (this.input_value == "") {
this.tags.pop()
}
}
}
})
.outter {
border: 1px solid red;
width: 250px;
overflow: hidden;
display: flex;
}
.inner {
border: 1px solid blue;
margin: 2px;
display: flex;
}
.tag {
border: 1px solid black;
margin: 2px;
}
input {
min-width: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.min.js"></script>
<div id="tagsinput">
<div class="outter" ref="outter">
<div class="inner" ref="inner">
<div class="tag" v-for="tag in tags">{{tag}}</div><input type="text" v-model="input_value" #keydown.enter="addTag" #keydown.delete="deleteTag">
</div>
</div>
Outter div scrollwidth: {{ $refs.outter ? $refs.outter.scrollWidth : null }}<br> Outter div offsetWidth: {{ $refs.outter ? $refs.outter.offsetWidth : null }}<br>
<br> Is overflowing: {{ ($refs.outter ? $refs.outter.scrollWidth : null) > ($refs.outter ?$refs.outter.offsetWidth : null) }}
</div>
<br><br> Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.
Any help is greatly appreciated.

You should call the check for overflow after the moment you've added or deleted the tag, so you check the overflow at the right moment. Vue isn't databinding an inline condition like that. The following code should work for you. It calls a checkOverflow function within $nextTick, setting a data-binded variable isOverflowed that you then can use to bind some styles.
new Vue({
el: '#tagsinput',
data: {
input_value: null,
tags: [],
isOverflowed: false
},
methods: {
addTag: function() {
if(this.input_value) {
this.tags.push(this.input_value)
this.input_value = null;
// Refocus the text input, so it stays at the end
this.$refs.input.blur();
this.$nextTick(function() {
this.$refs.input.focus();
this.checkOverflow()
})
}
},
deleteTag: function() {
if(!this.input_value) {
this.tags.pop()
this.$nextTick(function() {
this.checkOverflow()
})
}
},
checkOverflow: function() {
this.isOverflowed = (this.$refs.outter ? this.$refs.outter.scrollWidth : null) >
(this.$refs.outter ? this.$refs.outter.offsetWidth : null)
}
}
})
.outter {
border: 1px solid red;
width: 250px;
overflow: hidden;
display: flex;
}
.inner {
border: 1px solid blue;
margin: 2px;
display: flex;
}
.tag {
border: 1px solid black;
margin: 2px;
}
input {
min-width: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tagsinput">
<div class="outter" ref="outter">
<div class="inner" ref="inner">
<div class="tag" v-for="tag in tags">{{tag}}</div>
<input type="text" v-model="input_value" #keydown.enter="addTag" #keydown.delete="deleteTag" ref="input">
</div>
</div>
<br>
Is overflowing:
{{ isOverflowed }}
</div>
<br><br>
Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.

More of a CSS/HTML hack ...
Add <div id="spaceFade"></div> after <div id="tagsinput">, then add the following CSS :
#spaceFade {
background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,0,0,0));
position : absolute;
height : 2em;
width : 3em;
}
#tagsinput {
position : relative;
}
.outter {
justify-content: flex-end;
}

Why is this code using .parentNode not working?

Here is the method I’m trying to make. Basically what it’s supposed to do is, when an <input> with the type of button is clicked, it makes the next <div> (in this case hard-coded) go from display: none to display: block. However it’s not working.
matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}
return input
})
}

When you use if (node.getAttribute('class') === 'first-employee') this is return:
class='first-employee' // true
class='employee first-employee' // false
You must use:
if (node.classList.contains("first-employee")):
class='first-employee' // true
class='employee first-employee' // true

If I have understand your question properly that on button click you want to show/hide DIV tag next to it, which is inside common parent div for both, button and 'second-employee'.
I think below will be helpful.
// For single Div show/hide on button click
let btnMatchDiv = document.querySelector('#btnMatchDivs');
btnMatchDiv.addEventListener('click', matchDivs, true);
function matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
// Method 1
// ===========================
/*if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}*/
// Method 2 : you can use new classList method
// ===========================
if (input.parentNode.classList.contains('first-employee')) {
input.nextElementSibling.classList.toggle('hidden');
}
//return input
})
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
}
.second-employee {
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee
</h2>
<input type="button" id="btnMatchDivs" value="Toggle Second Employee" />
<div class="second-employee hidden">
Second Employee
</div>
</div>
Please let me know if you need further help on this.
Thanks,
Jignesh Raval

Also if you want to toggle multiple items then you can try below code.
// For multiple Div show/hide on button click
// ===================================
let showInputs = document.querySelectorAll('input')
const btnInputs = Array.from(showInputs)
// Bind click event to each button input
btnInputs.map(input => {
input.addEventListener('click', matchDivs, false);
})
function matchDivs(event) {
let buttonEle = event.currentTarget;
if (buttonEle.parentNode.classList.contains('first-employee')) {
buttonEle.nextElementSibling.classList.toggle('hidden');
}
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
margin-bottom: 1em;
}
.second-employee {
margin: 1em 0;
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee 1
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 1
</div>
</div>
<div class="first-employee">
<h2>
First Employee 2
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 2
</div>
</div>
<div class="first-employee">
<h2>
First Employee 3
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 3
</div>
</div>
I hope this will be helpful.
Thanks,
Jignesh Raval

select box change css class

Unfortunately I can not work it out with x-editable...
I´m trying to change a (hprimary) css class on select with x-editable. Here is my jsfiddel: jsfiddel (only with x-editable). Also, i tried It with a normal select button and it is working there. ( jsfiddel2 ) So what do I have to change in x-editable script to make it work?
html:
<div class="hpanel hprimary" id="overview">
</div>
<div><label class="control-label">TEST</label>
<a href="#" id="select" data-type="select" data-pk="1"data-value=""
data-title="" class="editable editable-click" style="color: gray;">not selected</a>
</div>
javascript:
$(function () {
$.fn.editable.defaults.mode = 'popup';
$('#select').editable({
prepend: "not selected",
placement: 'right',
source: [{
value: 1,
text: 'NTP(red)'
}, {
value: 2,
text: 'SUCCESS(green)'
}, {
value: 3,
text: 'OPTION(blue)'
}],
});
});
css:
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px
}
.hpanel.hprimary .panel-body {
border-top: 2px solid #34495e
}
.hpanel.hgreen .panel-body {
border-top: 2px solid #62cb31
}
.hpanel.hblue .panel-body {
border-top: 2px solid #3498db
}
.hpanel.hred .panel-body {
border-top: 2px solid #e74c3c
}

You can use the validate() callback option as described here to be alerted when the user has selected a value.
Based on your example, you would then use a regular expression to extract the color from the text value and add the appropriate class to the hpanel element.

Show hidden textbox with Polymer after button press

I have the following code
<dom-module id="practice-list">
<template>
<paper-drawer-panel>
<paper-header-panel main mode="waterfall-tall">
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
<input type="text" id="searchText" show$="{{show}}" />
<div class="middle paper-font-display2 app-name ident">Practice List</div>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "practice-list",
show: {
type: Boolean,
value: false
},
ready: function () {
},
srchandler: function () {
this.show = !this.show;
alert('Is it showing?');
}
});
</script>
</dom-module>
Which in turn uses the following css
#searchText
{
width:0px;
border: none;
line-height:30px;
border-radius:5px;
background:#3F59B5;
color:#fff;
outline: 0;
visibility: hidden;
}
#searchText[show] input {
padding: 10px;
visibility: visible;
width:200px;
}
Now I was trying to use the technique described here, but to no avail.
polymer search input text from icon
Even though I know the handler for the on-tap of the paper-icon-button is working and called the textbox does not appear.

Why not use the HTML5 attribute hidden? (see here for more info)
Your input would change to:
<input type="text" id="searchText" hidden$="{{hidden}}" />
Then in your CSS you can remove the visibility rules and the show attribute:
#searchText {
border: none;
line-height: 30px;
border-radius: 5px;
background: #3F59B5;
color: #fff;
outline: 0;
}
#searchText input {
padding: 10px;
width: 200px;
}
And change the property show to be hidden to make the things a bit more logical:
hidden: {
type: Boolean,
value: true
},
Here is a very simple plunker of this in action.

Can't seem to get ngAnimate to work on an ng-repeat

I have the following snippet of HTML:
<div ng-app ng-controller="mainCtrl">
<div ng-repeat="item in items" ng-mouseenter="item.showRemove = true" ng-mouseleave="item.showRemove = false" class="repeated-item">
<span class="remove-item glyphicon glyphicon-remove" ng-show="item.showRemove" ng-click="removeItem(item)"></span>
<div class="h3">{{item.title}}</div>
<p>{{item.description}}</p>
</div>
</div>
The following CSS is applied to the markup:
body { padding: 15px; }
.repeated-item {
padding: 10px;
margin-bottom: 15px;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
border-radius: 10px;
background-color: #eee;
position: relative;
}
.repeated-item:hover { background-color: #ddd; }
.remove-item {
float: right;
cursor: pointer;
color: #b00;
font-size: x-large;
}
.h3 {
border-bottom: dotted 1px #bbb;
}
.repeated-item.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
}
.repeated-item.ng-leave.ng-leave-active {
opacity:0;
}
Lastly, I have the following javascript:
function mainCtrl($scope) {
$scope.items = [
{
title: 'Star Trek: The Original Series',
description: 'brevity brevity...'
},
{
title: 'Star Trek: The Next Generation',
description: "brevity brevity..."
},
{
title: 'Star Trek: Deep Space Nine',
description: "brevity brevity..."
},
{
title: 'Star Trek: Voyager',
description: "brevity brevity..."
},
{
title: 'Star Trek: Enterprise',
description: "brevity brevity..."
}
];
$scope.removeItem = function (itemToRemove) {
var index = $scope.items.indexOf(itemToRemove);
if (index !== -1) {
$scope.items.splice(index, 1);
}
};
}
I'm creating this little demo simply to learn how to use ngAnimate. However, the documentation on the web seems a little lacking and I can't seem to figure out what I'm doing wrong. I'm using this page to apply a fade-out animation to the items in the ng-repeat. Nothing I do seems to work. I've given the repeated item it's own class and I've applied the animation rules (yes I did include the ngAnimate file). Everything works except the animation.
What am I doing wrong?
Working demo on Codepen.io

Change <div ng-app ng-controller="mainCtrl"> to <div ng-app="ngAnimate" ng-controller="mainCtrl">
Note the ngAnimate.