Comments (11)
snehilvj
commented on May 28, 2024
Hi @blanning19
Can you share an MRE? I run this code and see now issues.
import dash_mantine_components as dmc
import dash_bootstrap_components as dbc
from dash import html, Output, Input, State, callback, Dash
app = Dash(__name__)
app.layout = html.Div(
[
dmc.Button("Open Modal", id="modal-demo-button"),
dbc.Modal(
id="modal",
children=[
dmc.MultiSelect(
label="Select 3D-axis plot variables:",
id="selected-3d-attr",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
)
],
style={"height": "60vh", "overflow": "scroll"},
),
]
)
@callback(
Output("modal", "is_open"),
Input("modal-demo-button", "n_clicks"),
State("modal", "is_open"),
prevent_initial_call=True,
)
def modal_demo(nc1, is_open):
return not is_open
if __name__ == "__main__":
app.run_server(debug=True)from dash-mantine-components.
blanning19
commented on May 28, 2024
Hello!
Thank you for your quick response.
So I need to have multiple MultiSelects. For this example I just duplicated
you MultiSelect:
app.layout = html.Div(
[
dmc.Button("Open Modal", id="modal-demo-button"),
dbc.Modal(
id="modal",
children=[
dmc.MultiSelect(
label="Select 3D-axis plot variables:",
id="selected-3d-attr",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
),
dmc.MultiSelect(
label="Select 3D-axis plot variables2:",
id="selected-3d-attr2",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
)
],
style={"height": "60vh", "overflow": "scroll"},
),
]
)
The bottom most MultiSelect does display values, but it looks disabled? I
might be able to fix with some css but not sure.
[image: image.png]
However the top dropdown does not show all of the values. Like they are
behind the bottom MultiSelect:
[image: image.png]
For my modal I may have up to 7 or 8 MultiSelects.
Any ideas?
Brad
…On Fri, Jun 17, 2022 at 6:26 AM Snehil Vijay ***@***.***> wrote:
Hi @blanning19 <https://github.com/blanning19>
Can you share an MRE? I run this code and see now issues.
import dash_mantine_components as dmcimport dash_bootstrap_components as dbc
from dash import html, Output, Input, State, callback, Dash
app = Dash(__name__)
app.layout = html.Div(
[
dmc.Button("Open Modal", id="modal-demo-button"),
dbc.Modal(
id="modal",
children=[
dmc.MultiSelect(
label="Select 3D-axis plot variables:",
id="selected-3d-attr",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
)
],
style={"height": "60vh", "overflow": "scroll"},
),
]
)
@callback( Output("modal", "is_open"), Input("modal-demo-button", "n_clicks"), State("modal", "is_open"), prevent_initial_call=True,)def modal_demo(nc1, is_open):
return not is_open
if __name__ == "__main__":
app.run_server(debug=True)
—
Reply to this email directly, view it on GitHub
<#80 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABGISRJ7GGBV2JFLX7UKZIDVPRVILANCNFSM5Y74YI3Q>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
from dash-mantine-components.
snehilvj
commented on May 28, 2024
Can you share the screenshots again. Don't think they were attached successfully here.
from dash-mantine-components.
blanning19
commented on May 28, 2024
Hi, here are the two images as attachments.
Thanks!
…On Fri, Jun 17, 2022 at 11:44 AM Snehil Vijay ***@***.***> wrote:
Can you share the screenshots again. Don't think they were attached
successfully here.
—
Reply to this email directly, view it on GitHub
<#80 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABGISRLDPEOW4PTDJ5RCZBTVPS2QXANCNFSM5Y74YI3Q>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
from dash-mantine-components.
blanning19
commented on May 28, 2024
Just wanted to check in and see if you were able to replicate my issue.
Brad
…On Fri, Jun 17, 2022 at 3:09 PM Brad Lanning ***@***.***> wrote:
Hi, here are the two images as attachments.
Thanks!
On Fri, Jun 17, 2022 at 11:44 AM Snehil Vijay ***@***.***>
wrote:
> Can you share the screenshots again. Don't think they were attached
> successfully here.
>
> —
> Reply to this email directly, view it on GitHub
> <#80 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/ABGISRLDPEOW4PTDJ5RCZBTVPS2QXANCNFSM5Y74YI3Q>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>
from dash-mantine-components.
blanning19
commented on May 28, 2024
Hello.
I wanted to ask one more time if you had any luck with this.
I would rather use your tool than the dcc.Dropdown but it is working on the
modal for me.
Brad
…On Mon, Jun 20, 2022 at 7:27 PM Brad Lanning ***@***.***> wrote:
Just wanted to check in and see if you were able to replicate my issue.
Brad
On Fri, Jun 17, 2022 at 3:09 PM Brad Lanning ***@***.***> wrote:
> Hi, here are the two images as attachments.
> Thanks!
>
> On Fri, Jun 17, 2022 at 11:44 AM Snehil Vijay ***@***.***>
> wrote:
>
>> Can you share the screenshots again. Don't think they were attached
>> successfully here.
>>
>> —
>> Reply to this email directly, view it on GitHub
>> <#80 (comment)>,
>> or unsubscribe
>> <https://github.com/notifications/unsubscribe-auth/ABGISRLDPEOW4PTDJ5RCZBTVPS2QXANCNFSM5Y74YI3Q>
>> .
>> You are receiving this because you were mentioned.Message ID:
>> ***@***.***>
>>
>
from dash-mantine-components.
snehilvj
commented on May 28, 2024
Hi @blanning19
I am not able to reproduce this issue. Dropdowns are working fine for me in a modal. I think the code you shared is not complete. Also I'm not able to see the attached screenshots. Better to attach them directly in the comment thread rather than via mail.
from dash-mantine-components.
blanning19
commented on May 28, 2024
Hello.
Have you tried more than one drodown in a modal?
Here is the code
app.layout = html.Div(
[
dmc.Button("Open Modal", id="modal-demo-button"),
dbc.Modal(
id="modal",
children=[
dmc.MultiSelect(
label="Select 3D-axis plot variables:",
id="selected-3d-attr",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
),
dmc.MultiSelect(
label="Select 3D-axis plot variables2:",
id="selected-3d-attr2",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
)
],
style={"height": "60vh", "overflow": "scroll"},
),
]
)
This does not work
the top dropdown appear to be hidden behind the dropdown below it.
So by the time I do 3 or 4 dropdowns, the values are completely hidden
behind the dropdown above them
I have attached the images directly and as attachments
How would you prefer to see them?
Top dropdown. (I can't see the top 2 values in the dropdown)
[image: image.png]
2nd dropdown( I can see all values but hey are greyed out lik the are
disabled)
[image: image.png]
…On Thu, Jun 23, 2022 at 12:35 PM Snehil Vijay ***@***.***> wrote:
Hi @blanning19 <https://github.com/blanning19>
I am not able to reproduce this issue. Dropdowns are working fine for me
in a modal. I think the code you shared is not complete. Also I'm not able
to see the attached screenshots. Better to attach them directly in the
comment thread rather than via mail.
—
Reply to this email directly, view it on GitHub
<#80 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABGISRLROVFNUQ3IZMSNEUTVQSU7XANCNFSM5Y74YI3Q>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
from dash-mantine-components.
AnnMarieW
commented on May 28, 2024
Hi @blanning19
When posting an issue, it's important to include a complete minimal example that can be copied, pasted, and run by someone else to reproduce the error you are seeing. For more info on how to do this, see the Dash Community forum post - How to get your questions answered on the forum. It would also be good to post your question on the forum first, in case it's just a "how-to" issue and not a bug.
Here's more info on how to include files and images in a GitHub issue or pull request.
I also created an example, and I was able to replicate what you are seeing. The issue looks like the dropdown options are behind the modal. This can be fixed by using the zIndex prop. Here's what the example code posted below looks like with the zIndex prop commented out.
Here's an image of the working dropdown - just make the zIndex prop not commented out in the example below
from dash import Dash, html
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
[
dmc.Button("Open Modal", id="modal-demo-button"),
dbc.Modal(
id="modal",
children=[
dmc.MultiSelect(
label="Select 3D-axis plot variables:",
id="selected-3d-attr",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
zIndex=2000
),
dmc.MultiSelect(
label="Select 3D-axis plot variables2:",
id="selected-3d-attr2",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
zIndex=2000
)
],
style={"height": "60vh", "overflow": "scroll"},
is_open=True
),
],
)
if __name__ == '__main__':
app.run_server(debug=True)from dash-mantine-components.
blanning19
commented on May 28, 2024
Thank you!
The zindex setting seems to have fixed the problem. !!
…On Sun, Jun 26, 2022 at 10:42 AM Ann Marie Ward ***@***.***> wrote:
Hi @blanning19 <https://github.com/blanning19>
When posting an issue, it's important to include a *complete* minimal
example that can be copied, pasted, and run by someone else to reproduce
the error you are seeing. For more info on how to do this, see the Dash
Community forum post - How to get your questions answered on the forum
<https://community.plotly.com/t/how-to-get-your-questions-answered-on-the-plotly-forum/40551>.
It would also be good to post your question on the forum first, in case
it's just a "how-to" issue and not a bug.
Also here's more info on how to include files and images
<https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/attaching-files>
in a GitHub issue or pull request.
In this case, I can replicate what you are seeing. The issue looks like
the dropdown options are behind the modal. This can be fixed by using the
zIndex prop. Here's what the example code posted below looks like with
the zIndex prop commented out.
[image: dmc_dropdown]
<https://user-images.githubusercontent.com/72614349/175824488-3f16f82a-2943-432d-8329-2e94af4dfd1a.gif>
Here's an image of the working dropdown - just make the zIndex prop not
commented out in the example below
[image: image]
<https://user-images.githubusercontent.com/72614349/175824216-90ed5ff1-c836-46eb-8584-55b61500a0bb.png>
from dash import Dash, htmlimport dash_bootstrap_components as dbcimport dash_mantine_components as dmc
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
[
dmc.Button("Open Modal", id="modal-demo-button"),
dbc.Modal(
id="modal",
children=[
dmc.MultiSelect(
label="Select 3D-axis plot variables:",
id="selected-3d-attr",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
zIndex=2000
),
dmc.MultiSelect(
label="Select 3D-axis plot variables2:",
id="selected-3d-attr2",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
zIndex=2000
)
],
style={"height": "60vh", "overflow": "scroll"},
is_open=True
),
],
)
if __name__ == '__main__':
app.run_server(debug=True)
—
Reply to this email directly, view it on GitHub
<#80 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABGISRL3G54URYT6ZJJM6FTVRCCAFANCNFSM5Y74YI3Q>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
from dash-mantine-components.
snehilvj
commented on May 28, 2024
Thanks @AnnMarieW
from dash-mantine-components.
Related Issues (20)
- [BUG] New version not backward compatible HOT 2
- Burger lost in 0.14.0? HOT 1
- Enhancement Request: Automatic Disappearance of Tooltips After Hovering for a Specified Duration
- DateInput does not use valueFormat setting
- How to set navLink active when click
- Title gradient prop
- Inputs lacking readonly attribute
- Is there a component that adds row navigation to datatable HOT 2
- DateInput + DatePicker with HUGE arrow ^v buttons (0.14.2) HOT 6
- Add MonthPickerInput & YearPickerInput
- dmc.Image no longer supports base64 encoded images
- AppShellHeader and AppShellMain overlaping
- Updating Notifications not working HOT 1
- The dmc.ColorPicker doesn't show the color when it's value is updated
- Multiselect doesn't update pillsList dynamically
- Add support for advanced dayjs formats HOT 3
- No module named 'dash_mantine_components._imports_' HOT 4
- r.useId is not a function HOT 1
- Free input on DateInput component does not consider locale
- Image components doesn't render data URIs HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dash-mantine-components.