you are welcome.
Thanks I have found the similar solution for this. Here it is if anyone needs:
with elements("new_element"):
with mui.Paper(key = 'some_key', elevatio={3},variant="outlined"):
with mui.List(sx={ "width": '100%', "bgcolor": '' }):
for idx, row in enumerate(myDT):
with mui.ListItem(key = f"list_item{idx}"):
mui.Checkbox(key=f"checkbox_{idx}",onChange=lambda e: function_clicked(e, row['item']))
The only problem I have here is that always the last row item is passed to the function, but not the one that is checked/clicked.
Hi,
does anyone know how you could disable mui.Select depending on other selection (disable/enable)?
Material UI docs says that you can just add disabled with FormControl
<FormControl sx={{ m: 1, minWidth: 120 }} disabled>
But how you can do it with Streamlit mui? I tried several ways but ended up always with error
Below you can find my code
with mui.CardContent(sx={"flex": 1, "font_size":"large"}):
with mui.FormControl( sx={'width':'350px'} ):
mui.InputLabel("Option")
with mui.Select(
value=st.session_state.value_selected,
label="Option",
onChange=handle_select,
):
for x in listofitems:
mui.MenuItem(str(x), value=x)
Hi @JakeB,
I was recently figuring out the streamlit mui. So, in order to set those parameters that are standing alone like the (disabled) you just add “=True” or “=False” (“disabled=True”). And this will be the way you pass those parameters to mui elements.
I’ve been trying to add tooltip to a button. This is what I’ve tried so far:
with mui.Tooltip(title = "Test"):
mui.Button("Go to page.")
However, I get the following error:
streamlit_elements.core.exceptions.ElementsFrontendError: In elements frame ‘streamlit_elements.core.frame.elements_frame.dashboard’: Cannot read properties of undefined (reading ‘addEventListener’)
Has anyone figured out how to use the button tooltip?
You can try using Tooltip this way
import streamlit as st
from streamlit_elements import elements, mui, html
with elements(key='Tooltip'):
for i in ['left', 'top', 'bottom', 'right']:
with mui.Box():
with mui.Tooltip(
title='Tooltip Information',
placement=i, # Tooltip Information
open=True,
):
html.div(mui.IconButton(mui.icon.Balance))
2 Likes
Definitely some progress, thank you! 
The tooltip title is open by default though. I’m trying to figure out how to open it when hovering.
It’s very simple, you annotate open=True，例如👇
#open=True
1 Like
For whatever reason I was under the impression I had to implement functions to run when hovering. Made it too complex for myself and forgot the obvious, thanks!
Is there any resource to study how to handle mui elements with python?
I’m not sure whether you can use WeChat. If you can, you can search the “Streamlit Web” official account. I shared some basic tutorials about mui, hoping to help you.
Unfortunately, I can’t, given that I’m outside of China. Thanks nonetheless! 
I’m sharing the finished piece of code for future reference; maybe someone will find it useful.
with mui.CardActions(disableSpacing = True):
mui.IconButton(mui.icon.Favorite)
mui.IconButton(mui.icon.Share)
with elements(key = 'expand_card_tooltip'):
with mui.Box(sx = {"border": 0}):
with mui.Tooltip(title = "Expand project", placement = "bottom"):
html.div(mui.IconButton(mui.icon.ExpandCircleDown, onClick = lambda: portfolio_functions.card_expansion_func(self.card_key)))
2 Likes
I need to refresh the mui elements in order to show data that is updated.
with mui.CardContent(sx={"flex": 1, "font_size":"large"}):
with mui.FormControl( sx={'width':'350px'} ):
mui.InputLabel("Option")
with mui.Select(
value=st.session_state.value_selected,
label="Option",
onChange=handle_select,
):
for x in listofitems:
mui.MenuItem(str(x), value=x)
Having the code like this only the data of list will be updated but the position and all elements are going to stay at the same position.
Like i have checked button on one element and that element is moved to the bottom of the list. But the check button stays checked in the same position, not moved with the same element.
PS. I’m having logic that check in the element needs to be checked or not.
Hi,
is this component still maintained?
last commit in the github repo is from last year. And demo doesn’t work.
In the other side, is streamlit planning to add a similar feature natively?
Asking, cause i think would be a shame to loose this (already developed) capability.
Also, what’s the point in doing this cool “30DaysOfStreamlit” challenges, if then the findings are not added to the main repo?
thanks
1 Like
Hi, could you share your code please? I’m trying to find out how to use other nivo charts in my streamlit app
hey, could you clarify what sort of code you need?
I’m trying to insert a line plot in a mui object instead of a Radar plot as shown in the example. Do you have anything like that?
I’m really new to react so I really don’t understand if the mui.Radar object was only created for this one, and if mui.Line does not exist.
Any help would be appreciated!
This code has worked pretty well for me…
return nivo.Line(data = [
{
"id": "Number of Requests",
"data": [
{"x": 1, "y": 0},
{"x": 2, "y": 0},
{"x": 3, "y": 0},
{"x": 4, "y": 0},
{"x": 5, "y": 0}
],
}
],
key = "line_chart",
margin={'top': 30, 'right': 130, 'bottom': 100, 'left': 130},
xScale = {'type': 'point', 'min': 'auto', 'max': 'auto'},
yScale = {'type': 'linear', 'min': 'auto', 'max': 'auto', 'stacked': True, 'reverse': False},
yFormat = " >-.2f",
axisTop = None, #{'null'},
axisBottom = {'orient': 'bottom', 'tickSize': 0, 'tickPadding': 20, 'tickRotation': -25, 'legend': None, 'legendOffset': 100, 'legendPosition': 'middle'},
axisLeft = {'orient': 'left', 'tickSize': 0, 'tickValues': 5, 'tickPadding': 10, 'tickRotation': -45, 'legend': 'Number of Requests', 'legendOffset': -50, 'legendPosition': 'middle'},
pointSize = {10},
pointColor = {'theme': 'background'},
pointBorderWidth = {2},
pointBorderColor = {'from': 'serieColor'},
pointLabelYOffset = {-12},
useMesh = True,
theme={
"background": 'rgb(49, 50, 59)',
"textColor": "white",
"tooltip": {
"container": {
"background": "#FFFFFF",
"color": "#31333F",
}
}
})
1 Like
thank you very much! it is a really good guideline for what I need
1 Like
Is it possible to create a chatbot inside a draggable mui element?
I’d say yes. However, as the app you’re creating gets more complicated, e.g. real-time updates, you may experience unexpected behavior - ex: disappearing components. It looks really nice, but to the best of my knowledge it’s probably difficult to make the draggable aspect of the dashboard practical, in case your use-case is complex.
That’s just my experience with it though. You can always experiment and see if it fits your needs.