Styling Fields

[maestros]

1. I want to reduce the space between two fields for example two input fields. How?
2. I want to reduce the height of a field for example the height of . How?
3. In a , the has upper-left alignment and the has centered-left alignment. How to change the alignment of these fields?
4. In the upper blue horizontal line, i want to add more option buttons such as show/hide menu button or change contrast button. How?
5. The Search field in a main list model page is looking only in the column Name. How to enable a search in whole fields of entity via the one search field? In Opportunities.razor it seemed thet the search worked only for Name. In the other hand, in the contacts.razor page the search work for all fields of entity. How to enable this option for all entities?
6. Is there any best practices for the component colors in a form? Is there any article that described how to change the colors of the components in a ?

[yordanov]

Hi @maestros,

@maestros

1. I want to reduce the space between two fields for example two input fields. How?

You can use RadzenStack component and its Gap property to control the spacing between input fields.

@maestros

2. I want to reduce the height of a field for example the height of . How?

Not clear from your question which component you want to reduce the height of? Considering it is an input you can change height, padding properties in the Styles tab. Depending on theme in use you might want to change line-height also.

@maestros

3. In a , the has upper-left alignment and the has centered-left alignment...

Not clear which component you are asking about.

@maestros

4. In the upper blue horizontal line, i want to add more option buttons such as show/hide menu button or change contrast button. How?

I guess the upper blue horizontal line is RadzenHeader component. It is located in your layout e.g. MainLayout.razor. Here is an example of a header with sidebar toggle and appearance toggle components:

    <RadzenHeader>
        <RadzenRow JustifyContent="JustifyContent.Start" AlignItems="AlignItems.Center" Gap="0">
            <RadzenColumn Size="5">
                <RadzenSidebarToggle Click="@SidebarToggleClick"></RadzenSidebarToggle>
            </RadzenColumn>
            <RadzenColumn Size="7">
                <RadzenStack AlignItems="AlignItems.Center" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0.5rem" class="rz-px-2">
                    <RadzenAppearanceToggle />
                </RadzenStack>
            </RadzenColumn>
        </RadzenRow>
    </RadzenHeader>

@maestros

5. The Search field in a main list model page is looking only in the column Name. How to enable a search in whole fields of entity via the one search field?

1. Open Opportunities.razor.cs and select Methods view. From there select the desired method and open the QueryBuilder:
   
   

The Query Builder will help you to edit your search query:

@maestros

6. Is there any best practices for the component colors in a form? Is there any article that described how to change the colors of the components in a ?

Here you can read more about component's accessibility:

Blazor Accessibility | Free UI Components by Radzen

You can use WCAG compliand and high-contrast theme color swatches. Read more about that in the documentation Themes and Swatches | Radzen Blazor Studio, and how to make theme/color changes in the Apperance panel Edit a Radzen Blazor theme | Radzen Blazor Studio.