Skip to content

Commit

Permalink
[Fleet] Fix missing scrolling bar in categories column (elastic#153181)
Browse files Browse the repository at this point in the history
Closes elastic#149378

## Summary
Fixing missing scrolling bar in Integrations `categories` left column. I
replaced the `sticky` css property with the class `kbnStickyMenu`
defined
[here](https://github.com/elastic/kibana/blob/3c7bf5840539fad8e45e6d490bb7a82b955ba9f5/src/core/public/styles/rendering/_base.scss#L47-L51).
This class is applied above a certain breakpoint.

### Large viewport
The categories column is sticky:

https://user-images.githubusercontent.com/16084106/224733525-362d6b0c-321a-476d-ae5f-caad45ef3fcc.mov

### Smaller viewport
The categories column now has a scrolling bar:

https://user-images.githubusercontent.com/16084106/224733690-b310fb78-1ee3-45a7-bc45-dd29ffdc280b.mov
(cherry picked from commit bb3f917)
  • Loading branch information
criamico committed Mar 13, 2023
1 parent 21c8d91 commit 5b352bf
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const ControlsColumn = ({ controls, title }: ControlsColumnProps) => {
);
}
return (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexGroup direction="column" gutterSize="none" className="kbnStickyMenu">
{titleContent}
{controls}
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({

return (
<EuiFlexGroup alignItems="flexStart" gutterSize="xl" data-test-subj="epmList.integrationCards">
<EuiFlexItem
data-test-subj="epmList.controlsSideColumn"
grow={1}
style={{
position: 'sticky',
top: 0,
zIndex: 100,
}}
>
<EuiFlexItem data-test-subj="epmList.controlsSideColumn" grow={1} className="kbnStickyMenu">
<ControlsColumn controls={controls} title={title} />
</EuiFlexItem>
<EuiFlexItem grow={5} data-test-subj="epmList.mainColumn">
Expand Down

0 comments on commit 5b352bf

Please sign in to comment.