Search code examples
cssflexboxtelerik

space between two text boxes

I have the following code for radTextBoxes. 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:

</telerik:RadPageLayout>
        <div class="componentWraper">
         <telerik:RadPageLayout  ID="OriginDept" runat="server" GridType="Fluid" >
             
        <Rows>
            <telerik:LayoutRow>
                <Columns>
                    <telerik:LayoutColumn Span="4" >
                         <telerik:RadTextBox CssClass="t-row"   runat="server" ID="txtDept" Width="100%" TabIndex="1" Label="Department *" ></telerik:RadTextBox>
                        <span style="margin-top:200px"></span>
                         <telerik:RadTextBox runat="server" ID="TbLastName" Width="100%" TabIndex="2" Label="Section/Divison *"></telerik:RadTextBox>
                         
                    </telerik:LayoutColumn>
             
                </Columns>
            </telerik:LayoutRow>
        </Rows>
    </telerik:RadPageLayout>
            </div>
        </telerik:RadAjaxPanel>

I want the space between Department text box and section/.division text box. I tried to put the margin in between, but that didn't work.

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

enter image description here

Solution 
  • <telerik:RadPageLayout  ID="OriginDept" runat="server" GridType="Fluid" >             
    <Rows>
        <telerik:LayoutRow>
            <Columns>
                <telerik:LayoutColumn Span="4" >
                     <telerik:RadTextBox runat="server" ID="TbLastName" Width="100%" TabIndex="2" Label="Section/Divison *"></telerik:RadTextBox>                         
                </telerik:LayoutColumn>             
            </Columns>
        </telerik:LayoutRow>
        <telerik:LayoutRow style="margin-top: 200px">
            <Columns>
                <telerik:LayoutColumn Span="4" >
                     <telerik:RadTextBox runat="server" ID="RadTextBox2" Width="100%" TabIndex="2" Label="Section/Divison *"></telerik:RadTextBox>                         
                </telerik:LayoutColumn>             
            </Columns>
        </telerik:LayoutRow>
    </Rows>
</telerik:RadPageLayout>

    You are trying to separate your boxes into separate rows. Put them in different Telerik:LayoutRows

    You can then put a CssClass onto the bottom telerik:LayoutRow to give margin to the top, or put inline style from my example.