Hi team!
Hi team!
One problem we are facing in v2 liveboards in 9.5.0 version for the KPIs styling.
We are giving a particular set of styling to KPI headers and we are differentiating the KPI headers and the chart headers in a particular liveboard using the class "tile-extraSmall" which is there for KPIs, unlike for charts we are getting "tile-custom".
But when we are rendering our code in the iframe for testing purpose as in the customer portal our code will be rendered inside an iframe, so at that time the class "tile-extraSmall" is not coming for the kpis instead the class "tile-custom" is coming for both KPIs and charts and our custom CSS styles are failing to apply. I have attached a file for your reference.
I am curious, is there any way to handle this and why the class is changing on rendering it in iframe?
9 Replies
Hi @AZÖG sorry for the late reply, we were trying to see the issue internally. Can you create an SFDC Usecase for this? We will get the correct internal team to look at this. Thanks.
Hi @AZÖG - Depending upon the size of the screen, we automatically figure out CSS classes which is why this is not the correct way to differentiate between charts and KPIs,
What is that you are trying to achieve so I can suggest some alternate way to do this
Hi team, We are trying to apply custom CSS styling to the KPIs, previously for V1 liveboard version we were getting a class tile-size-xs for KPIs and it was not changing even if we change the screen size. Same styling we are unable to apply for the KPIs in V2 liveboard version.
I have attached a screenshot of the styling that we are applying in V1 liveboard.
thanks.
What are you looking to change in terms of styling ? Can you paste your unsafe CSS Rules ? I want to understand a bit more on your setup and why are we doing unsafe rules for this
Yeah sure
This CSS we are maintaining it in github and using the CDN link for the CSS.
/* decreasing the padding /
.tile-extraSmall .answer-content-moduleanswerVizContainer.flex-layout-modulevertical {
padding: 5px !important;
border-left: 1px solid #efefef;
border-radius: 0px !important;
}
/ KPI header /
.tile-extraSmall .answer-title-module__titleText {
font-size: 13px !important;
font-weight: 300 !important;
line-height: 16px !important;
color: #4c4c4c !important;
}
/ centering KPI header /
.tile-extraSmall .answer-title-module__titleContainerCompact {
display: flex !important;
justify-content: center !important;
width: 100% !important;
flex-flow: row !important;
}
/ KPI value styling */
.kpi-module__hero {
font-size: 32px !important;
font-weight: 300 !important;
line-height: 32px !important;
color: #0279ff !important;
}
@AZÖG - These breakages are expected given KPI Chart styling CSS Class is dynamic. Will spend some time today to see how can we differentitate between a KPI and a chart
Also, can you close the ticket opened and would be great if you can open a community idea regarding your usecase, we currently do not natively support custom styling KPI tile
Hi @utsav.kapoor, We have opened a community idea regarding our usecase. Okay, we will close the ticket.
One more thing I would like to ask for V2 liveboards is even for the big screen size KPIs are arranging automatically one after the other, for that screen size at least it should arrange like 3-4 in a line. Second image shows the KPI arrangement in V1 liveboard for the same screen size and this is what we are trying to achieve for V2 liveboards.
@AZÖG - I have reasched out to other devs also so we can see how we can unblock you. Give me a couple of days so I can suggest you a way for this
Sure @utsav.kapoor
Thanks.
Hi @utsav.kapoor, I was curious about this, do we have any option to achieve this KPI arrangement as mentioned above?