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,
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