Commit 94f8155d authored by Savas Vedova's avatar Savas Vedova

Fix scrolling issues with sticky header

- Add changelog
parent 5688842f
...@@ -95,31 +95,30 @@ export default { ...@@ -95,31 +95,30 @@ export default {
</script> </script>
<template> <template>
<div> <div class="card gl-z-index-2!" :class="{ 'with-error': Boolean(updateErrorText) }">
<gl-alert v-if="updateErrorText" variant="danger" :dismissible="false" class="gl-mb-3"> <gl-alert v-if="updateErrorText" variant="danger" :dismissible="false">
{{ updateErrorText }} {{ updateErrorText }}
</gl-alert> </gl-alert>
<div class="card gl-z-index-3!">
<form class="card-body gl-display-flex gl-align-items-center" @submit.prevent="handleSubmit"> <form class="card-body gl-display-flex gl-align-items-center" @submit.prevent="handleSubmit">
<div <div
class="gl-line-height-0 gl-border-r-solid gl-border-gray-100 gl-pr-6 gl-border-1 gl-h-7 gl-display-flex gl-align-items-center" class="gl-line-height-0 gl-border-r-solid gl-border-gray-100 gl-pr-6 gl-border-1 gl-h-7 gl-display-flex gl-align-items-center"
>
<span
><b>{{ selectedVulnerabilitiesCount }}</b> {{ $options.i18n.selected }}</span
> >
<span </div>
><b>{{ selectedVulnerabilitiesCount }}</b> {{ $options.i18n.selected }}</span <div class="gl-flex-fill-1 gl-ml-6 gl-mr-4">
> <status-dropdown @change="handleStatusDropdownChange" />
</div> </div>
<div class="gl-flex-fill-1 gl-ml-6 gl-mr-4"> <template v-if="shouldShowActionButtons">
<status-dropdown @change="handleStatusDropdownChange" /> <gl-button type="button" class="gl-mr-4" @click="resetSelected">
</div> {{ $options.i18n.cancel }}
<template v-if="shouldShowActionButtons"> </gl-button>
<gl-button type="button" class="gl-mr-4" @click="resetSelected"> <gl-button type="submit" category="primary" variant="confirm">
{{ $options.i18n.cancel }} {{ $options.i18n.changeStatus }}
</gl-button> </gl-button>
<gl-button type="submit" category="primary" variant="confirm"> </template>
{{ $options.i18n.changeStatus }} </form>
</gl-button>
</template>
</form>
</div>
</div> </div>
</template> </template>
@import 'page_bundles/mixins_and_variables_and_functions'; @import 'page_bundles/mixins_and_variables_and_functions';
$security-filter-height: 90px; $security-filter-height: 90px;
$selection-summary-height: 68px; $selection-summary-height: 66px;
$selection-summary-with-error-height: 118px;
@mixin sticky-top-positioning($extra: 0) { @mixin sticky-top-positioning($extra: 0) {
top: $header-height + $extra; top: $header-height + $extra;
...@@ -113,4 +114,8 @@ $selection-summary-height: 68px; ...@@ -113,4 +114,8 @@ $selection-summary-height: 68px;
tr:hover .vulnerability-title { tr:hover .vulnerability-title {
text-decoration: underline; text-decoration: underline;
} }
.card.with-error + table thead.below-selection-summary th {
@include sticky-top-positioning($security-filter-height + $selection-summary-with-error-height);
}
} }
---
title: Fix scrolling issues with sticky status box
merge_request: 55188
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment