Inline Form Controls Width Problem

[Michael]

I'm having a problem getting the Telerik controls to set their widths properly when there is more than one Telerik control in the same form-group row.

Short of setting the width to something fixed, the controls are not using to the proper space based on the bootstrap grid definitions.  Rows in which there are only one Telerik control seem fine.  I've experimented with a number of approaches but haven't been able to fix it.  Any help would be appreciated.

@page "/formrowtest"

@if (showForm)
{

    <div class="container">
        <form class="form">
            <div class="form-group row">
                <label for="person" class="col-12 col-sm-2 col-form-label">Person</label>
                <div class="col-12 col-sm-10">
                    <div class="input-group">
                        <TelerikTextBox Id="person"
                                        Class="form-control" />

                        <div class="input-group-append">
                            <TelerikButton ButtonType="ButtonType.Button"
                                           Icon="@IconName.Reset" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <label for="organization" class="col-12 col-sm-2 col-form-label">Organization</label>
                <div class="col-12 col-sm-10">
                    <div class="input-group">
                        <TelerikTextBox Id="organization"
                                        Class="form-control" />
                        <div class="input-group-append">
                            <TelerikButton ButtonType="ButtonType.Button"
                                           Icon="@IconName.Reset" />
                        </div>
                    </div>
                </div>
            </div>


            <div class="form-group row">
                <div class="col-sm-12 col-md-4">
                    <label class="sr-only" for="communicationtype">Type</label>
                    <TelerikDropDownList Id="communicationtype"
                                         Data="@CommunicationTypes"
                                         TextField="Description"
                                         ValueField="TypeId"
                                         PopupHeight="Auto"
                                         PopupWidth="Auto"
                                         @bind-Value="SelectedTypeId" />
                </div>

                <div class="col-sm-12 col-md-4">
                    <label class="sr-only" for="commdescription">Description</label>
                    <TelerikTextBox Id="commdescription"
                                    Width="100%" />
                </div>

                <div class="col-12 col-sm-4">
                    <div class="input-group">
                        <TelerikTextBox Id="comminstructions" />

                        <div class="input-group-append">
                            <TelerikButton ButtonType="ButtonType.Button"
                                           Icon="@IconName.Zoom" />
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
}

@code {

    private bool showForm = false;
    private class CommunicationType
    {
        public int TypeId { get; set; }
        public string Description { get; set; }
    }

    List<CommunicationType> CommunicationTypes { get; set; } = new List<CommunicationType>();
    public int SelectedTypeId { get; set; }

    protected override async Task OnInitializedAsync()
    {
        CommunicationTypes.Add(new CommunicationType() { TypeId = 0, Description = "Unknown" });
        CommunicationTypes.Add(new CommunicationType() { TypeId = 1, Description = "Office" });
        CommunicationTypes.Add(new CommunicationType() { TypeId = 2, Description = "Direct" });
        CommunicationTypes.Add(new CommunicationType() { TypeId = 3, Description = "Fax" });
        CommunicationTypes.Add(new CommunicationType() { TypeId = 4, Description = "Cell" });
        CommunicationTypes.Add(new CommunicationType() { TypeId = 5, Description = "Home" });

        SelectedTypeId = 1;

        showForm = true;
    }


}

 

[Marin Bratanov]

Hi Michael,

I am attaching here a sample I built with the provided code and a screenshot that illustrates what I get - I see no issues in the Telerik components. Am I missing something?

That said, I'd suggest creating the layout you want with standard inputs and replace them with Telerik components with the same settings when satisfied with the results. Here and here are the two known issues with dimensions that may affect such layouts. 

I also made a second example for you - where I added the form-control class where it was missing, and I am also attaching the results from that and its code - I do not see issues in the Telerik components behavior, and they conform to the same layout and rules as the standard inputs.

 

Regards,
Marin Bratanov
Progress Telerik

[Michael]

Thanks to your examples I was able to get it sorted out.   I think the missing form-control class may have been the biggest problem.   

Sometimes it's hard to determine if it's a Telerik or Bootstrap issue.  

Thanks again for your quick and thorough reply.