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

    How to add border-spacing in Q-Table

    Framework
    4
    13
    1105
    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.
    • dobbel
      dobbel @jmriyaz84 last edited by

      @jmriyaz84

      .q-table {
        border-spacing: 2px !important;
      }
      1 Reply Last reply Reply Quote 1
      • C
        codethirsty last edited by codethirsty

        @jmriyaz84 the !important overwrites a similar declaration in CSS as final.

        dobbel 1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel @codethirsty last edited by

          @codethirsty

          then use it as inline style with important. Should override everything.

          J 1 Reply Last reply Reply Quote 0
          • C
            codethirsty last edited by

            @dobbel did you know something about this https://forum.quasar-framework.org/topic/7302/input-s-error-message-s-color

            1 Reply Last reply Reply Quote 0
            • J
              jmriyaz84 last edited by

              Thanks Team for your help , I will try & let you now

              1 Reply Last reply Reply Quote 0
              • J
                jmriyaz84 last edited by

                Thanks a lot , its working

                1 Reply Last reply Reply Quote 0
                • J
                  jmriyaz84 @dobbel last edited by

                  @dobbel Thanks

                  1 Reply Last reply Reply Quote 0
                  • J
                    jmriyaz84 last edited by

                    @dobble & Team , It is working in codepen but when I add below css in my actual code under <style scoped> tag it is not working , any idea how to solve this.

                    https://codepen.io/jmriyaz84/pen/ZEpYdry

                    <style scoped>
                    .q-tab-panels {
                    border: 1px solid #eeeeee;
                    border-top: none;
                    }
                    .q-table {
                    border-spacing: 2px !important;
                    }
                    .panel {
                    background: url(…/…/…/assets/top_middle.jpg);
                    }
                    tbody tr:nth-child(2n-1) {
                    background: #b2d9f3;
                    text-align: center;
                    color: #000000;
                    font-weight: normal;
                    font-size: 11px;
                    height: 16px;
                    border: #2d2d2d;
                    }
                    tbody tr:nth-child(2n) {
                    background: #ddedf7;
                    text-align: center;
                    color: #000000;
                    font-weight: normal;
                    font-size: 11px;
                    height: 16px;
                    }
                    .acd-card {
                    width: 100%;
                    max-width: 500px;
                    }
                    </style>

                    metalsadman 1 Reply Last reply Reply Quote 0
                    • metalsadman
                      metalsadman @jmriyaz84 last edited by metalsadman

                      @jmriyaz84 use deep selectors https://www.google.com/amp/s/www.telerik.com/amp/understanding-vue-deep-css-selector/WEx1ZE1sRUVUWkE5S0dNbEhBNXJyUkU3T1Q4PQ2. Sidenote in sass/scss use ::v-deep.

                      1 Reply Last reply Reply Quote 0
                      • J
                        jmriyaz84 last edited by

                        @metalsadman it does the magic , thanks for your help . Happy to have great community .

                        1 Reply Last reply Reply Quote 0
                        • J
                          jmriyaz84 last edited by

                          @metalsadman One more help each . Every time when I run quasar build command it creates js & css files with different name , like vendor.d4137955.js & app.711265e7.js , so every time I have to delete old files & copy these new files in my tomcat server (which is monolithic application designed through JSP) .
                          It would be great if any configuration available to create those files in same name so that I just drag & drop. It will save lot of time.

                          dobbel 1 Reply Last reply Reply Quote 0
                          • dobbel
                            dobbel @jmriyaz84 last edited by dobbel

                            @jmriyaz84

                            There’s a reason why it changes names: if you change the file contents and don’t change the name, most browsers will not request the new file and you’ll have to do a hard f-5 to load the new file from the server.

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