space between two RAD text boxes

[Sandipan]

I have the following code for radTextBoxes arranged in three columns. I want space between each text box. I tried to put the margin-bottom css on one of the text box, but that did not work. Below is my code:

<div class="componentWraper">
             <telerik:RadPageLayout  ID="OriginDept" runat="server" GridType="Fluid" CssClass="tx_enquiry_form tx_contact">
                 
            <Rows>
                <telerik:LayoutRow>
                    <Columns>
                        <telerik:LayoutColumn Span="4" SpanMd="6" SpanSm="12" SpanXs="12" >
                             <telerik:RadTextBox  CssClass="t-row"   runat="server" ID="TbFirstName" Width="100%" TabIndex="1" Label="First Name *" ></telerik:RadTextBox>
                             <telerik:RadTextBox runat="server" ID="TbLastName" Width="100%" TabIndex="2" Label="Last Name *"></telerik:RadTextBox>
                             <telerik:RadTextBox runat="server" ID="TbEmail" Width="100%" TabIndex="3" Label="Email *"></telerik:RadTextBox>
                        </telerik:LayoutColumn>
                           <telerik:LayoutColumn Span="4" SpanMd="6" SpanSm="12" SpanXs="12">
                              <telerik:RadTextBox runat="server" ID="TbPhone" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                              <telerik:RadTextBox runat="server" ID="TbMobile" Width="100%" TabIndex="5" Label="Mobile *"></telerik:RadTextBox>
                              <telerik:RadTextBox runat="server" ID="RadTextBox3" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                      </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="4" SpanMd="6" SpanSm="12" SpanXs="12">
                              <telerik:RadTextBox runat="server" ID="RadTextBox1" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                              <telerik:RadTextBox runat="server" ID="RadTextBox2" Width="100%" TabIndex="5" Label="Mobile *"></telerik:RadTextBox>
                               <telerik:RadTextBox runat="server" ID="RadTextBox4" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                      </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
            </Rows>


        </telerik:RadPageLayout>
                </div>

I tried to put CssClass="t-row" on one of the text box, but nothing happened. Below is the style sheet defined:

 .t-row {
        margin-bottom: 100px;
    }


 .tx_contact {
        padding-bottom: 10px;
        background: #efefef;
        margin-top: 50px;
       
    }

    .componentWraper {
        margin: 20px; /* just for contrast */
        position: relative;
        border: 2px solid lightblue;
        border-radius: 12px;
        padding: 20px;
        background-color: #efefef;
    }

        .componentWraper .componentTitle {
            position: absolute;
            top: -25px;
            background: #efefef;
            padding: 0 10px;
        }
       

Below is the screenshot of page where there is no space between text boxes:

[Sandipan]

any help will be appreciated.

[Vessy]

Hi Sandipan,

In order to apply the desired margin, you will need to make the used CSS selector a little bit more specific. For example:

        .RadInput .t-row {
            margin-bottom: 100px;
        }

You can read more about CSS specificity here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Vessy
Progress Telerik