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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeatureProperties should render 1`] = ` exports[`FeatureProperties should render 1`] = `
<table <div
className="eui-yScrollWithShadows mapFeatureTooltip_table" className="mapFeatureTooltip_tableWrapper"
> >
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody> <tbody>
<tr <tr
className="mapFeatureTooltip_row" className="mapFeatureTooltip_row"
@ -38,7 +41,8 @@ exports[`FeatureProperties should render 1`] = `
<td /> <td />
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
`; `;
exports[`FeatureProperties should show error message if unable to load tooltip content 1`] = ` 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`] = ` exports[`FeatureProperties should show filter button for filterable properties 1`] = `
<table <div
className="eui-yScrollWithShadows mapFeatureTooltip_table" className="mapFeatureTooltip_tableWrapper"
> >
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody> <tbody>
<tr <tr
className="mapFeatureTooltip_row" className="mapFeatureTooltip_row"
@ -104,13 +111,17 @@ exports[`FeatureProperties should show filter button for filterable properties 1
<td /> <td />
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
`; `;
exports[`FeatureProperties should show view actions button when there are available actions 1`] = ` exports[`FeatureProperties should show view actions button when there are available actions 1`] = `
<table <div
className="eui-yScrollWithShadows mapFeatureTooltip_table" className="mapFeatureTooltip_tableWrapper"
> >
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody> <tbody>
<tr <tr
className="mapFeatureTooltip_row" className="mapFeatureTooltip_row"
@ -172,5 +183,6 @@ exports[`FeatureProperties should show view actions button when there are availa
<td /> <td />
</tr> </tr>
</tbody> </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 { .mapFeatureTooltip_table {
width: 100%; width: 100%;
max-height: calc(49vh - #{$euiSizeXL * 2});
td { td {
padding: $euiSizeXS; padding: $euiSizeXS;
} }
} }
.mapFeatureTooltip_tableWrapper {
overflow: auto;
max-height: calc(49vh - 64px);
}
.mapFeatureTooltip_row { .mapFeatureTooltip_row {
border-bottom: 1px solid $euiColorLightestShade; border-bottom: 1px solid $euiColorLightestShade;
} }
@ -20,6 +24,7 @@
} }
.mapFeatureTooltip__propertyLabel { .mapFeatureTooltip__propertyLabel {
min-width: $euiSizeXL * 2.5;
max-width: $euiSizeXL * 4; max-width: $euiSizeXL * 4;
font-weight: $euiFontWeightSemiBold; 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 ( return (
<div className="mapFeatureTooltip_tableWrapper">
<table className="eui-yScrollWithShadows mapFeatureTooltip_table" ref={this._tableRef}> <table className="eui-yScrollWithShadows mapFeatureTooltip_table" ref={this._tableRef}>
<tbody>{rows}</tbody> <tbody>{rows}</tbody>
</table> </table>
</div>
); );
} }
} }