Fluent UI Control - Dialog: How to change background color of Header (title bar)

[gopaltiwari]

Hello

I am developing a Chatbot and using Fluent UI Control - Dialog. As per the requirements, I need to change the background color of Header (title bar). For Example, as shown in below screenshot, I want to change the dialog's background color:

I did not find any "properties" of "Dialog" control that I can use it to change the header background control.

When I use browser developer tool, I can see that Dialog's header section uses "ms-Dialog-header header" class. In browser's developer tool, if I edit this css class to add "background-color:red", I can achieve the results but not sure how do I do it in code. I am unable to override "ms-Dialog-header header" class in code.

Any help will be highly appreciated.

Regards.
Gopal

[blendsdk]

I think you can place you Dialog inside a secondary FluentProvider with a custom red colored theme.

[khmakoto]

@gopaltiwari which version of the library are you using?

[gopaltiwari]

@khmakoto here is the fluentUI version I am using: "@fluentui/react": "^8.122.16".

This control probably does not have any property to set for background color for header title bar, and it seems this is why it is using Microsoft's "ms-Dialog-header header" class for header section, and I have no control to change the background color for header title bar.

[khmakoto]

@gopaltiwari you should be able to achieve this by passing the following to dialogContentProps:

styles: {
  header: {
    // your header styles
  }
}

You can see that in action in this codepen

[gopaltiwari]

@khmakoto You are super champ. It worked!!!!

Thank you so much for your help. Now, I have been able to change the header background color, but Now I am facing another problem. When I am scrolling the "dialog" window once contents grow longer, Header does not stick on top, it disappers (hides) once new contents are showing up in the dialog window like a word document page.

Is there any way, I can keep the header visible all the time, even when long contents keep growing when scrolled? Let me know if you want me to post the code to review it?

[khmakoto]

No prob! I've modified the codepen to include a visible header all the time, I hope this helps!

[gopaltiwari]

@khmakoto Thank you so much. 👍

It worked and now I am able to have dialog header fixed but this led to another problem. Now, I have two scrollbars, one for dialog and one from browser.

I would like to have dialog header for scrolling and would like to hide the other one.

[khmakoto]

That's because of you have something overflowing the height of its container, it's very hard for me to help you with that if I don't have direct access to the code that you're rendering.

[gopaltiwari]

@khmakoto This seems to be quite old problem, not sure if this was ever fixed. This discussion has few comments from you as well. #12420

I am attaching my project's .tsx file's code which contains most of the dialog UI code, probably you can find the problematic code. please have a look.
chatbot_tsx.txt

here is the original copilot chatbot SSO sample project which I am trying to work on: https://github.com/microsoft/CopilotStudioSamples/tree/main/SSOSamples/SharePointSSOComponent

Let me know if you need any additional info.

Regards,
Gopal