Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. turigeza
    T
    • Profile
    • Following 0
    • Followers 1
    • Topics 20
    • Posts 181
    • Best 40
    • Groups 0

    turigeza

    @turigeza

    48
    Reputation
    138
    Profile views
    181
    Posts
    1
    Followers
    0
    Following
    Joined Last Online
    Location Scotland

    turigeza Follow

    Best posts made by turigeza

    • RE: How can I insert my brand logo with a spinner in Loading plugin ?

      @IvanGV
      GH = Git Hub
      https://github.com/quasarframework/quasar/issues

      posted in Help
      T
      turigeza
    • RE: QTable hide pagination controls

      @reath Use an empty bottom slot.

      <template v-slot:bottom></template>
      

      https://codepen.io/turigeza/pen/gJNYpg

      You can also hide the empty bottom slot when you don’t want to see it if data isn’t missing. I added that as well to the same pen. Just remove the :hide-bottom="emptyData.length > 0" bit if you don’t need it.

      posted in Framework
      T
      turigeza
    • RE: How can I insert my brand logo with a spinner in Loading plugin ?

      @IvanGV btw there is a way of doing it if you are very keen : )
      You have to create your own custom spinner component. There is a vague example here:
      https://forum.quasar-framework.org/topic/4535/custome-spinner/3

      posted in Help
      T
      turigeza
    • RE: [solve] Open/close children's dialog from parent => Avoid mutating a prop directly since the value will be...

      @Shoooryuken
      This is a common Vue error. You should never modify the props.
      Instead create a computed property which returns options and on update emit an event to parent.

      Something on the line of this:

      <template>
          <q-card>
              <q-dialog square full-width v-model="$_options" position="bottom" class="">
                  <q-card-section class="row items-center">
                      <div class="text-h6">{{ title }}</div>
                      <q-space />
                      <q-btn icon="close" flat round dense @click="close" />
                  </q-card-section>
              <q-card-section class="items-center no-wrap">....</q-card-section>
          </q-card>
      </template>
      <script>
      export default {
          props: {
              options: { type: Boolean, default: false }
          },
          computed: {
              $_options: {
                  get: function () {
                      return this.options;
                  },
                  set: function (val) {
                      this.$emit('update-options', val);
                  }
              }
          },
          methods: {
             activate: function (el) {
                  this.$emit('update-options', false)
                  this.filter = el
              },
              close () {
                  this.$emit('update-options', false)
              }
          }
      }...
      

      https://forum.vuejs.org/t/vue-warn-avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whenever-the-parent-component-re-renders/21757

      posted in Framework
      T
      turigeza
    • RE: Q-input border color on focus

      @bkirvin
      Try this and see pen.

      .q-field--outlined:hover .q-field__control:before {
        border-color: red;
      }
      

      https://codepen.io/turigeza/pen/QWEVNEy

      posted in Help
      T
      turigeza
    • RE: How to prevent the focus of a button in a list item

      @Clyde Remove the tag="label" and add clickable instead and it should work fine.
      https://codepen.io/turigeza/pen/xxVoOxW

      posted in Framework
      T
      turigeza
    • RE: Use my own css

      @acros

      You can see what becomes of q-layout in chrome inspector.

      Screen Shot 2020-11-09 at 16.19.17.png

      If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.

      As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?

      So the options are

      a, Style your custom component so it is compatible with q-layout.
      b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
      c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

      posted in Help
      T
      turigeza
    • RE: Drag And Drop

      This should really be part of Quasar I feel and not an extension. I am going to start bodging the drag and drop today into qTable to start with and then qTree. And many will end up doing the same because sooner or later you will need it. How else are you supposed to organise a tree for example ? There is not many other ways to do it.

      posted in Useful Tips (NEW)
      T
      turigeza
    • RE: Ionic Vue Beta now supports Vue 3

      @bonatoc @Hawkeye64 I couldn’t agree more.

      posted in Hangout
      T
      turigeza
    • RE: Custom Component & Mixins & avoid repeating props

      Yes ! Thank you for that link. No need for the mixins and also it is not $props I need but $attrs. Sorry it is kind of ended up to be a question about Vue rather then Quasar.

      So the final wrapper QInput for me looks like this

      <template>
          <q-input
          :value="value"
          v-on="$listeners"
          v-bind="$attrs"
          @keyup.enter="updated"
          @blur="updated"
          @keydown.meta.83.prevent="updated"
          />
      </template>
      
      <script>
      
      export default {
          props: ['value'],
          methods: {
              updated: function () {
                  this.$emit('save');
              }
          }
      };
      </script>
      ```
      posted in Help
      T
      turigeza

    Latest posts made by turigeza

    • RE: Global constants ?

      I was so wrong above I just deleted my answer : ) Sorry. And now @beets already posted a better one : )
      https://codepen.io/turigeza/pen/MWjgwQp?editors=101

      posted in Framework
      T
      turigeza
    • RE: Blank Page with PWA and NGINX

      @phgrund
      MIME type missmatch is the problem you can see it in the console.

      add_header X-Content-Type-Options nosniff;
      seems causing issues for some.
      https://stackoverflow.com/questions/29573489/nginx-failing-to-load-css-and-js-files-mime-type-error

      Commenting it out should help as suggested there.

      posted in Help
      T
      turigeza
    • RE: [Solved] PWA force refresh when new version released?

      @ssuess Thank you for sharing the code and explaining it as well.

      posted in Framework
      T
      turigeza
    • RE: [Solved] PWA force refresh when new version released?

      @ssuess Which one are you using right now ? The last one posted here …
      https://forum.quasar-framework.org/topic/2560/solved-pwa-force-refresh-when-new-version-released/31?_=1605731186657

      forceSWupdate () {
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.getRegistrations().then(function (registrations) {
            for (let registration of registrations) {
              registration.update()
            }
          })
        }
      }
      
      posted in Framework
      T
      turigeza
    • RE: Use my own css

      @acros

      You can see what becomes of q-layout in chrome inspector.

      Screen Shot 2020-11-09 at 16.19.17.png

      If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.

      As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?

      So the options are

      a, Style your custom component so it is compatible with q-layout.
      b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
      c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

      posted in Help
      T
      turigeza
    • RE: Use my own css

      @acros q-layout takes elements such as q-page, q-header, q-header, q-drawer name it.
      Not a single div. Your div is not visible because overflow is hidden on one of its parents. class="q-layout-container overflow-hidden"
      You should follow the examples in the doc and use the layout builder to start with. It will save you a lot headache.

      Or you could not use q-layout and use your own layout. But you will loose out most likely on other components which play well with q-layout.

      posted in Help
      T
      turigeza
    • RE: Q-input border color on focus

      @dobbel Just as @bkirvin said above.

      I use Chrome inspector to find what style apply to the element.

      I click on the divs in the source tab and look at the computed styles. I start on the outmost div and work my way in. As I click on the divs I am observing the computed styles and looking for “borders” or “outline” styling.

      If I can not locate where they come from I start looking at the after and before elements too.

      Once I located the styling I open it and copy paste the exact css which is targeting the element and use that to add my own style.

      Screen Shot 2020-11-08 at 19.28.16.png

      Oh and sometimes it helps if you force element state like in the case of hover you can not hover the object and navigate the source code at the same time.

      Screen Shot 2020-11-08 at 19.38.32.png

      posted in Help
      T
      turigeza
    • RE: Quasar CLI partial builds

      @metalsadman Great suggestion ! Thank you! Nice to end up with choices : )

      posted in Help
      T
      turigeza
    • RE: Quasar CLI partial builds

      @beets Super kind ! Thank you! I report back once I had a go at it.

      posted in Help
      T
      turigeza
    • RE: Quasar CLI partial builds

      @beets Thank you. It is exactly this sort of info I was after : ).

      posted in Help
      T
      turigeza