This is a migrated thread and some comments may be shown as answers.

Inline Form Controls Width Problem

2 Answers 392 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Veteran
Michael asked on 08 Apr 2020, 05:34 AM

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;
    }
 
 
}

 

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 08 Apr 2020, 08:20 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
Veteran
answered on 08 Apr 2020, 08:44 PM

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.

Tags
General Discussions
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 1
Veteran
Share this question
or