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

Pages dialog/modal breaking layout #2415

Closed
medienbaecker opened this issue Jan 29, 2020 · 11 comments
Closed

Pages dialog/modal breaking layout #2415

medienbaecker opened this issue Jan 29, 2020 · 11 comments

Comments

@medienbaecker
Copy link

@medienbaecker medienbaecker commented Jan 29, 2020

Describe the bug
The pages dialog/modal layout breaks when you have longer page titles or use some kind of info text. Especially on smaller screens this issue is easy to encounter.

To Reproduce
Steps to reproduce the behavior:

  1. Add a pages field to your blueprint
  2. Either use long page titles or for example display the page template in the info
  3. Open the modal by clicking on the "Select" button
  4. Resize your window if necessary

Expected behavior
The modal should be max 100% in width so it fits into the viewport.

Screenshots
modal

Kirby Version
3.3.3

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Chrome, Mobile Safari (probably every browser)

Smartphone (please complete the following information):

  • Device: iPhone 7
  • OS: iOS13.3
  • Browser: Mobile Safari
  • Version:

Additional context
I don't understand why the width of k-dialog-box is set to a fixed width. Just use width: 100% and a max-width and it's fixed. Ideally something wider than 30rem.

2020-01-29 09-42-11 2020-01-29 09_44_06

@afbora

This comment has been minimized.

Copy link
Contributor

@afbora afbora commented Jan 29, 2020

You're right, could be fix with using media query:

@media screen and (max-width: $breakpoint-medium) {
    //
}    
@medienbaecker

This comment has been minimized.

Copy link
Author

@medienbaecker medienbaecker commented Jan 29, 2020

@afbora I don't think you even need a media query for this. Just use max-width instead of width and set width to 100% for .k-dialog-box.

@nilshoerrmann

This comment has been minimized.

Copy link
Contributor

@nilshoerrmann nilshoerrmann commented Jan 29, 2020

Looking at the screenshots, it would be interesting to also look into removing some (all?) padding inside the dialog box to give the actual content more space. It would also be good to make longer lines break instead of trucating them.

@medienbaecker

This comment has been minimized.

Copy link
Author

@medienbaecker medienbaecker commented Jan 29, 2020

@afbora Of course you need to set a max-width as I mentioned in my issue.

@nilshoerrmann I agree, but maybe we should open a separate issue for that?

Edit: I added an idea issue over here: getkirby/ideas#469

@afbora

This comment has been minimized.

Copy link
Contributor

@afbora afbora commented Jan 29, 2020

@medienbaecker Hmm, max-width really worked 😅

@afbora

This comment has been minimized.

Copy link
Contributor

@afbora afbora commented Feb 13, 2020

@distantnative Can we get this to 3.3.5?

@bastianallgeier bastianallgeier added this to the 3.3.5 milestone Feb 13, 2020
@distantnative

This comment has been minimized.

Copy link
Contributor

@distantnative distantnative commented Feb 13, 2020

I haven't had a chance to look at this myself... my first guess would be that it is an easy fix

@distantnative

This comment has been minimized.

Copy link
Contributor

@distantnative distantnative commented Feb 15, 2020

max-width doesn't work as we the width defines the different dialog sizes (defined via option: small, medium etc.). Using max-width the dialog doesn't really take the width...

But probably wrapping with a media query could help.

@medienbaecker

This comment has been minimized.

Copy link
Author

@medienbaecker medienbaecker commented Feb 15, 2020

@distantnative Setting width to 100% and using the max-width to set the dialog size from the option doesn't work?

@distantnative

This comment has been minimized.

Copy link
Contributor

@distantnative distantnative commented Feb 15, 2020

No, apparently the content doesn't really push the dialog to its max-width.

What seems to work:
Screen Shot 2020-02-15 at 12 22 59

I'll open a PR in a second. Would be great if you could test it, @afbora.

@distantnative distantnative self-assigned this Feb 15, 2020
distantnative added a commit that referenced this issue Feb 15, 2020
@distantnative distantnative linked a pull request that will close this issue Feb 15, 2020
afbora added a commit that referenced this issue Feb 15, 2020
bastianallgeier added a commit that referenced this issue Mar 5, 2020
@bastianallgeier

This comment has been minimized.

Copy link
Contributor

@bastianallgeier bastianallgeier commented Mar 5, 2020

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

Successfully merging a pull request may close this issue.

5 participants
You can’t perform that action at this time.