Fixed #2044 - Improve header element on Dialog

primefaces · May 20, 2021 · f4b4646 · f4b4646
1 parent 6c0ac70
commit f4b4646
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
@@ -36,7 +36,6 @@
 .p-dialog-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     flex-shrink: 0;
 }
 
@@ -47,6 +46,7 @@
 .p-dialog .p-dialog-header-icons {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
 }
 
 .p-dialog .p-dialog-header-icon {
@@ -57,6 +57,10 @@
     position: relative;
 }
 
+.p-dialog .p-dialog-title {
+    flex-grow: 1;
+}
+
 /* Fluid */
 .p-fluid .p-dialog-footer .p-button {
     width: auto;

diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
@@ -589,7 +589,7 @@ export class Dialog extends Component {
 
             return (
                 <div ref={el => this.headerEl = el} className="p-dialog-header" onMouseDown={this.onDragStart}>
-                    <span id={this.state.id + '_header'} className="p-dialog-title">{header}</span>
+                    <div id={this.state.id + '_header'} className="p-dialog-title">{header}</div>
                     <div className="p-dialog-header-icons">
                         {icons}
                         {maximizeIcon}