I am looking to set up a file drop area with the Buefy component, but I want the size of the drop area to be 100% of both the width and height. The basic page is provided below, however, I am unsure about where to add the necessary width and height styles.
When I manually update the styles inline in Chrome, I achieve the desired effect (refer to the screenshot). Can you please advise me on where in the actual Buefy component I should insert the style?
The code snippet can be found below and the Codepen link is here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
</head>
<body>
<div id="app">
<!-- Buefy components goes here -->
<section>
<b-field>
<b-upload v-model="dropFiles"
multiple
drag-drop
style="width: 100%; height: 100%;"
>
<section class="section">
<div class="content has-text-centered">
<p>
<b-icon
icon="upload"
size="is-large">
</b-icon>
</p>
<p>Drop your files here or click to upload</p>
</div>
</section>
</b-upload>
</b-field>
<div class="tags">
<span v-for="(file, index) in dropFiles"
:key="index"
class="tag is-primary" >
{{file.name}}
<button class="delete is-small"
type="button"
@click="deleteDropFile(index)">
</button>
</span>
</div>
</section>
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data: {
dropFiles: []
},
methods: {
deleteDropFile(index) {
this.dropFiles.splice(index, 1)
}
}
})
</script>
</body>
</html>