ModernTaxonomyPicker: Style problem - term list overflows panel footer #1875
Description
Category
[ ] Enhancement
[X] Bug
[ ] Question
Version
Please specify what version of the library you are using: [3.19.0]
Expected / Desired Behavior / Question
The buttons in the footer of the picker panel should be not "above" the term list. There should be a clear separation.
Observed Behavior
In a long list, the individual elements are located below the button bar.
Steps to Reproduce
Create a blank SPFx Solution (v1.19.0), add this package, add basic ModernTaxonomyPicker somewhere in the tsx component (example code below). Add valid termSetId for a larger term set. Serve the webpart (via gulp serve), include on SharePoint page and open the "add term panel" of the picker.
For example
import * as React from 'react';
import type { ISimpleMtpSampleProps } from './ISimpleMtpSampleProps';
import { ModernTaxonomyPicker } from '@pnp/spfx-controls-react/lib/ModernTaxonomyPicker';
export default class SimpleMtpSample extends React.Component<ISimpleMtpSampleProps, {}> {
public render(): React.ReactElement<ISimpleMtpSampleProps> {
const {
termId, context
} = this.props;
return (
<section>
<ModernTaxonomyPicker allowMultipleSelections={true}
termSetId={termId}
panelTitle="Select a term"
label={"Test"}
context={context as any}
/>
</section>
);
}
}