Posts made by sandroden

Hi,
is there a tool to generate documentation same functionalities as in quasar.dev, ie: API in a simple to browse place and examples?
I’m mainly a Python programmer and in that language Sphinx is used by most people due to its great instrospection possibilities. What is there available for vuejs/quasar containers?

Thanks @rab, I understand that setting the color on the p element makes a difference but is totally impracticable when the content comes from the user via an editor.

I don’t use any app.sass con (btw I use stylus and quasar.variables.stylus), but that doesn’t seem a solution to me.

The main problem is that text-color applied on the parent will have low impact in some circumtancies, links in particular as those are already directly styled by the user agent, so that to style them the only solution I see is to address them directly (a {color: ...}) or with the class text-color.

In my original case I wanted to style buttons in a router-link in the toolbar and the only option I had was to attach color to each of them.
I I use:

* {
   color: brown ;
}

the style is set everywhere and you cannot almost override (unless inline). Even `<q-btn text-color=“red”> will fail. I you use

body {
   color: brown ;
}

everything seems ok apart from ‘a’ element, in that case the color is blue… (I guess a browser’s default). Adding body a makes it almost ok with something I have not been able to understand. I cant undertand why a button within a router link and a button with to behave differently.

Links in the drawer + q-list style correctly if using text-<color>. A codesandbox example can be found here.

I solved it by setting color on body element. This curiously leave non styled the menu button (toolbar > div > router-link > q-btn) that gets a purple color on firefox and a blue color on chrome. I wasn’t able to find where does it come from and why. Any hints?

Hi,

I’d like to set a color for fonts site-wise. I used to do that in App.vue in non scoped style section for p element, h* elem…
I just realized that setting a non-scoped style section there will prevent the possibility to use eg: text-color class that will loose against the specificity of a p element. This is demostrated in this codepen (independent from quasar).

Is there a working way to set a default color that does not brake the possibility to use text-color classes?

sandro

Thanks @metalsadman, that is exactly what I referred to with using explicitly. I hoped there was a way to ask q-btn :to to behave the same way, that would keep the syntax very symple.

Hi,

I’m trying to style a q-btn in a toolbar with :to prop as a way to navigate. While q-list item with :to prop set css class a.q-router-link--active--exact that allow an easy styling, q-btn does not. Am I using the wrong element for that purpose? How am I supposed to detect which is the active button?

My code in MyLayout is roughly:

<q-toolbar class="q-pt-md bg-primary text-grey-10">
        <router-link to="/"> <q-img ...  /></router-link>
        <q-space />
        <div class="gt-sm">
          <q-btn stretch flat label="base scout"  size="1em" :to="{name: 'base'}" />
          <q-btn stretch flat label="info"  size="1em" :to="{name: 'info'}" />
          <q-btn stretch flat label="foto"  size="1em" :to="{name: 'foto'}" />

Clearly I can use router-link explicitly and that works but :to on the button is a terse and nice syntax. I’d like to understand if the missing css class is the desired behaviour or not.

Thanks in advance
sandro

I solved this by forcing the offset in the scrollToElement function. I subtract the offsetTop of the element that has the “scroll” class.
So my final working function is:

scrollToElement (el) {
  const target = getScrollTarget(el)
  const offset = el.offsetTop - target.offsetTop // adjust the scrolling
  const duration = 100
  setScrollPosition(target, offset, duration)
}

UPDATE: The adjustment (- target.offsetTop) is only needed if the scrollable element is not positioned. In that case el.offsetTop is referred to the offsetParent that is the closest positioned ancestor.

Hi,

I’m trying to setup a page with a scrollToElement . I have not really understood how I should prepare the parent. I managed to obtain a scrollToElement correctly working if the div with “scroll” class is the outer div in the content area.

If I have a header (where I place the links that I’d like to stay visible) the scroll has a wrong offset.
I prepared a codesandbox to show the two different situations.
Which is the suggested solution for this kind of layout/request?

thanks in advance
Sandro

Thanks Scott! I don’t even remember why that was there…
Your help as always is incredibly valuable!

Hi,

I don’t understand how scrollbar works in tables.

If I set the width and is less than required to represent the data, the scrollbar appears. If I don’t set the width, the page just enlarges beyond the left side and the scrollbar of the page appears that makes the pagination and search field to be hidden.

What’s the normal way to set the width to “the max that is visible” ie: 100vw - the width of the drawer(s) (unless they are in overlay mode…

I have a codepen here, in case it’s not clear

sandro

This link is now broken. I have the same request for quasar 1+. I’m no able to find a pre-build solution to limit the width in a responsive way… but I guess there must be one!

@Allan-EN-GB I understand that belongs to the devland, but since in no way there would be a benefit to run it twice, needing to force any AE author to check this would be not so clean. The conf.boot.push('axios.js') would never have any meaning if axios.js is declared in boot array. In my humble opinion, a function that takes care of checking if the file is already in the boot array and in case it is not, i adds it (ie: writes it in the quasar.conf.js) would make the boot process more clear.
Currently, it’s not enough to look at the boot in order to know what will be fire, you need to know each installed extension. That said, this is just the opinion of a quasar enthusiast that needs to practice more with this great game!

If I can dare add a newbie perspective, it would be nice if conf.boot.push('<name>.js') only added it if not already present. This way I could also decide a customized boot order. Probably better would be to write to quasar.conf.js at install time so that stays very clear which resources are called and used. This holds for components and directives as well.

Ok, thanks. In the meanwhile, I add some info to clarify my situation. The auth-token-based extension added 3 boot files, axios was already there and the extension prompted me to ask if I wanted to change or keep the original version. The app didn’t modify quasar.conf.js. I automatically thought I was supposed to add the ini files in the variable boot:

 boot: [
      // I see no reason why I should comment these boot file
      // but they are run anyhow and double run it is "evil"
      'i18n',
      // 'axios',
      // 'auth',
      'notify-defaults'
      // 'vuelidate'
    ],

just to discover that adding it manually made quasar complain that store getters and routes where already present.
So the first thing that puzzles me is: what is the mechanism that makes it run those boot file if not declared in boot array?
Currently, with axios, auth and vuelidate commented everything works correctly. They must be invoked by some mechanism I’m not aware of…

Hi,

while debugging why a getter was declared as already present I realized that some of my boot files are run twice. Namely axios, auth and vuelidate. Commenting them in quasar.conf.js fixes the “double run” and each file in boot is called (but i18n and notifyDefault need to be named in quasar.conf.js to be called.

This all happened after I installed auth-token-based extension that (ta-da!!) installs or configure those boot files. Is there a way to implicitly call a boot file other than declaring it in quasar.conf.js, that I am not aware of? Do extensions do something implicit/magic with boot files? It seems pretty far from Quasar ultra explicit and clean way to declare boot sequence, but I can’t explain it in other ways…

Any hint is appreciated.

Thanks, in fact body-cell-[name] is what I used and it’s a very smart solution (as almost any single solution you adopted in quasar *;-)

Hi Scott, I prepared the codepen but as I finished I realized the problem was that I didn’t add the field attribute of the column for which I declared the slot. Once added it everything works correctly (the codepen doesn’t sort, but my real app sorts correctly).

An unrelated question on the same example: I used slot:body-cell as a second try. In the first place I tried to use a function in the field attribute but since I generate html (an <a> tag) it rendered the html as code. Is the slot the correct/only way or I could have used some function to make html accepted?

sandro
*:-)

I’m configuring a q-table with sorting and pagination. All works correctly if I don’t use slot:body-cell-... at that point the data are correctly represented but the sorting and filtering doesn’t work correctly: filtering doesn’t “see” the fields that have been overwritten and sorting doesn’t eather work (the arrow appears but the sorting only happens incorrectly on the first click).

Is there a way to make it work? I can produce a codesandbox example if needed.

sandro
*:-)

Thanks, I read it when but clearly w/o enough attention… I tested it now and in fact within quasar.conf.js process.env sees already the variables. So the problem seems related to qenv that doesn’t propagate the env variable early enough. Do I interpret it correctly?