fix recently accessed overflow problems (#18726)
This commit is contained in:
parent
5fcf7bc171
commit
147d208e2d
|
@ -27,7 +27,7 @@ exports[`render 1`] = `
|
|||
gutterSize="l"
|
||||
justifyContent="spaceBetween"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
wrap={true}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="recentlyAccessedFlexItem"
|
||||
|
@ -55,6 +55,10 @@ exports[`render 1`] = `
|
|||
"minWidth": "3.9000000000000004em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<EuiToolTip
|
||||
content="label0"
|
||||
position="bottom"
|
||||
>
|
||||
<EuiLink
|
||||
className="recentlyAccessedLongLink"
|
||||
|
@ -64,6 +68,7 @@ exports[`render 1`] = `
|
|||
>
|
||||
label0
|
||||
</EuiLink>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
</React.Fragment>
|
||||
<React.Fragment
|
||||
|
@ -93,6 +98,10 @@ exports[`render 1`] = `
|
|||
"minWidth": "3.9000000000000004em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<EuiToolTip
|
||||
content="label1"
|
||||
position="bottom"
|
||||
>
|
||||
<EuiLink
|
||||
className="recentlyAccessedLongLink"
|
||||
|
@ -102,6 +111,7 @@ exports[`render 1`] = `
|
|||
>
|
||||
label1
|
||||
</EuiLink>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
</React.Fragment>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -12,6 +12,7 @@ import {
|
|||
EuiPopover,
|
||||
EuiIcon,
|
||||
EuiSpacer,
|
||||
EuiToolTip,
|
||||
} from '@elastic/eui';
|
||||
|
||||
export const NUM_LONG_LINKS = 5;
|
||||
|
@ -129,6 +130,10 @@ export class RecentlyAccessed extends Component {
|
|||
className="recentlyAccessedItem"
|
||||
style={style}
|
||||
grow={false}
|
||||
>
|
||||
<EuiToolTip
|
||||
position="bottom"
|
||||
content={recentlyAccessedItem.label}
|
||||
>
|
||||
<EuiLink
|
||||
className="recentlyAccessedLongLink"
|
||||
|
@ -136,6 +141,7 @@ export class RecentlyAccessed extends Component {
|
|||
>
|
||||
{recentlyAccessedItem.label}
|
||||
</EuiLink>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
@ -178,7 +184,7 @@ export class RecentlyAccessed extends Component {
|
|||
|
||||
<EuiSpacer size="s"/>
|
||||
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" wrap>
|
||||
<EuiFlexItem grow={false} className="recentlyAccessedFlexItem">
|
||||
<EuiFlexGroup>
|
||||
{this.renderRecentlyAccessed()}
|
||||
|
|
|
@ -7,6 +7,11 @@
|
|||
.recentlyAccessedItem {
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
|
||||
.euiToolTipAnchor {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.recentlyAccessedLongLink {
|
||||
|
|
Loading…
Reference in a new issue