Hi,
You should append the drop-down button to the element, you should also append the drop-down to the body and set additional styles.
Here is the whole App.vue file for you:
<template>
<div class=”vue-root”>
<smart-editor id=”editor”></smart-editor>
<smart-drop-down-button drop-down-width=”auto” ref=”dropDownButtonRef”>
<smart-tree ref=”treeRef” @change=”onTreeChange”>
<smart-tree-item selected>Home</smart-tree-item>
<smart-tree-items-group>
Solutions
<smart-tree-item>Education</smart-tree-item>
<smart-tree-item>Financial services</smart-tree-item>
<smart-tree-item>Government</smart-tree-item>
<smart-tree-item>Manufacturing</smart-tree-item>
<smart-tree-item>All industries and solutions</smart-tree-item>
</smart-tree-items-group>
<smart-tree-items-group expanded>
Products
<smart-tree-item>PC products</smart-tree-item>
<smart-tree-item>Mobile products</smart-tree-item>
<smart-tree-item>All products</smart-tree-item>
</smart-tree-items-group>
</smart-tree>
</smart-drop-down-button>
</template>
<script setup>
import { onMounted, ref } from “vue”;
import “smart-webcomponents/source/styles/smart.default.css”;
import “smart-webcomponents/source/modules/smart.editor.js”;
import “smart-webcomponents/source/modules/smart.dropdownbutton”;
import “smart-webcomponents/source/modules/smart.tree.js”;
const dropDownButtonRef = ref();
const treeRef = ref();
const onTreeChange = (e) => {
dropDownButtonRef.value.placeholder = e.detail.item.label;
};
window.Smart(
“#editor”,
class {
get properties() {
return {
//Properties
toolbarItems: [
{
name: “ddl”,
width: “auto”,
height: “10px”,
template: (element) => {
dropDownButtonRef.value.dropDownAppendTo = “body”;
element.appendChild(dropDownButtonRef.value);
dropDownButtonRef.value.placeholder = treeRef.value.querySelector(
“smart-tree-item[selected], smart-tree-items-group[selected]”
).textContent;
},
},
“Underline”,
“StrikeThrough”,
“FontName”,
“FontSize”,
“FontColor”,
“BackgroundColor”,
],
};
}
}
);
onMounted(() => {});
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0 auto;
}
#app,
.vue-root {
width: 100%;
height: 100%;
}
.smart-editor {
width: 100%;
height: 100%;
}
.smart-editor div[item-name=”ddl”] {
height: -webkit-fill-available;
}
smart-drop-down-button {
–smart-editor-drop-down-max-height: none;
}
smart-tree {
width: 100%;
border: 0;
height: auto;
}
.smart-drop-down-container .smart-scroll-viewer-content-container {
display: flex;
}
</style>
Best Regards,
Svetoslav Borislavov
Smart UI Team
https://www.htmlelements.com/
