Igniteui-angular: [igx-grid] Toolbar height for displayDensity = 'compact' is the same as the one for displayDensity = 'cosy'.
Description
Toolbar height for displayDensity = 'compact' is the same as the one for displayDensity = 'cosy'.
- igniteui-angular version: 7.3.3
- browser: N/A
Steps to reproduce
Result
Toolbar height for displayDensity = 'compact' is the same as the one for displayDensity = 'cosy'.
Compact : NG
Cosy : OK
Comforable : OK
Expected result
Toolbar height for displayDensity = 'compact' should be smaller than the one for displayDensity = 'cosy'.
Attachments
None.
tkiryu
All 11 comments
It seems that the compact toolbar height is same as the cosy one. It may be one of the causes.
tkiryu
on 6 Jun 2019
@tkiryu , the igxButtons that are used in the toolbar have a displayDensity property as well and it is bound to the displayDensity of the grid. This means that the button itself (even when it is used as just a button outside the grid) becomes smaller (with smaller height) when changing the displayDensity to 'compact'.
tachojelev
on 6 Jun 2019
@tachojelev , thank you for explaining.
the igxButtons that are used in the toolbar have a displayDensity property as well and it is bound to the displayDensity of the grid.
Yes, I understand that this is the reason that button height in the toolbar gets smaller.
As I said yesterday,
It seems that the compact toolbar height is same as the cosy one. It may be one of the causes.
This issue might be not about button height but toolbar height. Maybe, I should change the issue title like this.
Toolbar height doesn't get smaller when displayDensity is 'compact'
What do you think about it?
tkiryu
on 7 Jun 2019
@tkiryu Yes, I believe this would be more relevant.
The height of the toolbar is indeed the same for both compact and cosy - 48px. It is 56px for comfortable. (This is how they are set in styles) I guess @desig9stein and @simeonoff should have a better idea if this is by-design or should be changed.
tachojelev
on 7 Jun 2019
@tachojelev thank you for your opinion. I changed the title.
Toolbar height for displayDensity = 'compact' is the same as the one for displayDensity = 'cosy'.
tkiryu
on 9 Jun 2019
@StefanIvanov @DaniMarinov Do you think that we need to change the height of the toolbar also?
If yes, what should be the height for all density types?
desig9stein
on 10 Jun 2019
Since the actions (buttons) respect the display density and they are the most common content for the toolbar, I feel that we should reduce the toolbar height to 40px for the compact display density. I also think that 48px for cosy and 56px for comfortable are good and should stay as they currently are. Thank you @tkiryu for pointing this out.
StefanIvanov
on 10 Jun 2019
In addition to what @StefanIvanov mentioned - display density should affect not only height but also left/right paddings.
DaniMarinov
on 10 Jun 2019
@tkiryu @StefanIvanov @tachojelev @desig9stein You can check the updated Specification of the Toolbar
https://github.com/IgniteUI/igniteui-angular/wiki/Grid-Toolbar-Specification#user-interface
DaniMarinov
on 12 Jun 2019
@DaniMarinov Please update the first screenshot with the buttons to show the right padding of the toolbar.
desig9stein
on 12 Jun 2019
@desig9stein Check it now, I've updated it
DaniMarinov
on 12 Jun 2019
Related issues
Eralmidia
路
3Comments
QuinntyneBrown
路
3Comments
ChronosSF
路
3Comments
cornel-stoica-str
路
3Comments
Hypenate
路
3Comments
Most helpful comment
Since the actions (buttons) respect the display density and they are the most common content for the toolbar, I feel that we should reduce the toolbar height to 40px for the compact display density. I also think that 48px for cosy and 56px for comfortable are good and should stay as they currently are. Thank you @tkiryu for pointing this out.