locked
Using Margins, Really annoying but probably easy. RRS feed

  • Question

  • User2037455357 posted

    if I have  4 objects vertically inline with each other.

    ie Label1,  Textbox1, Label2, Textbox2

    I am satisfied with the positioning of Label1, Textbox1 & Label2.

    but I want to move Textbox2 to the Right a bit WITHOUT affecting anything else, ie a LEFT MARGIN will not push the other 3 objects to the left as well.

    I just want Label2 to move to the right a bit. 

    How do I do that.??

    Wednesday, September 18, 2019 3:25 PM

Answers

  • User288213138 posted

    Hi masterdineen,

    masterdineen

    All I want to do is move TextBox1 to the right a bit Say 50px

    To move the TextBox1 to the right you need to use the margin-left property.

    Note: If you change the position of Textbox1, td will change relatively. You can set margin-left=50px for Label1 to restore the original style.

    <style>
            #TextBox1{
                margin-left:50px;
            }
            #Label1{
                margin-left:50px;
            }     
        </style>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 19, 2019 3:11 AM

All replies

  • User475983607 posted

    I just want Label2 to move to the right a bit. 

    How do I do that.??

    We cannot see your markup.

    Wednesday, September 18, 2019 3:26 PM
  • User2037455357 posted

    here we go

    See markup below.

    All I want to do is move TextBox1 to the right a bit Say 50px, without affecting anything else whilst keeping everything else inline with each other.

    I try to do with with margin, but whatever is to the left or right ( Depending on the margin I use ) everything is push away from each other.

    see markup below.  Regard Rob

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignmentTest.aspx.cs" Inherits="TestDropdowns.AlignmentTest" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
    
    <table  style="width:100%; text-align:center;" >
                    <tr>
                        <td class="auto-style14">
                            <asp:Label ID="RiskAss_ClientType_Lbl" runat="server" Text="Client Type" height="20px" BorderStyle="Solid" ForeColor="Red"  style="font-weight: bold;" Width="100px"></asp:Label>
                           
                            <asp:DropDownList ID="RiskAss_ClientType_DropDown" runat="server" BackColor="#f8f8f8" BorderStyle="Solid" ForeColor="Red" style="border:solid;" Width="250px" height="20px">
                                <asp:ListItem Selected="True">Select</asp:ListItem>
                            </asp:DropDownList>
                           
                            <asp:Label ID="ClientTypeSpace_Lbl" runat="server" BackColor="White" height="20px" Width="83px" BorderStyle="Solid" ForeColor="Red"></asp:Label>
                           
                            <asp:Label ID="Date_Lbl" runat="server" height="20px" Width="150px" Text="Date" BorderStyle="Solid" ForeColor="Red" style ="font-weight: bold;"></asp:Label>
                           
                            <asp:TextBox ID="Date_TxtBox" runat="server" BackColor="#f8f8f8" BorderStyle="Solid" ForeColor="Red" height="20px" Width="100px" TextMode="Date"></asp:TextBox>
                        </td>
                    </tr>
    
    
         <tr>
                        <td class="auto-style14">
                            <asp:Label ID="Label1" runat="server" Text="Client Type" height="20px" BorderStyle="Solid" ForeColor="Green"  style="font-weight: bold;" Width="100px"></asp:Label>
                           
                            <asp:DropDownList ID="DropDownList1" runat="server" BackColor="#f8f8f8" BorderStyle="Solid" ForeColor="Green" style="border:solid;" Width="250px" height="20px">
                                <asp:ListItem Selected="True">Select</asp:ListItem>
                            </asp:DropDownList>
                           
                            <asp:Label ID="Label2" runat="server" BackColor="White" height="20px" Width="83px" BorderStyle="Solid" ForeColor="Green"></asp:Label>
                           
                            <asp:Label ID="Label3" runat="server" height="20px" Width="150px" Text="Date" BorderStyle="Solid" ForeColor="Green" style ="font-weight: bold;"></asp:Label>
                           
                            <asp:TextBox ID="TextBox1" runat="server" BackColor="#f8f8f8" BorderStyle="Solid" ForeColor="Green" height="20px" Width="100px" TextMode="Date"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                
    
    
    
    
            </div>
        </form>
    </body>
    </html>
    

    Wednesday, September 18, 2019 3:46 PM
  • User288213138 posted

    Hi masterdineen,

    masterdineen

    All I want to do is move TextBox1 to the right a bit Say 50px

    To move the TextBox1 to the right you need to use the margin-left property.

    Note: If you change the position of Textbox1, td will change relatively. You can set margin-left=50px for Label1 to restore the original style.

    <style>
            #TextBox1{
                margin-left:50px;
            }
            #Label1{
                margin-left:50px;
            }     
        </style>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 19, 2019 3:11 AM