CSS for V2 Liveboard
Hi team
would like your input on this
while using v1 liveboard
there was no react grid available in v1 liveboard hence there we could customize the liveboard using classnames and it would work properly even in responsiveness we could arrange KPI and charts according and those style would apply to its respective errors also
but while in v2 liveboard we are not able to do the same since it uses react-grid-layout
When we are using V2 liveboards, we are facing the issues like:
when we reduce the screen size in v2 liveboard it is getting a default scroll by class react-grid-layout and "react-grid-item pinboard-content-module__tile cssTransforms react-resizable hide react-resizable" which can't be handled in css customization as it is handle from some built-in code, whereas in v1 liveboard its with class name 'tile-container' and no react-grid is found handling individual viz cards.
there is a case where we want to apply the CSS for KPI separately ,Charts seperatly and also want to handle the styling for the "No data error " vizs cases (for error it needs to be same as respective vizs)
we got the below styling for KPI in liveboard but we have charts also in the same liveboard which we would like to have it in different arrangement according to screen size and that style should not apply to KPI and these styling should affect ("No data error " vizs cases):(according to the viz(if its kpi error kpi style should be applied to this error and if its chart error chart style should be applied to this )) .
3 Replies
let us know if there are any customizing option available for liveboard V2
CSS provided by thoughtspot team for KPI:
customCSS: {
rules_UNSTABLE: {
".react-grid-layout.pinboard-content-modulefixedLayoutTileContainer": {
"display": "flex",
"flex-wrap": "wrap",
"justify-content": "space-between",
"align-content": "flex-start",
"padding": "24px", // configurable
"row-gap": "20px" // configurable
},
".pinboard-content-moduletile": {
"transform": "none !important",
"position": "static !important",
"flex-basis": "24%" // configurable
}
}
},
but this css applies for Charts also
Thoughtspot Case also created for the same
Case No. 00372570
CSS for Thoughtspot V2 Liveboard
https://community.thoughtspot.com/s/case/500Uk00000FWY5xIAH/css-for-thoughtspot-v2-liveboard
and as mentioned in this case comment Idea is also posted for same
Idea name :CSS for V2 Liveboard
https://community.thoughtspot.com/s/idea/087Uk000000SrnlIAC/detail
Thanks for the community idea. I am talking to the team who handles KPI so that we can advise you on this
Hi @utsav.kapoor, is there any update on this issue we are facing?