Primeng: Toolbar, component do not align vertically correctly.

[garethlewis]

I have created a Toolbar using the following.

<p-toolbar>
    <div class="ui-toolbar-group-left">
        <p-dropdown [options]="project.selectItemScenarios" [(ngModel)]="selectedScenario" (onChange)="scenarioSelected($event)"
            [style]="{'width':'250px'}"></p-dropdown>
        <button id="createScenarioButton" pButton type="button" (click)="createScenario()" label="Create Scenario"></button>

        <i class="fa fa-bars"></i>

        <p-dropdown [options]="selectItemRadars" [(ngModel)]="selectedRadar" (onChange)="radarSelected($event)" [disabled]="radarListDisabled"
            [style]="{'width':'250px'}"></p-dropdown>
        <button id="addRadarButton" pButton type="button" (click)="addRadar()" label="Add Radar"></button>
    </div>
</p-toolbar>

When shown the buttons and dropdowns do not align vertically. The buttons are attached to the bottom of the toolbar and the dropdowns aligned to the top. When looking at how the components are inserted by Chrome it looks as if the dropdowns have a hidden component that takes space, which is where the list would get rendered. How easy would it be to make the toolbar have an option to align all components to the top or buttom?

[marcelcremer]

Hey,

I had the same problem yesterday. I made a workaround by adding multiple

<div class="ui-toolbar-group-left">
</div>

Sections to the toolbar, so that the dropdown (or MultiSelect in my Case) has it's own group.

[cagataycivici]

Content is up to you, so you need to add necessary css like vertical-align to make adjustments. I don't think we should add some css as we can't know your content.

[broweratcognitecdotcom]

I'd say if you place a dropdown and a multiselect next to each other they should vertically align. that they don't is a problem. that is how html components are supposed to work... without hours of tinkering with css just so you can use it.