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

2 posts, 0 answers
  1. Philip
    Philip avatar
    69 posts
    Member since:
    Mar 2016

    Posted 03 Jun Link to this post

    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>
     
                           <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>
     
                           <!-- Text input-->
                           <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>
                           <!-- Text input-->
                           <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>
                           <!-- Text input-->
                           <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>
                           <!-- Text input-->
                           <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>
     
                           <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>
     
                           <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>
     
                           <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>
     
                           <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>
                           <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>
     
     
                           <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>
     
                           <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>
     
                           <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>
     
                           <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>
     
                           <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>
     
                           <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>
     
                           <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>
     
                           <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>
                           <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>
     
                           <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>
     
     
                           <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>
                           </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>
     
     
                           <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>
     
     
                           <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>
     
                           <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>
                       </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>
     
     
     
                           <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>
                           <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>
     
                           <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>
     
                           <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>
     
     
     
                           <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>
     
     
                           <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>
     
     
                           <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>
                           </div>
                       </div>
     
                       <!-- /tabs -->
                   </fieldset>
               
     
             
            </div> </div>

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    139 posts

    Posted 08 Jun Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top