Can anyone explain why the modal appears with a dark background that doesn't cover the top and bottom when it's placed within a subsection of the larger code?
https://i.sstatic.net/SIOw7.png
Modal code Modal.vue
<template>
<!-- This is the modal -->
<div id="my-id" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Add Group</h2>
<div class="uk-modal-body">
<div>
Name:
</div>
<input type="text" />
</div>
<div class="uk-modal-footer">
<div class="uk-float-right">
<button class="uk-modal-close" type="button">Ok</button>
<button class="uk-modal-close" type="button">Cancel</button>
</div>
</div>
</div>
</div>
</template>
This is where I'm placing it Sidebar.html
<section ref="wrapper">
<div>
<button v-on:click="update_files">Refresh</button>
<button v-on:click="select_root">Select folder</button>
</div>
<article v-for="(folder, index) in folders">
<header>{{ folder }}</header>
<div>
<button v-on:click="add(folder)">Add</button>
</div>
<ul>
<li v-for="(file, index) in files[folder]" v-bind:data-folder="folder" v-on:click="load_file({folder, file})">
{{ file }}
</li>
</ul>
</article>
<!-- This is a button toggling the modal -->
<button uk-toggle="target: #my-id" type="button">Open modal</button>
<Modal />
</section>
The modal is included using <Modal />
The Sidebar is a part of the App structure defined in App.html
<div id="app">
<template v-if="store.state.General.root">
<aside id="sidebar">
<sidebar/>
</aside>
<main>
<writing/>
</main>
</template>
<div id='select_folder' v-else>
<div>
<div>
Select a folder to begin
</div>
<button v-on:click="select_root">Select folder</button>
</div>
</div>
<!-- <Modal /> -->
</div>
You can access the source code for this project (on the dev branch) at: https://github.com/FunnyB0y/forgit-me-not