RadzenNumeric vertical alignment issue

Radzen.Blazor Components
1

Hi,

I'm using Radzen 4.15.11 and have issue with vertical alignment on Numeric input. Same behaviour on Firefox and Edge, so I guess it is not browser related.
I have no other css applied. This is how my output looks like:
image
image

_Host file:

@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace AssemblyLine.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <base href="~/"/>
    @* <link href="css/site.css" rel="stylesheet"/> *@
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/software-base.css">
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered"/>

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="_framework/blazor.server.js"></script>

</body>
</html>

It could be that I'm doing something wrong any thoughts would be helpful.

2

Hi @marware,

This looks like a layout issue. Can you share the code of the form with RadzenNumeric? You can use this demo as a reference on how to structure your form layout - Blazor template form component with validation support.

3

Hi,

Thanks for the quick reply. I've used that template as reference.
Now I've tried to add one page with only code from that template. Still, there is an issue.

image
image1830×872 65 KB

4

You can use Devtools to inspect the component and see what styles are causing the misalignment. The screenshot shows that there are potential issues with the height or the box-sizing of the components (text input and date picker are also misaligned). I see that you have not added Bootstrap to your project and perhaps the box model is different.

Try adding the following style to _Host:

<style>
*, ::after, ::before {
    box-sizing: border-box;
}
</style>
5

Great catch.
This added style solved the issue, many thanks.
I've followed "getting started" didn't find anything about Bootstrap.
What should be included in _Host to work properly?

6

You are right, Bootstrap is not mentioned as it is already included in the default blazor app template (the one created via dotnet new). Radzen.Blazor is trying to be as unobtrusive as possible and inherits most of your app's base or reset styles. That is why the themes do not include reset CSS rules like the box-sizing one, which is available with Bootstrap. Perhaps we should reconsider the introduction of css reset rules so that you don't have to add your own or rely on another library.

7

Good to know.
Thanks for the help and keep up with the great work!