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;
}

So yeah the layout breaks pretty easily in Edge. I have a partial fix but is there something in the books for this?
Edge

Chrome

Edge

Chrome

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

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?

@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.

@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.

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

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.

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

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?

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.