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

Dialog without footer has extra space at the bottom #6850

Closed
adama357 opened this issue Nov 9, 2018 · 3 comments
Closed

Dialog without footer has extra space at the bottom #6850

adama357 opened this issue Nov 9, 2018 · 3 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@adama357
Copy link

adama357 commented Nov 9, 2018

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-zxfsbh?file=src/app/app.component.html

Current behavior
If there's no footer for a dialog, there's (sometimes) an empty footer that appears. The footer will randomly appear and change size as you change the viewport size. On our website, the empty footer is transparent, but in the above stackblitz it's white:

empty_footer

Expected behavior
If there's no footer defined, none should appear, and the resize grabber in the corner should just appear in the main dialog body.

Minimal reproduction of the problem with instructions
In Chrome, simply open the Stackblitz, and you should see a small footer. It will change size as you adjust the viewport size.

In Firefox, the footer doesn't appear until the dialog is either taking up 100% of the viewport width or you pull the dialog to make it wider and then adjust the viewport.

Please tell us about your environment:
Windows 10

  • Angular version: ~6.1.7

  • PrimeNG version: ~6.1.5

  • Browser: Chrome and Firefox have different behavior (see above)
@dinesh-here
Copy link

Hi @adama357 ,

It's not because of empty footer/div. minimum height for the dialog is 150px so lesser content is creating empty space set minHeight as auto will automatically resize the height based on content.

<p-dialog header="Godfather I" [(visible)]="display" modal="modal" dismissableMask="true" [responsive]="true" [minHeight]="'auto'">

@adama357
Copy link
Author

Thank you, that does fix the problem! :)

However, it does seem odd that this would be the default behavior. It seems like, if the min height is 150px, the main body of the dialog should expand to fill the extra space at the bottom, rather than it appearing as an empty footer (in the case of the StackBlitz) or a transparent region (in the case of our website).

@dinesh-here
Copy link

@adama357 Agreed. Default value for min height can be auto. Let keep this thread open for discussion.

@cagataycivici cagataycivici self-assigned this Dec 13, 2018
@cagataycivici cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Dec 13, 2018
@cagataycivici cagataycivici added this to the 7.0.1 milestone Dec 13, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

3 participants