-
-
Notifications
You must be signed in to change notification settings - Fork 315
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
Easier Modal Scrollbars #890
Comments
@riziles I've made reference to this here: We're in a polish phase for Skeleton and going in this order: Elements (done), Components (in progress), Utilities (up next). Given modals are a utility feature they'll come during that phase. Cross posting will help me see this when we get to that point. Thanks for sharing. |
FYI, awaiting the trigger is not reliable. A more reliable workaround is to put a hidden input tag at the top of the modal body to steal the focus: <script>
import { Modal, modalStore } from '@skeletonlabs/skeleton';
function triggerAlert() {
const alert = {
type: 'alert',
title: 'Example Alert',
body: `<input class = "hidden">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur at mauris ut nisl molestie
eleifend ac a neque. Nunc sit amet malesuada orci. Sed
id consequat neque. Pellentesque vel
urna varius, fringilla odio et, congue diam.
<br /> <br />
<a href="https://google.com">href</a>`,
buttonTextCancel: 'Cancel'
};
modalStore.trigger(alert);
}
</script>
<Modal regionBody = 'max-h-24 overflow-auto' width = 'max-w-xs'/>
<div class="container h-full mx-auto flex justify-center items-center">
<button class="btn variant-filled-primary btn-base" on:click={triggerAlert}> Open Modal </button>
</div> |
Solved as part of: #922 Closing this ticket. Please refer any further comments to the ticket linked above. |
Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!
I've observed some puzzling behavior on modals:
What type of pull request would this be?
Enhancement
Any links to similar examples or other references we should review?
This is my workaround:
The text was updated successfully, but these errors were encountered: