FormField width cannot be changed to 100% but only to pixel values

Radzen Studio Blazor Server
1

Hi,

I want to use FormFields for the first time, because they look very nice.

But I face the problem that I cannot set the width of a form field to 100% as there is no property for that.

When I look into the generated razor page I always find pixel values like:

        <div class="row" style="margin-bottom: 1rem">
          <div class="col-md-6" style="display: block; float: none; position: relative">
            <RadzenFormField style="width: 419.578125px" Text="@L["formField0.Text"]" Variant="Variant.Outlined">
              <ChildContent>
                <RadzenDropDown AllowFiltering="true" Data="@(getMitarbeitersResult.Where(o => o.loeschknz == 0).OrderBy(o => o.NAME1))" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Placeholder="@L["dropdown0.Placeholder"]" style="display: block; width: 100%" TextProperty="NAME1" @bind-Value="@(arbeitsberichte.PERSON)" ValueProperty="MITARBNR" Name="Dropdown0" Change="@((args) =>Dropdown0Change(args, new object()))">
                </RadzenDropDown>
                <RadzenRequiredValidator Component="DropdownPerson" Popup="false" style="display: flex; position: absolute" Text="@L["requiredValidator0.Text"]">
                </RadzenRequiredValidator>
              </ChildContent>
            </RadzenFormField>
          </div>
          <div class="col-md-6">
            <RadzenFormField style="width: 417.0703125px" Text="@L["formField1.Text"]" Variant="Variant.Outlined">
              <ChildContent>
                <RadzenDropDown AllowFiltering="true" Data="@getFirmasResult" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Placeholder="@L["dropdown1.Placeholder"]" style="display: block; width: 100%" TextProperty="BEZEICHNUNG" @bind-Value="@(arbeitsberichte.FIRMA)" ValueProperty="LFDNR" Name="Dropdown1">
                </RadzenDropDown>
                <RadzenRequiredValidator Component="DropdownFirma" style="display: flex" Text="@L["requiredValidator1.Text"]">
                </RadzenRequiredValidator>
              </ChildContent>
            </RadzenFormField>
          </div>
        </div>

Do I miss something?

Thank you

Frank

2

Same Problem here

Thomas

3

Hi, indeed one cannot use the drag and drop resize to set percentage width. As a workaround you can edit the json of the page and change the pixel value to 100%.

style
In the next version we will expose the Style tab for RadzenFormField so you can just type 100% in the Width textbox. Here is how it will look like:

4

Thank you, Atanas! Great!

5

Hello @korchev,
any ideas when this version of Radzen Studio will be released?

kind regards
Thomas

6

We will release a new update next week.

7

:+1:t3: Great!

Thanks
Thomas