Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mechanism to disable carousel controls? #815

Open
jepdavidson opened this issue Feb 19, 2022 · 3 comments
Open

Mechanism to disable carousel controls? #815

jepdavidson opened this issue Feb 19, 2022 · 3 comments
Labels
help wanted Extra attention is needed

Comments

@jepdavidson
Copy link

Hi,

I have been making use of the dbc.Carousel, but have hit some issues when wanting to disable interaction (via controls or indicators) during a long callback.
So far I have handled this by modifying the className of the carousel in one of the 'running' outputs of the long callback:

Output('carousel', 'className'), 'disabledContent', None)

with disabledContent being defined in css as

.disabledContent { pointer-events: none; opacity: 0.75; }

Anyway, I was thinking it would be useful if the Carousel had a 'disabled' attribute - like buttons, text inputs, sliders, etc do.
Then I could simply add

(Output('carousel', 'disabled'), True, False)

Apologies if I've missed something obvious - I am pretty new to Dash...

Kind regards

James

@tcbegley
Copy link
Collaborator

tcbegley commented Feb 19, 2022

Hi James,

There is the option to set controls=False, but do I understand you correctly that you don't want the controls to disappear, rather just to not be clickable?

@jepdavidson
Copy link
Author

Hi,

There is the option to set controls=False, but do I understand you correctly that you don't want the controls to disappear, rather just to not be clickable?

Correct. I am using the Carousel component to select an input for a button click coupled to a long callback. While the callback is running I want to disable the controls so that when the result comes back there is no potential for confusion about which carousel item it pertains to.

Like I said, I have a workaround that involves modifying the className - but if others agree that carousels can be used like other inputs, then perhaps the 'disabled' property makes sense (I guess applying the 'disabled' appearance to the whole carousel - including contents - would be most consistent with other components like buttons, sliders, etc?).

Kind regards

James

@tcbegley
Copy link
Collaborator

Hi @jepdavidson

I've been looking at this a bit more but due to some restrictions from the underlying Carousel component in React-Bootstrap it seems hard to come up with a solution that is better than the workaround you gave in your post.

I'll leave this open for now in case a better idea comes along but I think my recommendation is to just keep doing what you're doing for now.

@tcbegley tcbegley added the help wanted Extra attention is needed label Mar 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Development

No branches or pull requests

2 participants