EP/myep-team
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make modal scrollable for large contents

Browse Source
This commit is contained in:
Björn Fromme
2024-11-25 09:39:30 +01:00
parent e1f4eb3565
commit 4405a9498d
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/htmx_modal.html.twig
+7 -3
View File
@@ -1,8 +1,8 @@
<div id="htmx-modal" class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}> <div id="htmx-modal" class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
<div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('modal', 'close', 'click') }}></div> <div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('modal', 'close', 'click') }}></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-2xl"> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-2xl">
<div class="relative bg-white p-8 rounded-md"> <div class="relative bg-white py-8 rounded-md">
<div class="flex justify-between pb-4"> <div class="flex justify-between pb-4 px-8">
<div class="text-2xl font-bold"> <div class="text-2xl font-bold">
{% block title %}{% endblock %} {% block title %}{% endblock %}
</div> </div>
@@ -12,7 +12,11 @@
{{ icon('close', 'w-6 h-6')}} {{ icon('close', 'w-6 h-6')}}
</button> </button>
</div> </div>
{% block content %}{% endblock %} <div class="max-h-96 overflow-y-scroll">
<div class="px-8">
{% block content %}{% endblock %}
</div>
</div>
<div class="htmx-indicator absolute top-0 left-0 inset-0 bg-white/90 flex items-center justify-center" <div class="htmx-indicator absolute top-0 left-0 inset-0 bg-white/90 flex items-center justify-center"
id="htmx-modal-indicator"> id="htmx-modal-indicator">
{% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8'} %} {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8'} %}