search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

feat: The core ionic app overwrites default font sizes #21128

Closed barry-jones closed 4 years ago

barry-jones commented 4 years ago

Bug Report

Ionic version:

[x] 4

Current behavior: Setting a default font size for the application is being ignored on various ionic controls.

Expected behavior: All parts of the application should default to the font size I set or vary as a proportion of the it with rem units.

Steps to reproduce: From a basic application ionic start test_app tabs --capacitor.

Add the following rule to the global.css.

html {
  font-size: 24px;
}

and use an ion-card in the first tab.

  <ion-card>
    <ion-card-header>

    </ion-card-header>
    <ion-card-content>
      <p>Some content in a paragraph.</p>
      <ul>
        <li>A list of items</li>
        <li>Another item</li>
      </ul>
    </ion-card-content>
  </ion-card>

The list items are displayed at 16px and the paragraph at 14px based on styles defined in files like the list below.

It would be very time consuming and annoying to have to specify a set of specific areas to override default behaviour.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.6.0 (C:\Users\barry\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.2 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.4
   OS     : Windows 10
liamdebeasi commented 4 years ago

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework.

The behavior you are experiencing is how CSS was designed to work. Queries with more specific selectors are prioritized over general selectors. Additionally, selectors that are made outside of the shadow DOM do not affect elements inside of the shadow DOM.

If you would like to "force" a font size, you can use add !important. We do not recommend this as it can lead to undesirable side effects on other elements.

For more information on CSS selector specificity, please see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity.

barry-jones commented 4 years ago

Thanks for your response, but I think you may have misunderstood. It is exactly that feature of CSS which is making it very difficult to style an application in Ionic framework.

If I want to have 16px to be the base font-size then I can not. Because ion-card p is set specifically in the framework to 14px, I also need to know that that other elements in the card do not have that same style applied. e.g. adding a ul li element to the card has a 16px styling applied from some other style in the framework.

Non of this is documented and is seemingly random.

liamdebeasi commented 4 years ago

This sounds like https://github.com/ionic-team/ionic/issues/17425. We are trying to migrate off scoped components (they were only there for support of older versions of IE/Edge), so certain scoped components may exhibit this issue.

ionitron-bot[bot] commented 4 years ago

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.