Layout Indenting Contents

Zach.E · August 3, 2023, 6:19pm

Hello,

I created a basic layout with only a body and content container. Whenever I create a page for the layout it indents my contents.

Layout:

Page:

When I run the application, the contents are indented even though I haven't altered any margins:

For a workaround I can set negative margins to move the indented contents to the left but I lose visibility in Radzen.

Am I doing something wrong?

Thanks,

Zach

yordanov · August 4, 2023, 7:03am

This is most probably a result of some CSS adding margin or max-width that centers the content container within the browser window, making the content look indented. You can use DevTools to inspect the element in the browser and see what is causing it.

Zach.E · August 4, 2023, 3:43pm

Thank you for the quick reply.

The RadzenBody.razor.cs seems to be applying a 250px left margin if the layout is null, but as far as I can tell my layout is not null since my page is assigned to a layout.

github.com

radzenhq/radzen-blazor/blob/8db9fc3f17c571bf2cb77e37f2fd0a5b2c3ad801/Radzen.Blazor/RadzenBody.razor.cs#L53


      
          /// <summary>
          /// The <see cref="RadzenLayout" /> this component is nested in.
          /// </summary>
          [CascadingParameter]
          public RadzenLayout Layout { get; set; }
          
          /// <summary>
          /// Gets the style.
          /// </summary>
          /// <returns>System.String.</returns>
          protected string GetStyle()
          {
              if (Layout == null)
              {
                  var marginLeft = 250;
                  var style = Style;
          
                  if (!string.IsNullOrEmpty(Style))
                  {
                      var marginLeftStyle = Style.Split(';').Where(i => i.Split(':')[0].Contains("margin-left")).FirstOrDefault();
                      if (!string.IsNullOrEmpty(marginLeftStyle) && marginLeftStyle.Contains("px"))

For now I am applying -250px margin to offset this. Are you able to reproduce this or is this expected behavior?

Thanks,

Zach

Zach.E · August 4, 2023, 3:56pm

Also if I set an explicit margin of 0px on the layout body to override the computed value it corrects this issue.

yordanov · August 4, 2023, 6:43pm

Yes, that'd be the solution in your case until we address the left margin issue.