dash-bootstrap-components icon indicating copy to clipboard operation
dash-bootstrap-components copied to clipboard

Mechanism to disable carousel controls?

Open jepdavidson opened this issue 3 years ago • 3 comments

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

jepdavidson avatar Feb 19 '22 00:02 jepdavidson

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?

tcbegley avatar Feb 19 '22 08:02 tcbegley

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

jepdavidson avatar Feb 19 '22 12:02 jepdavidson

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 avatar Mar 27 '22 18:03 tcbegley