Message Popup

Question

Hi I have below message Popup. I want Title should appear on left with primary background & Horizonal line should be full width. Image attached. var swalInit = swal.mixin({ buttonsStyling: false confirmButtonClass: 'btn btn-primary' cancelButtonClass: 'btn btn-light' }); function ShowPopup(heading body type) { swalInit.fire({ /* title: ` ${heading} `*/ /*title: ` ${heading} `*/ title: ` ${heading} ` html: ` ${body} ` icon: type position: 'center' // Adjust position as needed allowOutsideClick: false confirmButtonText: 'OK' timer: 6000 }); } Thanks

Naimish Makwana · Answer

Try below solution function ShowPopup(heading body type) { swalInit.fire({ title: ` ${heading} ` html: ` ${body} ` icon: type position: 'center' // Adjust position as needed allowOutsideClick: false confirmButtonText: 'OK' timer: 6000 }); } Thanks

Ramco Ramco · Answer

Hi Naimish It is still not displaying properly . Neither Heading is left aligned & also line is not appearing. Iamge also attached function ShowPopup(heading body type) { swalInit.fire({ title: ` ${heading} ` html: ` ${body} ` icon: type position: 'center' // Adjust position as needed allowOutsideClick: false confirmButtonText: 'OK' timer: 6000 }); } public void ShowMessage(String Title String Text String Type) { Text = Text.Replace(' ).Replace(/  ).Replace(;  ).Replace(:  ).Replace(  ); Text = System.Text.RegularExpressions.Regex.Replace(Text @	|
|  ); if (Common.CommonFunction.IE(Request.Browser.Browser)) { Common.MessageBox.Show(Text); } else { ClientScript.RegisterStartupScript(this.GetType() Popup ShowPopup(' + Title + ' ' + Text + '' + Type + '); true); } } Thanks

Sriyans Sharma · Answer

To meet your requirements you want to style the title of the message popup so that it appears on the left side with a primary background color. Additionally you want a horizontal line below the title that spans the full width of the popup. Here's how you can adjust your ShowPopup function to achieve this: var swalInit = swal.mixin({ buttonsStyling: false confirmButtonClass: 'btn btn-primary' cancelButtonClass: 'btn btn-light' }); function ShowPopup(heading body type) { swalInit.fire({ title: ` ${heading} ` html: ` ${body} ` icon: type position: 'center' // Adjust position as needed allowOutsideClick: false confirmButtonText: 'OK' timer: 6000 }); } Explanation of Changes: Title Styling : Background Color : The title is wrapped in a div with background-color: #007bff; (Bootstrap's primary color) and color: white; to make the text stand out. Padding : Added padding inside the div to provide spacing around the title text. Horizontal Line : The tag is used to create the horizontal line. It's styled to span the full width and placed right below the title div . Text Alignment : The title is aligned to the left within the div with text-align: left; . Result: The title will appear on the left side with a primary blue background. A horizontal line will appear just below the title extending across the entire width of the popup.