Has anyone successfully incorporated ElementUI's transfer feature inside a card element and centered it?
https://jsfiddle.net/ca1wmjLx/
Any suggestions on how to achieve this?
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e0e9e0e8e0ebf1a8f0ecc5b4abb6abb2">[email protected]</a>/lib/index.js"></script>
<div id="app">
<template>
<el-card style="text-align: center;">
<el-transfer v-model="value3" :left-default-checked="[2, 3]" :right-default-checked="[1]" :titles="['Source', 'Target']" :button-texts="['to left', 'to right']" :footer-format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}" @change="handleChange" :data="data">
<el-button class="transfer-footer" slot="left-footer" size="small">OP</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">OP</el-button>
</el-transfer>
</el-card>
</template>
</div>
JS
var Main = {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value3: [1]
};
},
methods: {
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
CSS
@import url("//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5e575e565e554f164e527b0a1508150c">[email protected]</a>/lib/theme-default/index.css");
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
.el-transfer-panel {
width: 30%;
}
.el-transfer-panel__body {
height: 500px;
}
.el-transfer-panel__list.is-filterable {
height: 468px;
}
====TO SOLVE==== ===It looks like your post is mostly code; please add some more details.=== Has anyone found a solution to integrating the transfer component within a card section using ElementUI?