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
    1. Home
    2. javierabadia
    J
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 8
    • Best 1
    • Groups 0

    javierabadia

    @javierabadia

    1
    Reputation
    412
    Profile views
    8
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    javierabadia Follow

    Best posts made by javierabadia

    • predictable order of CSS

      Hi,

      In ‘dev’ mode, my component styles always come after the quasar styles. They take precedence.
      However in ‘build’ mode, quasar styles are compiled after the style in my components.

      This causes problems in code like this:

      <div class=“card my-card-style”>
      …
      </div>

      .my-card-style {
      margin-bottom: 50px;
      }

      because in ‘build’ mode this custom style is included before quasar styles and therefore overriden by .card styles

      Alternatively, how can I modify the config of webpack to put quasar css styles in it’s own separate bundle?

      Thanks!

      posted in Framework
      J
      javierabadia

    Latest posts made by javierabadia

    • MyComponent > Q-Modal or vice-versa?

      Hi,

      We are building a view component that needs a couple of medium-complexity modal dialogs for selecting options.

      We are struggling to find a way to correctly encapsulate the logic for the modals in their own components: any advice?

      OPTION A:

      MainView.vue
      <template>
          ... main view markup
          <my-options-modal>
          </my-options-modal>
      </template>
      
      MyOptionsModal.vue
      <template>
        <q-modal>
            ... modal content here
        </q-modal>
      </template>
      

      OPTION B:

      MainView.vue
      <template>
          ... main view markup
          <q-modal>
            <my-options-modal-content>
            </my-options-modal-content>
          </q-modal>
      </template>
      
      MyOptionsModalContent.vue
      <template>
            ... modal content here
      </template>
      

      Option A seems cleaner from the MainView point of view, but then the logic and code to open and close the modal is a bit too complex, because MyOptionsModal has to be a bridge between MainView and QModal.

      Option B simplifies the opening/closing handling, but then the encapsulation is not so clean.

      Any advice? Any best practices on how to create complex modals with logic inside?

      Thanks!

      posted in Framework
      J
      javierabadia
    • predictable order of CSS

      Hi,

      In ‘dev’ mode, my component styles always come after the quasar styles. They take precedence.
      However in ‘build’ mode, quasar styles are compiled after the style in my components.

      This causes problems in code like this:

      <div class=“card my-card-style”>
      …
      </div>

      .my-card-style {
      margin-bottom: 50px;
      }

      because in ‘build’ mode this custom style is included before quasar styles and therefore overriden by .card styles

      Alternatively, how can I modify the config of webpack to put quasar css styles in it’s own separate bundle?

      Thanks!

      posted in Framework
      J
      javierabadia
    • q-tooltip background color

      Hi,

      (working with v0.13.4)

      Is there a way to style q-tooltips? I’d like to change the background color and font-size

      <q-tooltip class=“bg-primary”>
      my tooltip text here
      </q-tooltip>

      doesn’t work, because the span.q-tooltip element doesn’t get the ‘bg-primary’ class once inserted as a child of the <body>

      Thanks!

      posted in Framework
      J
      javierabadia
    • RE: django + quasar

      We already have a Django + AngularJS app running and we want to migrate client side to Vue.js (we use django-rest-framework btw)

      The integration I’m more interested in is the webpack build process and developer experience. In the example that I mentioned above (https://github.com/rokups/hello-vue-django) they use a django module to detect when webpack has finished compiling and update the django templates with the bundle names just created. They also support hot module reloading: django serves templates through one port (lets say 8000) and webpack communicates with the running app through another port (8001) to push the module replacements.

      My main difficulty here is that Quasar’s webpack configuration structure is really different: I need to understand it and see where I need to add what, and before going that way I’d rather ask for others experience before.

      posted in Help
      J
      javierabadia
    • django + quasar

      Hi,

      I want to create a fullstack app with Django + Quasar.
      Ideally I’d like to keep the developer experience (webpack, hot reloading) while serving everything from a Django app
      Is there any reference I can use?

      I’ve been successful integrating Django + Vue such as in https://github.com/rokups/hello-vue-django

      Awesome framework btw!

      posted in Help
      J
      javierabadia
    • RE: more than 5 responsive columns

      great to know, thanks!

      posted in Help
      J
      javierabadia
    • more than 5 responsive columns

      Hi,

      With the responsive grid layout classes (width-1of5, etc) I’m wondering why there is a limit of 5 columns.
      Doesn’t it make sense to have elements that are width-1of12 ?

      How would I create such a layout?

      Thanks!

      posted in Help
      J
      javierabadia