Scaling down the angular toolbar

Question

Hello Syncfusion team,I am trying to lower the height of the syncfusion toolbar. I tried to reproduce your solution from the following thread: https://www.syncfusion.com/forums/149519/toolbar-height But this way, it does not scale down the whole toolbar (including texts and icons). How can I achieve this? (A 50% scale of the the toolbar height for all relevant elements)Thanks in regard,Jonas Czeslik

Nevitha Ravi · Accepted Answer

Hi Jonas, 

We are glad to inform you that your requirement ‘toolbar with minimum height’ has been achieved at sample end itself with the below CSS. Since by default the minimum height of the toolbar is 42px, we need to use the following CSS to reduce the toolbar height less than its minimum height at sample end. Please try the following sample and get back to us if you need any further assistance. 

Sample: https://stackblitz.com/edit/toolbar-minimum-height-sample?file=app.component.html 
UG: https://ej2.syncfusion.com/angular/documentation/toolbar/style/ 

.e-toolbar { 
  min-height: 10px; 
} 
 
.e-toolbar .e-toolbar-items { 
  min-height: 10px; 
} 
.e-hscroll .e-scroll-nav { 
  min-height: 10px; 
} 
.e-toolbar .e-toolbar-items .e-toolbar-item { 
  min-height: 10px; 
} 
.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn { 
  height: 20px; 
  line-height: 20px; 
} 
.e-toolbar .e-tbar-btn .e-icons.e-btn-icon { 
  font-size: 10px; 
} 
.e-toolbar .e-tbar-btn .e-tbar-btn-text { 
  font-size: 10px; 
} 
e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text { 
  height: inherit; 
} 
.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon { 
  line-height: 20px; 
  min-height: 20px; 
} 
 

Regards, 
Nevitha

Hareesh Balasubramanian · Answer

Hi Jonas, 

Greetings from Syncfusion Support..! 

We have validated your shared query and suspect that your requirement is to reduce the size of the items of the Toolbar component and for that, we have prepared a sample using CSS, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-toolbar-customized-sample?file=app.component.ts 





.e-toolbar .e-tbar-btn .e-icons.e-btn-icon { 
  font-size: 12px; 
} 

Kindly try the above solution and if we misunderstood your requirement, kindly share more details like the use case scenario/image/video demo of your requirement/Toolbar rendering code snippets of your requirement which would help us to provide a prompt solution at the earliest. 

Regards, 
Hareesh

Jonas Czeslik · Answer

I dont know, if I am doing something wrong, but I cannot seem to make the custom css parts have an impact on the style of the toolbar. Or more precisely, I added a text to the toolbar items in your sample and added the css statement, but nothing changed visually (neither by adapting the height nor the font-size).

Same goes for the .e-tbar-btn .tb-icons {} Neither height nor font-size have a visual impact here.

All in all, I want the complete toolbar to scale down because if there is more than one toolbar, it would be cool, if they dont have the standard 42(?)px height. But that also requires that not only the toolbar scales down but also the toolbar texts and the toolbar icons. And that I cannot really accomplish

Satheesh Kumar Balasubramanian · Answer

Hi Jonas,

Thanks for your update.

We have validated your reported query at our end and suspect that your requirement is to customize the height of the Toolbar component and text and icon within it. For that, we have prepared a sample using Height property, which can be viewed from the following link.

Sample: https://stackblitz.com/edit/angular-toolbar-customized-sample-lbpjyq?file=app.component.html

<ejs-toolbar height="60px">

....

</ejs-toolbar>

Kindly try the above solution and if we misunderstood your requirement, kindly share more details about your requirement like image reference to serve you better.

Regards,

Satheesh Kumar B

Jonas Czeslik · Answer

This does not work either. In your case you made the toolbar higher, which works fine. But I want to make it smaller. If I am trying to this by adapting the toolbar height to "20px" for example, it does not work out. There seems to be a minimum height. Also, the size of icons and texts are not scaling with this method and lastly, I am using dynamic toolbar elements that I bind to the ejs-grid [toolbar] property. So I have not such access to the e-toolbar html tag.

Satheesh Kumar Balasubramanian · Answer

Hi Jonas, 

  

Thanks for your patience. 

  

We have validated your reported query at our end. We have confirmed this as a bug and logged the defect report "Toolbar Height customization not working less than minimum height value" which can be tracked from the following link. 

  

https://www.syncfusion.com/feedback/22252/toolbar-height-customization-not-working-less-than-minimum-height-value 

  

The issue fix for this defect will be included in our weekly patch release rolled out by the end of February 2021. We would appreciate your valuable patience until then. 

  

Regards, 

Satheesh Kumar B

Jonas Czeslik · Answer

Thanks a lot!It would be very cool, if the toolbar texts and icons automatically adapt its sizes, when the toolbar gets a lower height, so that only the height change would be necessary

Vinitha Devi Murugan · Answer

Hi Jonas, 

Thanks for your update.  
  
We will consider your scenario when we fixing this fix. 

Regards, 
Vinitha