diff --git a/projects/angular/src/data/datagrid/_datagrid.clarity.scss b/projects/angular/src/data/datagrid/_datagrid.clarity.scss index ebfeb39c2a..c74a054385 100644 --- a/projects/angular/src/data/datagrid/_datagrid.clarity.scss +++ b/projects/angular/src/data/datagrid/_datagrid.clarity.scss @@ -656,7 +656,6 @@ flex-direction: column; flex: 1 1 auto; align-content: flex-start; - position: relative; .datagrid-body { width: auto; diff --git a/projects/angular/src/data/stack-view/_stack-view.clarity.scss b/projects/angular/src/data/stack-view/_stack-view.clarity.scss index 436d12a5ba..7b2f62d641 100644 --- a/projects/angular/src/data/stack-view/_stack-view.clarity.scss +++ b/projects/angular/src/data/stack-view/_stack-view.clarity.scss @@ -78,9 +78,6 @@ $styledInputs: 'input[type=text], input[type=password], input[type=number], inpu @include css-var(background-color, clr-stack-view-bg-color, $clr-stack-view-bg-color, $clr-use-custom-properties); word-wrap: break-word; - /* this fixes the overflow problem of children elements in a wrapper with a border-radius in Chrome */ - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); - dd, dt { // One of the caveats of using definition lists here. Browsers automatically style them in unpredictable ways... :( diff --git a/projects/demo/src/app/app.routing.ts b/projects/demo/src/app/app.routing.ts index eacb2e9cd1..d70a82b92e 100644 --- a/projects/demo/src/app/app.routing.ts +++ b/projects/demo/src/app/app.routing.ts @@ -74,6 +74,11 @@ export const APP_ROUTES: Routes = [ { path: 'login', loadChildren: () => import('./login/login.demo.module').then(m => m.LoginDemoModule) }, { path: 'modal', loadChildren: () => import('./modal/modal.demo.module').then(m => m.ModalDemoModule) }, { path: 'navigation', loadChildren: () => import('./nav/nav.demo.module').then(m => m.NavDemoModule) }, + { + path: 'overlay-clipping', + loadChildren: () => + import('./overlay-clipping/overlay-clipping.demo.module').then(m => m.OverlayClippingDemoModule), + }, { path: 'password', loadChildren: () => import('./password/password.demo.module').then(m => m.PasswordDemoModule), diff --git a/projects/demo/src/app/overlay-clipping/overlay-clipping.demo.html b/projects/demo/src/app/overlay-clipping/overlay-clipping.demo.html new file mode 100644 index 0000000000..12106ad308 --- /dev/null +++ b/projects/demo/src/app/overlay-clipping/overlay-clipping.demo.html @@ -0,0 +1,197 @@ +
(Signposts and tooltips should not get clipped by their containers)
+ +.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+.
+long content for scrolling
+
+
Content for step 1
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit + amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum + magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed + venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse + fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam + et orci hendrerit, consequat purus non, imperdiet ipsum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit + amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum + magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed + venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse + fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam + et orci hendrerit, consequat purus non, imperdiet ipsum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit + amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum + magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed + venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse + fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam + et orci hendrerit, consequat purus non, imperdiet ipsum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit + amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum + magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed + venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse + fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam + et orci hendrerit, consequat purus non, imperdiet ipsum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit + amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum + magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed + venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse + fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam + et orci hendrerit, consequat purus non, imperdiet ipsum. +
+Content for step 2
+