@aleksandra_budnik, I don’t see this problem with raw js, styles are working as expected.
I used demo application from your vue wrapper repository and found that problem behavior could reproduce this app. Unfortunately, your code is not working out-of-box (container names are differ in js and vue files, vue instance have no link to component template), I fixed it a little, also it contains problematic styles (handsontable).
Also I think it can be depends on this problem: https://github.com/handsontable/vue-handsontable-official/pull/32, because I also edited HotTable.vue file.
Version info:
“handsontable”: “^0.35.1”,
“vue”: “^2.5.16”,
“vue-handsontable-official”: “^1.1.0”,
I hope this information help us to solve this problem.
index.js:
/* eslint-disable */
import Vue from 'vue';
import SampleApp from './sampleApp.vue';
Vue.component('sampleapp', SampleApp);
new Vue({
el: '#app',
template: '<sampleapp/>'
});
sampleApp.Vue:
<template>
<div id="app" class="wrapper">
<div id="hot-options">
<label v-on:click="toggleOption" for="fixed-rows"><input id="fixed-rows" type="checkbox"/>Add fixed
rows</label><br/>
<label v-on:click="toggleOption" for="fixed-columns"><input id="fixed-columns" type="checkbox"/>Add fixed columns</label><br/>
<label v-on:click="toggleOption" for="row-headers"><input id="row-headers" type="checkbox"/>Enable row
headers</label><br/>
<label v-on:click="toggleOption" for="column-sorting"><input id="column-sorting"
type="checkbox"/>Enable sorting</label><br/>
<label v-on:click="toggleOption" for="column-resize"><input id="column-resize" type="checkbox"/>Enable column resizing</label><br/>
</div>
<div id="hot-preview">
<HotTable :root="root" :settings="hotSettings"></HotTable>
</div>
</div>
</template>
<script>
/* eslint-disable */
import HotTable from 'vue-handsontable-official';
import Vue from 'vue';
export default {
data: function() {
return {
root: 'test-hot',
hotSettings: {
data: function(rows, columns) {
const result = [];
for (let i = 0; i < rows; i++) {
let row = [];
for (let j = 0; j < columns; j++) {
row.push('[' + i + ', ' + j + ']');
}
result.push(row);
}
return result;
}(40, 40),
colHeaders: true
}
};
},
methods: {
toggle: function(input, property, onValue, offValue) {
if (onValue === void 0) {
onValue = true;
}
if (offValue === void 0) {
offValue = false;
}
if (input.checked) {
Vue.set(this.hotSettings, property, onValue);
} else {
Vue.set(this.hotSettings, property, offValue);
}
},
toggleOption: function(event) {
if (event.target.tagName.toLowerCase() !== 'input') {
return false;
}
switch (event.target.id) {
case 'fixed-rows':
this.toggle(event.target, 'fixedRowsTop', 3, 0);
break;
case 'fixed-columns':
this.toggle(event.target, 'fixedColumnsLeft', 3, 0);
break;
case 'row-headers':
this.toggle(event.target, 'rowHeaders');
break;
case 'column-sorting':
this.toggle(event.target, 'columnSorting');
break;
case 'column-resize':
this.toggle(event.target, 'manualColumnResize');
break;
}
}
},
name: 'SampleApp',
components: {
HotTable
}
}
</script>
<style>
.handsontable th {
background-color: #F00;
}
.ht_master tr:nth-of-type(odd) > td {
background-color: #f00;
}
#example-container {
position: relative;
}
#hot-options {
width: 200px;
position: absolute;
top: 0;
left: 0;
padding: 15px;
font-size: 14px;
}
#hot-preview {
margin-left: 220px;
}
#test-hot {
width: 600px;
height: 400px;
overflow: hidden;
}
</style>
