Turn off rounded q-tabs?

[Tim]

Hi,

We’re trying to seamlessly add some tabs under a toolbar… the tiny rounded corners on the top are turning into eye-splinters, any thoughts how we could have them square?

Some cleverness with “panes-container-class” ?

Many thanks

Tim

[genyded]

Inspect the element in the browser debugger and add css to set the border-radius to zero?

[Tim]

Thanks @genyded, I was hoping for a more “Quasar way”, but I’ll try your suggestion in the meanwhile!
Tim

[s.molinari]

Are you using the tabs in a layout? That is how to get the “Quasar way” tabs without any rounded edges.

https://quasar-framework.org/components/layout.html

Notice the play app on the right. There is the toolbar then tabs underneath it without any rounded corners.

If you are attempting to go without the layout, you’ll need to jimmy it with css as sugggested.

Scott

[genyded]

There is a Quasar ‘no-border’ class, but haven’t tried it on QTabs.

[Tim]

Hi,
Thanks @s-molinari , we are using tabs in a layout
In the end the team went with @genyded 's suggestion:

.q-tabs {
border-radius: 0px;
}

…which has done the trick!
Thanks both.

[s.molinari]

This was also recently reported as a bug.

https://github.com/quasarframework/quasar/issues/2608

Scott

[Tim]

@s-molinari Thanks, I’ve added my +1