Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat(toolbar): support vertical dividers through `mat-divider`

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should be possible to display a divider in a mat-toolbar per the spec:

Example image

What is the current behavior?

Placing <mat-divider [vertical]="true"> creates a 0 x 1 pixel element.

What are the steps to reproduce?

In this StackBlitz, you can see the top toolbar has the divider but it’s not visible, while the bottom toolbar manually styles the divider to show up correctly.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest everything, as far as I can tell.

Is there anything else we should know?

In the StackBlitz, I have to guess at the pixel height of the divider because I can’t find exactly how tall the line is supposed to be in the spec, even though they do call out the spacing between the line and the icons on either side of it. I think it’s a blind spot in the spec, since neither the Structure nor the Toolbars section actually mentions the use of dividers to logically group controls.

Issue Analytics

State:
Created 5 years ago
Reactions:24
Comments:13 (5 by maintainers)

Top GitHub Comments

21reactions

jmlscommented, May 25, 2019

was this ever fixed ? I’ve just hit the same problem

2reactions

thw0rtedcommented, Mar 22, 2018

In your example, the spacing is wrong between the divider and the adjacent buttons. If I’m going to manually style stuff anyway, I don’t think I’d want to add extra wrapping elements like the div you used. The point of the issue is that <mat-toolbar><button/><mat-divider/><button/></mat-toolbar> should lay out according to the spec without manual styling, and right now it does not.

Top Results From Across the Web

Divider | Angular Material

<mat-divider> is a component that allows for Material styling of a line ... on its own to create a horizontal or vertical line...

Material Vertical Divider isn't showing up - Stack Overflow

I made a really simple program because i wanted to try out the vertical divider provided by angular material but for some ...

ion-item-divider - Ionic Framework

Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead,...

Angular Material Divider : Mat-Divider Example

We have three types of material dividers depending upon our usage. Simple divider; Inset divider; Vertical divider. Simple mat-divider example.

External Systems - Hybrid Analysis

Submit malware for free analysis with Falcon Sandbox and Hybrid Analysis technology. Hybrid Analysis develops and licenses analysis tools to fight malware.