github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 02:09:32 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] fix Tool tip with large field list exceeds browser screen and cannot be accessed or dismissed (#138054)

Browse source 
* [Maps] fix Tool tip with large field list exceeds browser screen and cannot be accessed or dismissed

* add min-width to mapFeatureTooltip__propertyLabel
This commit is contained in:
Nathan Reese 2022-08-05 08:19:13 -06:00 • committed by GitHub
parent b476b06211
commit 7cd4a860ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 161 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

30
x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/features_tooltip/__snapshots__/feature_properties.test.tsx.snap generated
View file

@ -1,9 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeatureProperties should render 1`] = `
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
<div
className="mapFeatureTooltip_tableWrapper"
>
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
@ -38,7 +41,8 @@ exports[`FeatureProperties should render 1`] = `
<td />
</tr>
</tbody>
</table>
</table>
</div>
`;
exports[`FeatureProperties should show error message if unable to load tooltip content 1`] = `
@ -55,9 +59,12 @@ exports[`FeatureProperties should show error message if unable to load tooltip c
`;
exports[`FeatureProperties should show filter button for filterable properties 1`] = `
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
<div
className="mapFeatureTooltip_tableWrapper"
>
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
@ -104,13 +111,17 @@ exports[`FeatureProperties should show filter button for filterable properties 1
<td />
</tr>
</tbody>
</table>
</table>
</div>
`;
exports[`FeatureProperties should show view actions button when there are available actions 1`] = `
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
<div
className="mapFeatureTooltip_tableWrapper"
>
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
@ -172,5 +183,6 @@ exports[`FeatureProperties should show view actions button when there are availa
<td />
</tr>
</tbody>
</table>
</table>
</div>
`;

7
x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/features_tooltip/_index.scss
View file

@ -1,12 +1,16 @@
.mapFeatureTooltip_table {
width: 100%;
max-height: calc(49vh - #{$euiSizeXL * 2});
td {
padding: $euiSizeXS;
}
}
.mapFeatureTooltip_tableWrapper {
overflow: auto;
max-height: calc(49vh - 64px);
}
.mapFeatureTooltip_row {
border-bottom: 1px solid $euiColorLightestShade;
}
@ -20,6 +24,7 @@
}
.mapFeatureTooltip__propertyLabel {
min-width: $euiSizeXL * 2.5;
max-width: $euiSizeXL * 4;
font-weight: $euiFontWeightSemiBold;
}

2
x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/features_tooltip/feature_properties.tsx
View file

@ -336,9 +336,11 @@ export class FeatureProperties extends Component<Props, State> {
});
return (
<div className="mapFeatureTooltip_tableWrapper">
<table className="eui-yScrollWithShadows mapFeatureTooltip_table" ref={this._tableRef}>
<tbody>{rows}</tbody>
</table>
</div>
);
}
}