New Features

[ricardo.pascoal]

Hello guys!
I’m new to Streamlit and I found your proposal to facilitate web development with python very interesting.
However, I noticed some basic things that could be improved in Streamlit.

I see that nocode is very strong and an example said is Bubble.io and also many lowcode too.
I’m not an expert in web development and I never wanted to go deeper because the learning curve is very high and you need to have a lot of knowledge.
I think Streamlit came to solve this problem, making things easier.
I’m trying to talk an app made in Bubble.io with a Python backend using Streamlit and I’ve been having difficulty in the basic part, which is the basic formatting of the screens for a better user experience.
Basic things like changing a font, its size, color, centering elements, giving borders spaces or even customizing a border is a little difficult, because we need to look for the css tag and keep testing and validating to get an ideal result.

My suggestion is that this type of customization is possible in all elements! It is preferable to have a little more syntax in an element and to have the power of its control in a simple and clear way, instead of looking for css tags that often its name does not say much about what it is about.

See how difficult it is to want to change a simple background color of an object!

I think if you have to master CSS or even another framework like react, angular, bootstrap it wouldn’t make sense to use Streamlit.

Some properties that could on elements:

background-color
align(left, right, center)
padding
font-family
font weight
font-size
font-align
font-color
Custom Borders
Custom mouse over, focus, color etc…

Here’s my constructive opinion and I would love to see all the elements with as little customization as possible because I think Streamlit is fantastic!

[randyzwitch]

@ricardo.pascoal

I’m trying to talk an app made in Bubble.io with a Python backend using Streamlit and I’ve been having difficulty in the basic part, which is the basic formatting of the screens for a better user experience.

Hi @ricardo.pascoal -

I’m not sure I understand how Bubble is suppose to work with Streamlit here. Are you hoping to use Streamlit as a custom API of sorts to return data?

@ricardo.pascoal

Basic things like changing a font, its size, color, centering elements, giving borders spaces or even customizing a border is a little difficult, because we need to look for the css tag and keep testing and validating to get an ideal result.

Some of this is intentional, some of this is because we haven’t yet found the right balance of ease-of-use vs. customizability. One of the main tenets of Streamlit was being extremely easy to prototype; what this ends up implying is that we’re solving for the first 80-90% of what people need to do and providing an easy syntax to do that.

You are correct that there isn’t an easy way to modify any one widget in Streamlit. Our first improvement in this area was Themes. We are evaluating what an API might look like for more granular customization, but I do not have a firm timeframe for that.

Best,
Randy

[ricardo.pascoal]

Thanks for replying randyzwitch !
I´m a Brazilian and my english isnt good

What I meant is that I’m trying to replicate an APP made in Bubble.io using Streamlite with Python.

Bubble.io is one of the best NOCODE tools at the moment, but it has its advantages and disadvantages.
Particularly my APP works very well with Bubble and has a backend made by me in Python.

But I would like all the control of this APP in Python with Streamlit, and that’s where the problem I mentioned comes in, having to keep doing HACKS to adjust the screen for a pleasant experience for the user, which takes time and knowledge.
In addition to what I noticed we have responsiveness problems where it still doesn’t seem to be 100%.

I’ll try to be more explicit with an example:

st.text( label, font-family, font-size, font-weigth, font-color )

st.text_input(label, value,placeholder, label, font-family, font-size, font-weigth, font-color, align )

col1, col2 =st.column(2)

col1.align=left
col2.align=center

Anyway, I think there are other ways/solutions to do this.
Just an exemple !

I don’t know if it would be possible to create something in the sense that once an object is created it will know which css properties are available to it.

That way we could trigger the component by its name and set what we need without resorting to the hack and having access for its css class.

Another idea is to create a function to set each component’s CSS, without actually needing to know its CSS class
It’s just ideas ok!

Best,
Ricardo