add ToolbarContent to fix alignment issue
@@ -12,6 +12,7 @@ import {
TextInput,
Title,
Toolbar,
+ ToolbarContent,
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core';
@@ -155,6 +156,7 @@ export const ListViewToolbar: React.FunctionComponent<IListViewToolbarProps> =
};
return (
<Toolbar className="pf-u-justify-content-space-between pf-u-mx-xl pf-u-my-md">
+ <ToolbarContent>
<ToolbarGroup>
<ToolbarItem className="pf-u-mr-xl">
<InputGroup>
@@ -224,7 +226,9 @@ export const ListViewToolbar: React.FunctionComponent<IListViewToolbarProps> =
</ToolbarItem>
</ToolbarGroup>
<ToolbarGroup>
- <ToolbarItem className={'pf-u-mx-md list-view-toolbar__child-items'}>
+ <ToolbarItem
+ className={'pf-u-mx-md list-view-toolbar__child-items'}
+ >
{children}
</ToolbarItem>
</ToolbarGroup>
@@ -245,7 +249,10 @@ export const ListViewToolbar: React.FunctionComponent<IListViewToolbarProps> =
<StackItem>
<ChipGroup>
{activeFilters.map((item: IActiveFilter, index) => (
- <Chip key={index} onClick={() => onRemoveFilter(item)}>
+ <Chip
+ key={index}
+ onClick={() => onRemoveFilter(item)}
+ >
{item.title} = {item.value}
</Chip>
))}
@@ -265,6 +272,7 @@ export const ListViewToolbar: React.FunctionComponent<IListViewToolbarProps> =
)}
</ToolbarItem>
</ToolbarGroup>
+ </ToolbarContent>
</Toolbar>
);
};
