Panel Header

Radzen Studio Blazor Server
1

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

image
image1915×265 15.8 KB

Thomas

2

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

image
image1920×1080 136 KB

image
image1920×1080 83.5 KB

3

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

designer:

image
image1279×242 12.8 KB

Template:

image
image1280×222 4.79 KB

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

Thomas

4

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

5

My Hedertemplate: (its Material Design if this matters)

      <HeaderTemplate>
        <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">
            </RadzenImage>
          </div>
          <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">
            </RadzenTextBox>
          </div>
          <div class="col-md-12   col-lg-2 col-xl-2">
            <RadzenButton ButtonStyle="ButtonStyle.Secondary" Text="Schliessen" Click="@Button4Click">
            </RadzenButton>
          </div>
        </div>
      </HeaderTemplate>
6

Any news on this Topic?

Thomas

7

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?

8

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.

image
image1279×242 13 KB

Thomas

9

Try the following:

  1. Add a CSS class to the Panel
    image
    image732×382 11.7 KB
  2. Add the following CSS to server\wwwroot\assets\css\styles.css
.my-header .row {
  flex: 1;
}
10

Wow! Works great!

Many thanks!
Thomas