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>
<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
                  >
                  <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>

For more info please click herehttps://stackoverflow.com/q/57919160



Have a question or need a custom quote?
info@smartinfocare.com