Got it…It was a mix between code-positioning and the <q-page-container> -.-

Hi there

I’m trying to find a nice way to display user messages and have come up with the following:

<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="userMessageDialog" position="top">
  <q-card style="width: 350px">
    <q-linear-progress :value="0.6" color="pink" />

    <q-card-section class="row items-center no-wrap">
      <q-btn flat round icon="error" />

      <q-space />

      <div>
        <div class="text-weight-bold">User Message</div>
        <div class="text-grey">This is the message. Very important. Do read it.</div>
      </div>
    </q-card-section>
  </q-card>
  </q-dialog>
</div>

What I get is this:

Why is the dialog using space on the page below? The white segment on the top shoudn’t be there…

Cheers,
Michael

Anyone? I’m kinda stuck on this one…Is there another (intended) way to define global variables to be used for styling the app?

Hi

I am trying to add my own custom sass variables to ‘quasar.variables.sass’, like $dark-primary : #ff0000 but for some reason they’re ignored. Judging by the documentation, this should work out of the box.

Note: The custom branded colors (i.e. primary, secondary and such) work fine.

Any ideas?

Cheers,
M.

Here’s the full quasar.variables.sass file for reference:

// Quasar Sass (& SCSS) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

// NX custom colors

$primary   : #364552
$secondary : #6A7C89
$accent    : #ad2bc4

$positive  : #21BA45
$negative  : #e84a3f
$info      : #31CCEC
$warning   : #F2C037

$dark-primary   :   #ff0000

@s-molinari Yep, exactly like that! Thanks

@s-molinari yes, sorry! It’s <q-input type="file" .../>

Hi there

This seems to be trickier than I thought. I would like to trigger a file selection dialog by pressing the button as so:

The result I want from that is the path to the local file.

I have tried a few online examples of using the q-field with type=“file” and then hiding it but wasn’t able to get it working. Also I found the approach overly awkward. What is the proper way of doing this?

cheers,
Michael

@metalsadman I have read those. I am specifically looking for recommended extensions that provide the required functionality and work well with quasar/vue. I’ll have another look, though - I might have missed sth.

Hi there

I’m currently tackling the security aspects of my app. What I need is stuff like secure hashing (passwords), encryption / decryption, etc.

Is there a recommended extension / plugin / addon that works nicely with Quasar? Any best practices here?

Cheers,
Michael

@metalsadman Thanks, I wasn’t aware that there is a ‘hasError’ too.