Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4: css: make height of ion-content accessible for childs #14771

Closed
tntwist opened this issue Jul 13, 2018 · 1 comment
Closed

v4: css: make height of ion-content accessible for childs #14771

tntwist opened this issue Jul 13, 2018 · 1 comment
Labels

Comments

@tntwist
Copy link
Contributor

tntwist commented Jul 13, 2018

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[x ] 4.x

I'm submitting a ... (check one with "x")
[ ] bug report
[ x] feature request

Current behavior:
Currently childs of ion-content cannot use the height of the ion-content.

Expected behavior:
Childs of ion-content should be able to use the height of of the ion-content.

Steps to reproduce:
Create an simple page with following html template:

<ion-header>
    <ion-toolbar>
        <ion-title>
            <ion-label>Hello, this is a test :)</ion-label>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content [scrollEnabled]="false">
    <ion-slides style="height: 100%;" pager paginationType="bullets">
        <ion-slide>
            <ion-label style="margin-left: 8px;">
                Test slide...
            </ion-label>
        </ion-slide>
    </ion-slides>
</ion-content>

The ion-slides element wont use the 100% height of the parent content.

Related code:
class .scroll-inner in core/src/components/content/content.scss

...
.scroll-inner {
  @include padding(var(--padding-top), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset)), var(--padding-start));

  min-height: 100%;
  box-sizing: border-box;
  -webkit-margin-collapse: discard;
}

The attribute height is missing, so the childs cannot access the parents height.

Other information:
Suggestion: add height: 100% to .scroll-inner class of content.

...
.scroll-inner {
  @include padding(var(--padding-top), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset)), var(--padding-start));

  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  -webkit-margin-collapse: discard;
}

I´ll make a pull request for thits.

Ionic info::

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.11 (C:\Users\nico9\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.9
   @angular-devkit/core       : 0.7.0-rc.1
   @angular-devkit/schematics : 0.7.0-rc.1
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.10
   @ionic/schematics-angular  : 1.0.0-rc.10

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0 ios 4.5.4

System:

   Android SDK Tools : 25.2.5
   NodeJS            : v10.3.0 (D:\Program Files\nodejs\node.exe)
   npm               : 6.1.0
   OS                : Windows 10

Environment:

   ANDROID_HOME : D:\Development\Android\sdk
@ionitron-bot
Copy link

ionitron-bot bot commented Sep 1, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 1, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

1 participant