Fields in a form group not aligning

1 Reply
2 Participants

Created by
ZD Zack Davis

Platform
Blazor

Platform
Blazor

Control
Data Form

Created On
Aug 16, 2024 10:20 PM UTC

Last Activity On
Aug 20, 2024 01:50 PM UTC

Want to subscribe?
SIGN IN

Image_5785_1723846683234

Hi I was wondering if there is any way for me to get these fields in the form group "Details" to align the correctly.

This is the code that I have for this data form:

</SfDropDownList>

</Template>

</FormItem>

<label class="custom-label">Status:</label>

</SfDropDownList>

</Template>

</FormItem>

<label class="custom-label">Case Substatus:</label>

</Template>

</FormItem>

<label class="custom-label">Referral Type:</label>

</SfDropDownList>

</Template>

</FormItem>

<label class="custom-label">Referral Subtype:</label>

</Template>

</FormItem>

<label class="custom-label">Firm Department:</label>

</Template>

</FormItem>

</FormGroup>

I would appreciate any help you can offer.

Thanks!

1 Reply

KP Kokila Poovendran Syncfusion Team August 20, 2024 01:50 PM UTC

Hi Zack Davis,

Thank you for reaching out. We understand that you're having trouble aligning the fields in the "Details" form group. We have reviewed your code and created a sample configuration to help with alignment:

@using Syncfusion.Blazor.DataForm
@using Syncfusion.Blazor.DropDowns

<SfDataForm Model="@caseDetail">
    <FormItems>
        <FormGroup LabelText="Details" CssClass="details-group" ColumnCount=2  ColumnSpacing="20px">
            <FormItem Field="@nameof(Case.CaseType)" LabelText="Case Type:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.CaseSubtype)" LabelText="Subtype:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.OurRole)" LabelText="We Are:">
                <Template>
                    <label class="custom-label">We Are:</label>
                    <SfDropDownList TValue="string" TItem="string" DataSource="@ourRoles" @bind-Value="caseDetail.OurRole">
                        <DropDownListFieldSettings Text="Our Role"></DropDownListFieldSettings>
                    </SfDropDownList>
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Case.CaseStatus)" LabelText="Status:" IsEnabled="true" CssClass="custom-label">
                <Template>
                    <label class="custom-label">Status:</label>
                    <SfDropDownList TValue="string" TItem="string" DataSource="@caseStatuses" @bind-Value="caseDetail.CaseStatus"></SfDropDownList>
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Case.CaseSubstatus)" LabelText="Status Subtype:" IsEnabled="true" CssClass="custom-label">
                <Template>
                    <label class="custom-label">Case Substatus:</label>
                    <SfDropDownList TValue="string" TItem="string" DataSource="@caseSubstatuses" @bind-Value="caseDetail.CaseSubstatus"></SfDropDownList>
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Case.ReferralType)" LabelText="Referral Type:" IsEnabled="true" CssClass="custom-label">
                <Template>
                    <label class="custom-label">Referral Type:</label>
                    <SfDropDownList TValue="string" TItem="string" DataSource="@referralTypes" @bind-Value="caseDetail.ReferralType"></SfDropDownList>
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Case.ReferralSubtype)" LabelText="Subtype:" IsEnabled="true" CssClass="custom-label">
                <Template>
                    <label class="custom-label">Referral Subtype:</label>
                    <SfDropDownList TValue="string" TItem="string" DataSource="@referralSubtypes" @bind-Value="caseDetail.ReferralSubtype"></SfDropDownList>
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Case.OtherFileNumber)" LabelText="Other File #:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.CaseOpened)" LabelText="Opened:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.CaseClosed)" LabelText="Closed:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.Intake)" LabelText="Intake Date:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.PhysicalFileRetentionDate)" LabelText="File Retention:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.PhysicalFileLocation)" LabelText="File Location:" IsEnabled="true" CssClass="custom-label"></FormItem>
            <FormItem Field="@nameof(Case.FirmDepartment)" LabelText="Department:" IsEnabled="true" CssClass="custom-label">
                <Template>
                    <label class="custom-label">Firm Department:</label>
                    <SfDropDownList TValue="string" TItem="string" DataSource="@firmDepartments" @bind-Value="caseDetail.FirmDepartment"></SfDropDownList>
                </Template>
            </FormItem>
        </FormGroup>
    </FormItems>
    
   
    
</SfDataForm>

@code {
    public class Case
    {
        public string CaseType { get; set; }
        public string CaseSubtype { get; set; }
        public string OurRole { get; set; }
        public string CaseStatus { get; set; }
        public string CaseSubstatus { get; set; }
        public string ReferralType { get; set; }
        public string ReferralSubtype { get; set; }
        public string OtherFileNumber { get; set; }
        public DateTime CaseOpened { get; set; }
        public DateTime CaseClosed { get; set; }
        public DateTime Intake { get; set; }
        public DateTime PhysicalFileRetentionDate { get; set; }
        public string PhysicalFileLocation { get; set; }
        public string FirmDepartment { get; set; }
    }

    private Case caseDetail = new Case();
    private List<string> ourRoles = new List<string> { "Role1", "Role2", "Role3" };
    private List<string> caseStatuses = new List<string> { "Status1", "Status2", "Status3" };
    private List<string> caseSubstatuses = new List<string> { "Substatus1", "Substatus2", "Substatus3" };
    private List<string> referralTypes = new List<string> { "Type1", "Type2", "Type3" };
    private List<string> referralSubtypes = new List<string> { "Subtype1", "Subtype2", "Subtype3" };
    private List<string> firmDepartments = new List<string> { "Department1", "Department2", "Department3" };
}

Please check the screenshot:

For more details on form group alignment and column layout, please refer to our documentation:

If you have any further questions or need additional assistance, please let us know.

Need More Help?

Get personalized assistance from our support team.

Contact Support

1 Reply
2 Participants
Want to subscribe?
SIGN IN
Created by
ZD Zack Davis
Platform
Blazor
Control
Data Form
Created On
Aug 16, 2024 10:20 PM UTC
Last Activity On
Aug 20, 2024 01:50 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support