Panel Header

Hello Radzen Team,
is it possible to change the width auf the panel header? I made a template but the width is too small....


Not sure what you have in the header however you can place there very long text:

I have defined a Header template because i want to define position and size of the panel text.



The header template width is much too small for my intend :frowning:


My example is with HeaderTemplate as well. What you have in your HeaderTemplate?

My Hedertemplate: (its Material Design if this matters)

        <div class="row" style="height: 47px; text-align: center">
          <div class="col-md-12     col-lg-1 col-xl-1 justify-content-end  d-flex align-items-center" style="display: block; float: none; position: relative; text-align: right; vertical-align: baseline">
            <RadzenImage Path="assets/images/project-diagram-solid.svg" style="display: flex; height: 28px; position: absolute; width: 28px">
          <div class="col-md-11   col-lg-9 col-xl-9" style="display: block; float: left; padding-left: 0px; padding-right: 0px; position: static; text-align: left">
            <RadzenTextBox AutoComplete="false" Disabled="false" ReadOnly="true" style="color: #000000; display: inline-block; font-size: 32px; height: 40px; padding-left: 0px; text-align: left; width: 100%" @bind-Value="@Ueberschrift" Name="Textbox0">
          <div class="col-md-12   col-lg-2 col-xl-2">
            <RadzenButton ButtonStyle="ButtonStyle.Secondary" Text="Schliessen" Click="@Button4Click">

Any news on this Topic?


Thomas, the total sum of columns is much higher than 12 - col-md-12 + col-md-11+ col-md-12 is 35. Bootstrap separates the available horizontal space to 12 columns.

What exactly are you trying to achieve?

Hi @korchev,
the 12 - col-md-12 + col-md-11+ col-md-12 is only for mobile devices.
I use col-xl... and col-lg...

i want the header template width like this (red line to red line). I leave the "Panel text" property to the left empty because i dont want to use it. Then i made a Header Template.


Try the following:

  1. Add a CSS class to the Panel
  2. Add the following CSS to server\wwwroot\assets\css\styles.css
.my-header .row {
  flex: 1;

Wow! Works great!

Many thanks!