No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. KorbenDallas
    K
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 12
    • Best 0
    • Groups 0

    KorbenDallas

    @KorbenDallas

    0
    Reputation
    116
    Profile views
    12
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    KorbenDallas Follow

    Latest posts made by KorbenDallas

    • RE: Long text does not overflow properly in dropdowns and inputs with Edge

      actually scratch that…now we dont see the labels when there is text in the inputs

      This works though but no ellipsis
      .q-select,
      .q-datetime-input {
      overflow: hidden;
      }
      .q-input{
      overflow: hidden;
      }

      posted in Framework
      K
      KorbenDallas
    • Long text does not overflow properly in dropdowns and inputs with Edge

      So yeah the layout breaks pretty easily in Edge. I have a partial fix but is there something in the books for this?
      Edge
      0_1547574890647_43891fc2-63e0-43a6-963b-a032c393ddac-image.png
      Chrome
      0_1547574914795_fb5826d5-60d6-4ba2-8c64-a54a8eeaf715-image.png

      Edge
      0_1547575054373_2c91f5d3-3286-43ae-aa58-1664807a5730-image.png

      Chrome
      0_1547575100442_ae169c98-76dc-42ae-b684-07ea312914c9-image.png

      A partial fix that seems to work.
      .q-datetime-input div.q-if-inner.col.column {width:calc(100% - 24px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;}

      .q-input div.q-if-inner.col.column {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width:100%
      }
      result
      0_1547575695813_ff1b3596-757a-4b4c-a1b4-114312e544e6-image.png

      posted in Framework
      K
      KorbenDallas
    • Printing with Edge adds a caret in each input control.

      As seen in the following image of the print preview when trying to print this page https://quasar-framework.org/quasar-play/android/index.html#/showcase/forms/input

      Is there a quick fix for this?

      0_1547142550678_5907f591-27e5-4a1a-a02f-6f92ea68fb59-image.png

      posted in Framework
      K
      KorbenDallas
    • RE: Q-Tabs and vee validate

      @metalsadman Just a note, your example does not seem to work with edge or ie11 (I have to support them),
      in that case I had to select each tab in their own nextTick and the process is quite visible on IE11.

      posted in Framework
      K
      KorbenDallas
    • RE: Q-Tabs and vee validate

      @metalsadman said in Q-Tabs and vee validate:

      @KorbenDallas
      After sometime, I got it to work with veevalidate :).
      Here you go https://codesandbox.io/s/ox893063w9.

      Well thanks! But sadly this still isnt it. I tweaked it to show the issue.

      https://codesandbox.io/s/wq170rmq9k

      First tab has nothing and is the default tab.
      Click the save button to validate the form no errors are displayed but it should because there are errors in the other tabs.

      Now click all the tabs(I enabled keep-alive so they dont disappear from the dom) and then click save. All the errors are counted.

      The hack I did for now (not shown here) is to visit all the tabs on load, that’s 8 tabs in a series of nextTick calls.

      posted in Framework
      K
      KorbenDallas
    • RE: Q-Tabs and vee validate

      @zeidanbm said in Q-Tabs and vee validate:

      @korbendallas Okay now I understand what you want. You are probably using v-if on the tab and that’s why the html is not rendering. You should use v-show for this type of things that involve tab switching(this way the html will render with display none). Then the validation should work, otherwise you will have to implement that logic yourself. Also, if you want to seperate the validations you can use validation scopes and that will give you back validations in seperate errorbags for each tab.

      No v-if from me. Its the default behaviour of the tabs. Go check out the html
      https://quasar-framework.org/quasar-play/android/index.html#/showcase/navigation/tabs/tab-panes
      There are 3 tabs in the first example but this is what you get.
      <div class=“q-tabs-panes”>
      <div class=“q-tab-pane animate-fade-left”>Emails tab</div>
      <!---->
      <!---->
      </div>

      posted in Framework
      K
      KorbenDallas
    • RE: Q-Tabs and vee validate

      edit: After looking into vee validate, I think it’s not what you should use in this case, since it’s template based, unlike vuelidate which is model based. So yeah, I can see why it’s not working in q-tabs, you should consider vuelidate in this case if you want to use q-tabs, there might be some tricks to make it work with vee-validate but I think it will add more complexity at least for this case tbh.

      Its a tradeoff, we liked the simplicity and the integrated localization of veevalidate on the other hand I prefer the model focused way vuelidate implements.

      posted in Framework
      K
      KorbenDallas
    • RE: Q-Tabs and vee validate

      Thx for the replay but that’s not the issue.
      On this one page lets say Tab-2 has required fields if the user does not click on tab-2 at least once before hitting save they fields from that tab wont be validated because they dont exist, the html of Tab-2 is something like <----> once you click it then the html will exist

      posted in Framework
      K
      KorbenDallas
    • Q-Tabs and vee validate

      I have a form with many tabs and some required fields in them. The problem is that they wont validate unless the user already opened the tab since the tabs are not rendered until they are opened. Half the solution was using keep-alive so they dont disappear when the user click an other tab. The other half is I click all the tabs by code on first load, is there not an option I could use instead of this ugly hack?

      posted in Framework
      K
      KorbenDallas
    • RE: Should I not have basic vue intellisense in vue files? I have it vue cli projects but not in quasar cli.

      Well for those interested I got it working. I had to add “vue” in the dependencies section in package.json then Vetur gave me vue intellisense in .vue files.

      posted in Help
      K
      KorbenDallas