asked on July 24, 2025
Good afternoon,
I am working with nuxt 3, vue composition api.
We installed WebDataRocks according to the vue.js instructions.
It says to download the pivot component from github and insert it as a component where needed.
This is parent component example:
<q-card class="q-pa-md" style="height: 80vh">
<CustomSelectElement/>
<WebDataRocksPivot/>
</q-card>
Pivot
<template>
<div ref="pivotContainer"></div>
</template>
In props pivot have:
height: [String, Number],
width: [String, Number],
But giving this params, height and width dont change.
I need pivot width and heigth 100%, but now it fixed by default
⋅ July 30, 2025
Hello, Julian!
Thank you for your question.
Please use our WebDataRocks GitHub for any future questions related to WebDataRocks, as we are answering only questions related to Flexmonster on this Help Center.
Regarding your question about the component's width and height, you can set it to 100% as follows:
var pivot = new WebDataRocks({
container: "pivotContainer",
toolbar: true,
width: "100%",
height: "100%",
})
This will define the width and height of the container element with the "pivotContainer" id.
However, please note that for a component to take 100% height, the height of its parent element(e.g., q-card) should be defined in absolute units: https://codepen.io/webdatarocks/pen/YPyNGKM.
Hope you will find our answer helpful.
Kind regards,
Solomiia
