No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    remove deep element

    Help
    3
    7
    94
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Z
      zeppelinexpress last edited by

      I’m trying to remove an icon of q-uploader
      Screenshot_2.jpg

      I’ve already read the docs and did not found a prop,
      I’m trying scoped unsuccessfully

      <style scoped>
        .q-uploader i {
          display: none !important;
        }
        .q-uploader a {
          display: none !important;
        }
      </style>
      
            <q-uploader
              class="q-ma-md"
              style="max-width: 300px"
              method="POST"
              url="http://localhost:3333/upload"
              label="Add pic"
              accept=".jpg, image/*"
              @rejected="onRejected"
              field-name="profile_pic"
              hide-upload-btn
            />
      
      1 Reply Last reply Reply Quote 0
      • beets
        beets last edited by

        Try

        
        <style scoped>
          .q-uploader >>> i {
            display: none !important;
          }
          .q-uploader >>> a {
            display: none !important;
          }
        </style>
        
        

        https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

        1 Reply Last reply Reply Quote 0
        • Z
          zeppelinexpress last edited by

          this worked but removed the add button too,
          well, but I learned how to use scoped correctly
          I will try another ways using “>>>”

          thank you very much twice, saved me two times today

          1 Reply Last reply Reply Quote 0
          • Z
            zeppelinexpress last edited by

            there is 2 icons, “add_box” and when u add something, there is an icon “clear_all”, I want to find a way to remove only “clear_all” icon, but on browser inspector, I did not found a class different between these two icons

            beets 1 Reply Last reply Reply Quote 0
            • beets
              beets @zeppelinexpress last edited by

              @zeppelinexpress
              Maybe:

              .q-uploader >>> .q-uploader__header-content > a:first-child {
                display: none !important
              }
              
              1 Reply Last reply Reply Quote 1
              • Z
                zeppelinexpress last edited by

                Thankssssssss very very much, solved!!!

                1 Reply Last reply Reply Quote 0
                • A
                  Arkshine last edited by Arkshine

                  As side-note, you can also do it without CSS – that’s something you could achieve with slots: https://quasar.dev/vue-components/uploader#Slots by customizing the header.
                  More verbose though, but I guess cleaner in a way.

                  1 Reply Last reply Reply Quote 1
                  • First post
                    Last post