Summary
It would be great to be able to pass some tailwind classes into the modal as part of the event dispatch, so that individual modal event calls could be customised.
Use-case
I am opening a modal which has a dropdown inside it, with the existing overflow-hidden class on the modal.blade.php the dropdown select element flows out of the modal and that overflow is hidden making the dropdown unusable.
Solution options
A potential solution might be to pass the classes as an argument?
wire:click="$dispatch(
'openModal',
{
component: 'webhooks.get-webhook-secret',
arguments: {
webhook: {{ $hook->id }},
cssClass: 'overflow-visible'
}
}
)"
Or, some way to pass the template file to use into the component, so users can overwrite the template in their local project?
Sidestep
#modal-container {
overflow: visible !important;
}
Summary
It would be great to be able to pass some tailwind classes into the modal as part of the event dispatch, so that individual modal event calls could be customised.
Use-case
I am opening a modal which has a dropdown inside it, with the existing
overflow-hiddenclass on themodal.blade.phpthe dropdown select element flows out of the modal and that overflow is hidden making the dropdown unusable.Solution options
A potential solution might be to pass the classes as an argument?
wire:click="$dispatch( 'openModal', { component: 'webhooks.get-webhook-secret', arguments: { webhook: {{ $hook->id }}, cssClass: 'overflow-visible' } } )"Or, some way to pass the template file to use into the component, so users can overwrite the template in their local project?
Sidestep