space between two RAD text boxes
1 Answer 9 Views
Sandipan
Top achievements
Rank 1
Sandipan asked on 02 Jun 2021, 08:13 PM

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:

enter image description here

any help will be appreciated.
- by
Sandipan
Top achievements
Rank 1
on 02 Jun 2021, 09:22 PM

1 Answer, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 07 Jun 2021, 07:49 AM

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: 

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Form
Asked by
Sandipan
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or