GitHub user dosubot[bot] added a comment to the discussion: Is it possible to 
adjust the width of the filter box

<!-- Answer -->
Yes, it's possible to adjust the width of the filter box in Superset 
dashboards. The current filter controls use Emotion CSS for styling, so you can 
customize the width by overriding or extending the relevant styles. For 
example, filter items are wrapped in a div with the class `filter-item-wrapper` 
and a style of `flex-shrink: 0`, which prevents them from shrinking below their 
content size. You can target this class or use custom CSS in your dashboard to 
set a specific width or max-width for the filter box. More details on how 
Superset uses Emotion CSS for component styling are available in the [styling 
guidelines](https://github.com/apache/superset/wiki/Emotion-Styling-Guidelines-and-Best-Practices),
 and you can see how the filter controls are implemented 
[here](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx).

If you use custom CSS, make sure your styles have enough specificity and load 
after Superset's default styles. For more tips on dashboard CSS customization, 
check out the [Preset blog 
guide](https://preset.io/blog/customizing-superset-dashboards-with-css/) as 
well.


<!-- 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/69df554b-362b-47c9-9b0c-44adf2a034e3?feedback_type=great_response)
 | 
[Irrelevant](https://app.dosu.dev/response-feedback/69df554b-362b-47c9-9b0c-44adf2a034e3?feedback_type=irrelevant_answer)
 | 
[Incorrect](https://app.dosu.dev/response-feedback/69df554b-362b-47c9-9b0c-44adf2a034e3?feedback_type=incorrect_sources)
 | 
[Verbose](https://app.dosu.dev/response-feedback/69df554b-362b-47c9-9b0c-44adf2a034e3?feedback_type=too_verbose)
 | 
[Hallucination](https://app.dosu.dev/response-feedback/69df554b-362b-47c9-9b0c-44adf2a034e3?feedback_type=hallucination)
 | [Report 
🐛](https://app.dosu.dev/response-feedback/69df554b-362b-47c9-9b0c-44adf2a034e3?feedback_type=bug_report)
 | 
[Other](https://app.dosu.dev/response-feedback/69df554b-362b-47c9-9b0c-44adf2a034e3?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat
 with 
Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github)&
 nbsp;[![Join 
Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share
 on 
X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/35023)

GitHub link: 
https://github.com/apache/superset/discussions/35023#discussioncomment-14313153

----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: 
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to