Skip to content

fix(toast): inherit height, min-height, max-height#19409

Merged
brandyscarney merged 3 commits into
ionic-team:masterfrom
anagstef:add-inherit-height-toast
Oct 10, 2019
Merged

fix(toast): inherit height, min-height, max-height#19409
brandyscarney merged 3 commits into
ionic-team:masterfrom
anagstef:add-inherit-height-toast

Conversation

@anagstef

@anagstef anagstef commented Sep 20, 2019

Copy link
Copy Markdown
Contributor

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Using the --min-height CSS var on ion-toast you can change the minimum height of the toast. Although, if the message content container calculates to less height than this, then it appears on top of the toast, even though the container suggests flex display and centered aligned items, this happens only if the message content is equal or greater than the min-height you set.

By setting --min-height: 66px on ion-toast we have:

short-old
long-old

What is the new behavior?

Now the shorter messages are also center aligned.

short-new

Does this introduce a breaking change?

  • Yes
  • No

@ionitron-bot ionitron-bot Bot added the package: core @ionic/core package label Sep 20, 2019
@brandyscarney brandyscarney merged commit 250718a into ionic-team:master Oct 10, 2019
elylucas pushed a commit that referenced this pull request Oct 30, 2019
@anagstef @elylucas
fix(toast): inherit height in container to center align content (#19409)
102b0de
@l-hwen

l-hwen commented Nov 28, 2019

Copy link
Copy Markdown

@brandyscarney In toats,I think this padding（padding-top:14px） is too big，but I can't set padding for toast-content. Can you help me

@lolisTop

lolisTop commented Dec 25, 2019

Copy link
Copy Markdown

@brandyscarney In toats,I think this padding（padding-top:14px） is too big，but I can't set padding for toast-content. Can you help me

you can use javaScript to change the shadowDom style, example:

            let tip = document.querySelector(".tip-toast");
            let shadowRoot: any = tip.shadowRoot.querySelector(
              ".toast-content"
            );
            shadowRoot.style.cssText =
              "padding-top:0;padding-bottom:0;line-height:28px;color:#fff;";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brandyscarney brandyscarney brandyscarney approved these changes

Assignees

No one assigned

Labels

package: core @ionic/core package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@anagstef @l-hwen @lolisTop @brandyscarney