Alert appears on div (initially q-banner) on tab switch

[Chris11]

Hello,

in my app I have no alert used whatsoever.

In the two tabs I created, one q-banner always gets a weird css if I change out to a different tab and then back in. I cannot explain it why this happens.

I don’t know why it adds this role=“alert” in the html, which I didn’t intended

I’d appreciate a useful hint.

<div class="MatrixAuswahlBereich">
      <q-banner>  
        <p id="matrixErzeugenHeading"><b>Matrix über Eingabe erzeugen:</b></p>
        <q-form @submit="erzeugeMatrix">
          <div id="matrixErzeugen1">

[beets]

@chris11 It looks like q-banner always has role=“alert” on it. It’s a bit hard to figure out what’s going on based on your screenshots though. It would be helpful to take even a video, or better yet some sort of reproduction on codepen.

One thing I notice, is that you’re wrapping a <q-form> in <q-banner>, which on the surface, I would say that’s not what you intend to do.

[metalsadman]

QBanner used to be QAlert in older versions. I think you should file a ticket at the repo with an explanation why it should be change, otherwise you probably should adjust your code and use something like a QCard instead.

[Chris11]

Thank you @beets and @metalsadman. I use qcard instead and it works without any problems!
Actually I never filed a ticket, so I wouldn’t know how to do it. Maybe I’ll find a tutorial on that

[dobbel]

@chris11

Actually I never filed a ticket, so I wouldn’t know how to do it. Maybe I’ll find a tutorial on that

The Quasar community will be grateful for your contribution!

Here’s some info about how to post an issue:
https://docs.github.com/en/github/managing-your-work-on-github/creating-an-issue