Skip to content

MudDialog: Improve max height and alignment of dialog container on mobile#9457

Merged
henon merged 1 commit intoMudBlazor:devfrom
skyslide22:feature/dialog-styles
Jul 22, 2024
Merged

MudDialog: Improve max height and alignment of dialog container on mobile#9457
henon merged 1 commit intoMudBlazor:devfrom
skyslide22:feature/dialog-styles

Conversation

@skyslide22
Copy link
Contributor

@skyslide22 skyslide22 commented Jul 20, 2024

Description

  1. Change the position of the .mud-dialog-container to be aligned to the left side of the nearest ancestor which has position relative. The dialog container can be at the containers start position, which does not take margin into consideration, left: 0; will attach it explicitly to the most left part.

  2. Change the max-height property of the .mud-dialog to be responsive regarding mobile phone adress/navigation bars. 100vh does not take them into consideration, but dvh (smallest viewport height) will respect these. this is an additional feature to vh, so it will not break things.

How Has This Been Tested?

  1. I have tested this on an iphone on a dev site, if you want to test that yourself you can put 200 lines of text in the <DialogContent> in the MudBlazor/src/MudBlazor.Docs/Pages/Components/Dialog/Examples/DialogUsageExample_Dialog.razor file, which is the first example in the dialog page.

To access this on your smartphone/iphone, change launchsettings>profiles>https>applicationUrl to https://0.0.0.0:6666, then just access your pc/mac from your phone using 192.168.x.x:6666 (disable any vpn!)

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

  1. Dialog container position:
    Position is at the left of the <main> which has auto margin left & right
    image
    Not noticeable when the <main> is full width
    image
    Dialog container now explicitly attached to the left using left: 0;
    image

  2. Here is what i mean with vh & dvh:
    image

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Jul 20, 2024
@codecov
Copy link

codecov bot commented Jul 20, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.55%. Comparing base (28bc599) to head (3a479db).
Report is 372 commits behind head on dev.

Additional details and impacted files 
@@            Coverage Diff             @@
##              dev    #9457      +/-   ##
==========================================
+ Coverage   89.82%   90.55%   +0.72%     
==========================================
  Files         412      405       -7     
  Lines       11878    12713     +835     
  Branches     2364     2462      +98     
==========================================
+ Hits        10670    11512     +842     
+ Misses        681      639      -42     
- Partials      527      562      +35

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@danielchalmers
Copy link
Member

danielchalmers commented Jul 20, 2024

@epithet Do you have any thoughts on this?

@epithet
Copy link
Contributor

epithet commented Jul 20, 2024 •
edited
Loading

@epithet Do you have any thoughts on this?

@danielchalmers I haven't looked at this in detail, but dvh is generally a good idea for this on mobile browsers, in particular because the OK/Cancel buttons at the bottom of a dialog might get hidden with vh.

Here's an example of the kind of problem this solves: https://cloudfour.com/thinks/a-bashful-button-worth-8-million/
Some more historical background: https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4

@ScarletKuro ScarletKuro requested a review from henon July 20, 2024 10:21
danielchalmers
danielchalmers approved these changes Jul 20, 2024
View reviewed changes
Copy link
Member

@danielchalmers danielchalmers left a comment

Choose a reason for hiding this comment

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

Nice improvement! I think this is the only place we use vh, excluding the docs.

@henon henon changed the title Impove max height of mud dialog (mobile) & alignment of mud dialog container MudDialog: Impove max height and alignment of dialog container on mobile Jul 22, 2024
@henon henon changed the title MudDialog: Impove max height and alignment of dialog container on mobile MudDialog: Improve max height and alignment of dialog container on mobile Jul 22, 2024
@henon henon merged commit 7e2dabe into MudBlazor:dev Jul 22, 2024
@henon
Copy link
Contributor

henon commented Jul 22, 2024

Thanks! Very noticable website content in your screenshots =P

@seedysoft seedysoft mentioned this pull request Jul 24, 2024
Merged
@dependabot dependabot bot mentioned this pull request Aug 7, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@danielchalmers danielchalmers danielchalmers approved these changes

@ScarletKuro ScarletKuro ScarletKuro approved these changes

@henon henon Awaiting requested review from henon

Assignees

No one assigned

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@skyslide22 @danielchalmers @epithet @henon @ScarletKuro