Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. embluk
    E
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 8
    • Best 0
    • Groups 0

    embluk

    @embluk

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

    embluk Follow

    Latest posts made by embluk

    • RE: Is it possible to make the select input scrollable?

      To improve the look and style I changed the CSS a little:

      .inputStyle .q-field__inner .q-field__control
      {
          padding-right: 0;
          min-height: unset;
      }
      
      .inputStyle .q-field__inner .q-field__control .q-field__control-container
      {
          margin-top: 16px;
          margin-bottom: 16px;
          min-height: unset;
      }
      
      .inputStyle .q-field__inner .q-field__control .q-field__control-container .q-field__native
      {
          padding: 0;
          padding-right: 12px;
          min-height: unset;
          max-height: 130px;
          overflow-y: auto;
          overflow-x: hidden;
      }
      

      Centres the scroll bar and adds space above and below the chips and only shows scroll bar when you go past the max height. Starts off with the same height as normal at 56px.

      posted in Help
      E
      embluk
    • RE: Is it possible to make the select input scrollable?

      @metalsadman Thanks for the suggestion but it doesn’t work for me? I’ve kind of got it working with the following CSS:

      .inputStyle .q-field__inner .q-field__control
      {
          padding-right: 0;
      }
      
      .inputStyle .q-field__inner .q-field__control .q-field__control-container
      {
          max-height: 180px;
          overflow-y: scroll;
          overflow-x: auto;
      }
      

      But it would be a great addition to the select inputs I think, natively.

      posted in Help
      E
      embluk
    • Is it possible to make the select input scrollable?

      At the moment the select input when you add new values to it will keep expanding, for example:

      e15ce53d-130c-4d25-90fc-b94fe622117b-image.png

      And when I put some styling on the input to include a scroll:

      a281a00d-7c6b-44be-b2d2-1e363376984c-image.png

      Am I missing something or is there a way to do this with the framework and select inputs? Making it so the select input has a max-height and a scroll bar because otherwise it will keep expanding? I don’t mind the select input expanding but I have a use case where I need to control the max height.

      posted in Help
      E
      embluk
    • RE: Using a q-select I get the error: Cannot read property 'dropdown' of undefined?

      Seems like it was because I had the font awesome link from them but not the specific quasar font awesome JS file:

      <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.7/dist/icon-set/fontawesome-v5.umd.min.js"</script>
      
      posted in Help
      E
      embluk
    • Using a q-select I get the error: Cannot read property 'dropdown' of undefined?

      I am following the example of: https://quasar.dev/vue-components/select#Example--Single-vs-multiple-selection

      But when the page loads I get the error Cannot read property 'dropdown' of undefined, my code is exactly the same, so I am unsure why I get this error? Any ideas where I am going wrong?

      posted in Help
      E
      embluk
    • RE: How to call QStepper API methods?

      @metalsadman Oh yeah I see the example now, I totally missed it!

      Thank you!

      posted in Help
      E
      embluk
    • How to call QStepper API methods?

      I’m new to VueJS and this Quasar framework.

      I am using the Stepper and I have a button outside the stepper component and I want to use it to go to the next stepper panel but how do I call the next method inside a new Vue(...) call?

      I am referring to https://quasar.dev/vue-components/stepper#QStepper-API

      posted in Help
      E
      embluk
    • How not to use global CSS style from Quasar, only in components

      Is it possible to turn off global CSS styles that the Quasar CSS file uses and only use styles for when a component is used? For example, I don’t want Quasar to change any h1 or p tags globally, only inside a Quasar component when I use one?

      I am using the Quasar UMD/ CDN install but cannot find an option or configuration for what I am trying to do? Ideally I don’t want to have to change everything manually by overriding styles.

      Thanks, Luke

      posted in Help
      E
      embluk