Skip to content

fix(modal): add additional padding to toolbars in iOS modal - #23181

Merged
willmartian merged 3 commits into
masterfrom
fix/22778
May 3, 2021
Merged

fix(modal): add additional padding to toolbars in iOS modal#23181
willmartian merged 3 commits into
masterfrom
fix/22778

Conversation

@willmartian

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?

Issue Number: resolves#22778

What is the new behavior?

  • Toolbars in modals on iOS now have additional padding

Does this introduce a breaking change?

  • Yes
  • No

@github-actionsgithub-actionsBot added the package: core @ionic/core package label Apr 12, 2021

@liamdebeasiliamdebeasi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went down a bit of a rabbit hole on this one as it gets a bit tricky when factoring in safe areas and portrait/landscape orientations. I ended up with the following code that accounts for most of the requirements that we need to follow:

/** * Card style modal needs additional padding on the  * top of the header. We accomplish this by targeting * the first toolbar in the header. * Footer also needs this. We do not adjust the bottom * padding though because of the safe area. */html.iosion-modal.modal-cardion-headerion-toolbar:first-of-type,html.iosion-modalion-footerion-toolbar:first-of-type {
padding-top:6px;
}
/** * Card style modal needs additional padding on the  * bottom of the header. We accomplish this by targeting * the last toolbar in the header. */html.iosion-modal.modal-cardion-headerion-toolbar:last-of-type {
padding-bottom:6px;
}
/** * Add padding on the left and right * of toolbars while accounting for * safe area values when in landscape. */html.iosion-modalion-toolbar {
padding-right:calc(var(--ion-safe-area-right) +8px);
padding-left:calc(var(--ion-safe-area-left) +8px);
}

Let's place this in the core.scss file, and then we should be good to merge.

@willmartian
willmartian merged commit d94739f into masterMay 3, 2021
@willmartian
willmartian deleted the fix/22778 branch May 3, 2021 14:44
@willmartian
willmartian restored the fix/22778 branch May 3, 2021 20:01
@willmartianwillmartian mentioned this pull request May 3, 2021
willmartian added a commit that referenced this pull request May 3, 2021
@willmartian
willmartian deleted the fix/22778 branch May 3, 2021 20:43
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core@ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: toolbars in modal need additional padding

3 participants

@willmartian@liamdebeasi@brandyscarney