fix(content): apply background to the inner scroll element

This allows a background image on content to take up the full screen height behind the toolbar. fixes #15635
ionic-team · Sep 24, 2018 · f68c457 · f68c457
1 parent 06cb138
commit f68c457
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 4 deletions.
diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
@@ -35,15 +35,12 @@
   padding: 0 !important;
   /* stylelint-enable */
 
-  background: var(--background);
-  color: var(--color);
-
   font-family: $font-family-base;
 
   contain: layout size style;
 }
 
-:host(.ion-color) {
+:host(.ion-color) .inner-scroll {
   background: current-color(base);
   color: current-color(contrast);
 }
@@ -59,6 +56,9 @@
 
   position: absolute;
 
+  background: var(--background);
+  color: var(--color);
+
   box-sizing: border-box;
 
   overflow: hidden;

diff --git a/core/src/components/content/test/fullscreen/e2e.js b/core/src/components/content/test/fullscreen/e2e.js
@@ -0,0 +1,30 @@
+
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/select/test/fullscreen?ionic:mode=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('select/fullscreen', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate('#gender');
+    });
+
+    register('should open gender single select', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('#gender', { waitFor: '.alert-wrapper' });
+    });
+
+    register('should open custom action sheet select', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('#customSelect', { waitFor: '.action-sheet-wrapper' });
+    });
+  });
+});
diff --git a/core/src/components/content/test/fullscreen/index.html b/core/src/components/content/test/fullscreen/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Content - Fullscreen</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
+</head>
+
+<body>
+  <ion-app>
+    <ion-header no-border>
+      <ion-toolbar>
+        <ion-title>Content - Fullscreen</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding fullscreen>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis pretium urna. Aliquam nec bibendum odio. Aenean nec elementum magna. Sed dolor leo, efficitur quis pretium quis, efficitur gravida est. Vivamus finibus, dui ut rutrum mattis, ligula turpis ornare magna, id condimentum urna mi at nisi. Aliquam ornare sodales viverra. Donec semper lacus ac turpis luctus mollis. Donec quis sem vel lacus ullamcorper cursus. Donec auctor auctor enim eu condimentum.</p>
+      <p>Suspendisse erat leo, dapibus eu vehicula vitae, porttitor sit amet odio. Phasellus et dui sed metus ullamcorper feugiat in a libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas in lectus sit amet mi placerat rhoncus. Maecenas a dui in nulla sodales viverra sed at diam. Curabitur aliquam, neque id accumsan efficitur, est enim consequat nisl, a rutrum felis magna porta nisl. Phasellus suscipit feugiat turpis, nec interdum mi ultrices a. Curabitur cursus ligula sapien, non dictum libero dictum molestie. Praesent at metus mauris. Sed vitae tellus et nunc vehicula maximus ut quis erat.</p>
+      <p>Nunc vulputate venenatis ex, in suscipit metus aliquet ac. Nunc maximus laoreet metus, blandit accumsan quam feugiat ac. In finibus efficitur feugiat. Aliquam erat volutpat. Integer fermentum non arcu eget gravida. Ut congue magna sit amet purus aliquet accumsan. Pellentesque a dui ac enim vulputate sodales. Ut pulvinar sapien vel mauris convallis, eu pellentesque justo semper. Suspendisse non odio vitae ex efficitur placerat ut vel mauris. Suspendisse ante massa, malesuada nec laoreet nec, aliquam id nunc. Phasellus fermentum consequat eros eget sollicitudin. Sed hendrerit laoreet nibh in fringilla. Vestibulum porta ultricies enim vel ornare. Integer luctus faucibus nunc, non mattis nisl consectetur at. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+      <p>Suspendisse et arcu nec odio lobortis lacinia a congue ligula. Duis libero lacus, blandit ac lectus et, laoreet condimentum est. Suspendisse potenti. Praesent ligula dui, laoreet sed pellentesque vitae, congue at leo. Mauris pharetra, tellus vel viverra viverra, tellus felis mollis magna, volutpat pharetra augue nunc a dolor. Donec ex turpis, iaculis id consectetur quis, posuere a purus. Morbi eu massa sed erat tristique hendrerit. Morbi eleifend, nisi eleifend condimentum euismod, lacus erat porta arcu, consequat rutrum ipsum arcu at metus. Sed tellus nulla, pellentesque sit amet justo at, venenatis imperdiet dui. Aenean odio eros, posuere at dui pharetra, laoreet posuere nulla. Vestibulum interdum odio eu odio ornare, quis maximus lacus semper. Quisque purus dolor, ullamcorper mollis lorem at, sodales aliquet velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus purus felis, elementum ut est ut, finibus sagittis tellus. Etiam neque mauris, lobortis sed orci in, dictum eleifend turpis. Morbi eu odio quis mauris gravida tristique.</p>
+      <p>Vestibulum blandit quam a odio lobortis dictum. Nulla pellentesque mauris ornare neque ultricies sagittis. Aenean molestie placerat fermentum. Morbi ac tortor vel felis imperdiet suscipit. Ut id pellentesque nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc tincidunt tincidunt malesuada. Mauris sit amet magna nibh.      </p>
+    </ion-content>
+  </ion-app>
+
+  <style>
+    ion-toolbar {
+      --background: rgba(255, 255, 255, 0.2);
+      --color: white;
+    }
+
+    ion-content {
+      --background: url("https://images.unsplash.com/photo-1527066579998-dbbae57f45ce?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=33ed584d743e3a2f4e17eeb8c5e10d5d&auto=format&fit=crop&w=664&q=80") no-repeat center center fixed;
+      --color: white;
+    }
+
+    p:first-child {
+      margin-top: 0;
+    }
+  </style>
+</body>
+
+</html>