dosubot[bot] commented on issue #37674:
URL: https://github.com/apache/superset/issues/37674#issuecomment-3852225661
<!-- Answer -->
The CSS you tried didn't work because Superset v6 uses Emotion (CSS-in-JS)
and flexbox for layout, so you need to override the flex alignment directly on
both the main container and the text container. Also, specificity and the use
of !important are critical, since Superset's styles may override your custom
CSS.
Try this updated CSS in your dashboard CSS editor or template:
```css
/* Center Big Number value and subheader in v6 */
.superset-legacy-chart-big-number,
.superset-legacy-chart-big-number .text-container {
align-items: center !important;
justify-content: center !important;
display: flex !important;
flex-direction: column !important;
}
.superset-legacy-chart-big-number .header-line,
.superset-legacy-chart-big-number .subheader-line {
text-align: center !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
}
```
If you have multiple Big Number charts and only want to target one, use its
chart ID (e.g., `#chart-id-123 .text-container`). If this still doesn't work,
inspect the chart in your browser's developer tools to confirm the class names
and see if your CSS is being applied or overridden. Sometimes, increasing
selector specificity or moving your CSS lower in the load order helps. More
details and best practices are discussed
[here](https://github.com/apache/superset/discussions/37504) and the component
structure is shown
[here](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx#L207-L586).
Let me know if this solves it or if you see any other class names in your
DOM!
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/48d620bc-507e-4733-98f3-1ac793019cd2?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/48d620bc-507e-4733-98f3-1ac793019cd2?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/48d620bc-507e-4733-98f3-1ac793019cd2?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/48d620bc-507e-4733-98f3-1ac793019cd2?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/48d620bc-507e-4733-98f3-1ac793019cd2?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/48d620bc-507e-4733-98f3-1ac793019cd2?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/48d620bc-507e-4733-98f3-1ac793019cd2?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=The%20CSS%20you%20tried%20didn%27t%20work%20because%20Superset%20v6%20uses%20Emotion%20%28CSS-in-JS%29%20and%20flexbox%20for%20layout%2C%20so%20you%20need%20to%20override%20the%20flex%20alignment%20directly%20on%20both%20the%20main%20container%20and%20the%20text%20container.%20Also%2C%20specificity%20and%20the%20use%20of%20%21important%20are%20critical%2C%20since%20Superset%27s%20styles%20may%20override%20your%20custom%20CSS.%0A%0ATry%20this%20updated%20CSS%20in%20your%20dashboard%20CSS%20editor%20or%20template%3A%0A%0A%60%60%60css%0A/%2A%20Center%20Big%20Number%20value%20and%20subheader%20in%20v6%20%2A/%0A.superset-legacy-chart-big-number%2C%0A.superset-legacy-chart-big-number%20.text-container%20%7B%0A%20%20align-items%3A%20center%20%21important%
3B%0A%20%20justify-content%3A%20center%20%21important%3B%0A%20%20display%3A%20flex%20%21important%3B%0A%20%20flex-direction%3A%20column%20%21important%3B%0A%7D%0A%0A.superset-legacy-chart-big-number%20.header-line%2C%0A.superset-legacy-chart-big-number%20.subheader-line%20%7B%0A%20%20text-align%3A%20center%20%21important%3B%0A%20%20width%3A%20100%25%20%21important%3B%0A%20%20justify-content%3A%20center%20%21important%3B%0A%20%20align-items%3A%20center%20%21important%3B%0A%20%20display%3A%20flex%20%21important%3B%0A%7D%0A%60%60%60%0A%0AIf%20you%20have%20multiple%20Big%20Number%20charts%20and%20only%20want%20to%20target%20one%2C%20use%20its%20chart%20ID%20%28e.g.%2C%20%60%23chart-id-123%20.text-container%60%29.%20If%20this%20still%20doesn%27t%20work%2C%20inspect%20the%20chart%20in%20your%20browser%27s%20developer%20tools%20to%20confirm%20the%20class%20names%20and%20see%20if%20your%20CSS%20is%20being%20applied%20or%20overridden.%20Sometimes%2C%20increasing%20selector%20specificity%20or
%20moving%20your%20CSS%20lower%20in%20the%20load%20order%20helps.%20More%20details%20and%20best%20practices%20are%20discussed%20%5Bhere%5D%28https%3A//github.com/apache/superset/discussions/37504%29%20and%20the%20component%20structure%20is%20shown%20%5Bhere%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx%23L207-L586%29.%0A%0ALet%20me%20know%20if%20this%20solves%20it%20or%20if%20you%20see%20any%20other%20class%20names%20in%20your%20DOM%21) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/37674)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
