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

Cant seem to add a 10 margin bottom as space to form control comboxbox ?

1 Answer 289 Views

ComboBox

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

Philip asked on 03 Jun 2016, 11:37 AM

firefox_2016-06-03_12-32-50.png

I am using radComboBox for lists but im having an issue in being able to apply a margin bottom so that the labels and the controls I have tried to apply the 10 margin bottom via

.form-group{
margin-bottom:10px;

}

.RadComboBox RadComboBox_Bootstrap {
margin-bottom: 15px;
}

     .RadComboBox .rcbReadOnly .rcbInput, .RadComboBox .rcbDisabled .rcbInput .RadComboBox_Bootstrap table
        {
            margin-bottom:10px;

        }

Below is how i layout my forms.

<form class="form-horizontal">

<fieldset>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Is Joint Application</label>

<div class="col-md-8">

<label class="checkbox">

<telerik:RadCheckBox Skin="Bootstrap" ID="chkIsJointApplication" runat="server"></telerik:RadCheckBox>

</label>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">IVA Code</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtIVACode" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">

First Name</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtFirstName" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Middle Name</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtMiddle" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">

Surname</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtSurname" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Saluatation</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtsaluatation" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Ailases</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtAilases" CssClass="form-control" Width="40%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Marital Status</label>

<div class="col-md-8">

<telerik:RadComboBox ID="rdMartialStatus" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Address Line 1</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtAddressLine1" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Address Line 2</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtAddressLine2" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">City</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtCity" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Post Code</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtPostCode" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">County</label>

<div class="col-md-8">

<telerik:RadComboBox ID="dpCounty" CssClass="form-group-lg" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Country</label>

<div class="col-md-8">

<telerik:RadComboBox ID="dpCountry" Width="50%" CssClass="form-group-lg" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Date Of Birth</label>

<div class="col-md-8">

<telerik:RadDatePicker ID="rdDob" Skin="Bootstrap" runat="server"></telerik:RadDatePicker>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Age</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtAge" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Home Tel NO.</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtHomeTelNo" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Work Tel No</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtWorkTelNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Fax No</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtFaxNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Mobile No</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtMobileNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Best Time to Call</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtBestTimeToCall" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Prefered Contact Method</label>

<div class="col-md-8">

<telerik:RadComboBox ID="rdPreferedContactMethod" Width="50%" CssClass="form-group-lg" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>

</div>

</fieldset>

</div>

<div class="tab-pane" id="two-normal">

<fieldset>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">AML C</label>

<div class="col-md-8">

<telerik:RadCheckBox ID="chkAmlCPerformed" CssClass="form-group-lg" runat="server" Text=""></telerik:RadCheckBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Consent given 3rd Parties?</label>

<div class="col-md-8">

<telerik:RadCheckBox ID="chkConsentGiven" runat="server" Text=""></telerik:RadCheckBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Property owned in last 5 years?</label>

<div class="col-md-8">

<telerik:RadCheckBox ID="chkOwned2Years" CssClass="form-group-lg" runat="server" Text=""></telerik:RadCheckBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Number Of Searches</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtNoSearchers" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Residential Status</label>

<div class="col-md-8">

<telerik:RadComboBox ID="rdResidentialStatus" Width="50%" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Date Known at Address</label>

<div class="col-md-8">

<telerik:RadDatePicker ID="rdDateKnownatAddress" CssClass="form-group-lg" runat="server"></telerik:RadDatePicker>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">KYC/AML Check</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtkycamlCheck" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Passport Number</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtpassportNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Driving License Number</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtDrivingLicenseNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Secuirty Question</label>

<div class="col-md-8">

<telerik:RadTextBox ID="RadTextBox6" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Secuirty Answer</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtSecurityAnswer" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Notes</label>

<div class="col-md-8">

<telerik:RadTextBox ID="txtNotes" CssClass="form-group-lg" Rows="10" Columns="10" runat="server"></telerik:RadTextBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Deceased?</label>

<div class="col-md-8">

<telerik:RadCheckBox ID="chkDeceased" CssClass="form-group-lg" runat="server"></telerik:RadCheckBox>

</div>

<div class="form-group">

<label class="col-md-4 control-label" for="textinput">Date Deceased?</label>

<div class="col-md-8">

<telerik:RadDatePicker ID="dateDeceased" CssClass="form-group-lg" runat="server"></telerik:RadDatePicker>

</div>

</fieldset>

</div> </div>

1 Answer, 1 is accepted

answered on 08 Jun 2016, 08:46 AM

ComboBoxMarginBottom.zip

Hello Philip,

There are some misplaced closing div tags that break the correct rendering on the browser. This is the reason the CSS is not applied as expected. In the attached file you will find the refactored code.

Regards,
Peter Milchev
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.