How to reduce toolbar height

[vespinasgmailcom]

I just replied to a similar post in the Ionic3 section, but I guess it would be a good idea to post the same question here. I’ve been looking around here and in google for an answer, but normally people want to INCREASE the header or toolbar’s height, no reduce it.

I have a header with 2 toolbars, and I am trying to reduce the height of the 2nd toolbar to 24px. This is how it looks normally with the toolbar at its normal size:

Then I applied a class to the ion-toolbar tag:

.app-header-statusbar {
	font-size: 80%;
	vertical-align: middle;
	max-height: 24px !important;
}

And this is how it looks afterwards:

Toolbar height is affected alright, but the content is not adjusting automatically. Any ideas of how to get the inner elements realign to the new height?

TIA

[MeHuLY123]

use this on your variable.scss file:

.toolbar-ios, .toolbar-md, .toolbar-wp
{
min-height: //as you want your toolbar height;
}

[crmontiel]

Try this.

ion-toolbar{
  --min-height:50px!important;
}

You can play with value.
This found for me

Read more in ionic docs for toolbar

[vespinasgmailcom]

If I am not mistaken, that set will affect all my toolbars, and I just want to affect a specific one. Also, min-height solutions won’t work because I want to make my status bar smaller, not bigger. I’ve tried with max-height, as I stated in the original post, and the height is actually reduced, but the content of the toolbar is not being re-centered according to the new height.

[crmontiel]

vespinasgmailcom
The code that I shared works perfectly for what you want to do, it is only to use the logic of where to apply it, if you want the page of the list of users to see smaller just add that code to the style sheet of that component, it is so simple and logical to do that, and when it comes to making it smaller it is the same you just have to play with the value of the --min-height:50px!important;

You don’t have much experience in style sheets, right?

paste this code in the component style sheet where you want to make the toolbar toolbars

ion-toolbar{
  --min-height:4%!important;
}

Change the number 4 for you size 2 3 or whatever

If you need help to do so let me know and I will explain remotely where you should paste it in case you do not have the knowledge of it.

Greetings

[vespinasgmailcom]

@crmontiel

ion-toolbar{ --min-height:4%!important; }

Thanks for your help. Yes, I have basic knowledge about CSS and even less on sass. Your suggestion worked partially. The trick was using the --min-height var instead of the min-height css property. I used a class instead of the ion-toolbar tag in order to target only the toolbar I wanted to shrink (I understand that the change would work even applying it to the ion-toolbar, since the other toolbar is taller anyway, but I preferred to target the toolbar specifically):

.app-header-statusbar {
	font-size: 80%;
	vertical-align: middle;
	--min-height: 24px !important;
}

Now, I say it worked partially because even using !mportant, toolbar height wont go less than 38px:

Anyway, it looks a lot better now than before:

Thanks again for your help and patience

[crmontiel]

Perfect.

Saludos desde colega
i check you profile.

[vespinasgmailcom]

jajaja saludos, hermano.