How to make file upload Beufy component x% width and height?

Ask A Question

Login To post a question

I am trying to create a file drop area using the Beufy component but wish the size of the drop area to be 100% of the width and height. Here is the basic page but I don’t know where I need to put the width and height style.

If I load in Chrome and manually update adding styles inline I end up with the desired affect (see screenshot). Where do I add the style in the actual Buefy component please?

enter image description here

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">

    <div id="app">
        <!-- Buefy components goes here -->

              <b-upload v-model="dropFiles"
                  <section class="section">
                      <div class="content has-text-centered">
                          <p>Drop your files here or click to upload</p>

          <div class="tags">
              <span v-for="(file, index) in dropFiles"
                  class="tag is-primary" >
                  <button class="delete is-small"


    <script src=""></script>
    <!-- Full bundle -->
    <script src=""></script>

    <!-- Individual components -->
    <script src=""></script>
    <script src=""></script>

        new Vue({
            el: '#app',
            data: {
              dropFiles: []
            methods: {
              deleteDropFile(index) {
                this.dropFiles.splice(index, 1)

For more info please click here

Have a question or need a custom quote?