Change Height of Q-Toolbar and Styling Q-Select Label

[fadhilradh]

Hi

I want to change the height of the top toolbar so it become shorter. I am having 2 q-toolbars while the bottom has inset property

Also I want to make the label for Q-Select become bold and change its font size.

How to achieve these two things ?

Thanks

[dobbel]

@fadhilradh

You can use chrome debugger to fiddle with the css. If you want better support please create a codepen.io to demonstrate your issue.

[fdlmhmd29]

@fadhilradh said in Change Height of Q-Toolbar and Styling Q-Select Label:

Hi

I want to change the height of the top toolbar so it become shorter. I am having 2 q-toolbars while the bottom has inset property

Also I want to make the label for ‘Kategori’ become bold and change its font size.

How to achieve these two things ?

Thanks

Hello, has your problem been resolved? If not, follow the instructions below.

Change Q-Toolbar Height
Read again the documentation about CSS Spacing Classes here.

For instance:

<q-toolbar class="q-pt-sm" />

pt is Padding Top and sm is Small.

Change the Font Thickness
Read again the documentation about Typography here.

For instance:

<q-toolbar-title class="text-weight-medium" />

Also, as @dobbel said, try to create a demonstration of the problem on Codepen for better support.

Good luck, hope it helps.

[fadhilradh]

Thanks for your answers @dobbel @fdlmhmd29

I have resolved my problem for the height of Q-toolbar

as for your answer @fdlmhmd29 :

For instance:
<q-toolbar-title class=“text-weight-medium” />

My problem is not the styling of toolbar title but the styling of Q-select label.
You can refer to my screenshot.
I want to change its font color, size and weight

So far I have tried to edit css via Chrome’s dev tool but i’m not able to accomplish it yet