Reducing extra padding in containers

ankit2 · July 3, 2024, 11:19am

How I can remove extra padding without making (unsafe_allow_html=True), is there any way to use css in config.toml?

Screenshot from 2024-07-03 16-41-54

edsaac · July 3, 2024, 1:01pm

afaik the only option is to inject CSS with st.html or st.markdown as you mentioned. There is an related enhancement request open that you could upvote:

github.com/streamlit/streamlit

Expose additional theming options

opened 03:46PM - 06 Jun 24 UTC

LukasMasuch

type:enhancement area:styling feature:theming feature:config

### Checklist - [X] I have searched the [existing issues](https://github.com/…streamlit/streamlit/issues) for similar feature requests. - [X] I added a descriptive title and summary to this issue. ### Summary Expose additional theming options in `config.toml` to allow better customization of apps. ### Why? The current set of [theming options](https://docs.streamlit.io/develop/concepts/configuration/theming) is quite minimal and doesn't allow to create a cohesive theme. A couple of additional options would allow better app customization, especially for aligning Streamlit apps better with company themes. ### How? Provide additional theming options that can be defined in `config.toml` like: - Allow custom fonts (via URL?) - Related feature requests: #7274 & #5803 - Allow changing predefined colors used for: - Alert elements like `st.info`, `st.warning`, `st.success`, … - Chart theme colors used in `altair_chart`, `plotly_chart`, and our internal charts. This is mainly referring to a categorical, diverging, and sequential color palette. - Markdown: link color & inline-code color - Metrics delta color - Markdown: text and background color like red, green , … - Default text size - maybe only with a couple of predefined options (small / medium / large) - Default spacing (to influence padding & gaps used around and within elements) - maybe only a couple of predefined options (compact / default) - Roundness (radius) of elements - maybe only a couple of predefined options (none / small / medium / large) - Default border width & color - Sidebar text color For example: ```js font: "sans serif" | "serif" | "monospace" | str (custom font URL) text_size: "small" | "medium" | "large" radius_size: "none" | "small" | "medium" | "large" spacing_size: "compact" | "default" | "large" sidebar_text_color: str (hex color) success_color: str (hex color) warning_color: str (hex color) info_color: str (hex color) error_color: str (hex color) link_color: str (hex color) inline_code_color: str (hex color) chart_categorical_colors: list[str] (list of hex colors) chart_diverging_colors: list[str] (list of hex colors) chart_sequential_colors: list[str] (list of hex colors) positive_delta_color: str (hex color) negative_delta_color: str (hex color) ```

system · December 30, 2024, 1:02pm

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Minor formatting, unsafe_allow_html and fields coming from user Using Streamlit	3	627	February 7, 2023
Theming with config.toml undos CSS styling for buttons Using Streamlit css	1	910	January 26, 2023
Fast and easy mock-up Show the Community!	6	1026	September 14, 2021
Option to remove padding/box for expanders in the sidebar Using Streamlit	2	411	November 13, 2022
Modify size/margin of the main page container? Custom Components configuration , css	3	12964	February 11, 2023

Reducing extra padding in containers

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies