Link to home
Start Free TrialLog in
Avatar of iboutchkine
iboutchkine

asked on

Text alignment in Textbox on ASP page

By default the text in the textbox is left justified. How to make it appear on the right or in the middle of the textbox control. I di not find the Alignment property for a textbox.
ASKER CERTIFIED SOLUTION
Avatar of mmarinov
mmarinov
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of iboutchkine
iboutchkine

ASKER

Hi Martin,
Where do I add styles to the text box.
Here is my file Styles.css

/* Default CSS Stylesheet for a new Web Application project */

BODY
{
    BACKGROUND-COLOR: white;
    FONT-FAMILY: Verdana, Helvetica, sans-serif;
    FONT-SIZE: .8em;
    FONT-WEIGHT: normal;
    LETTER-SPACING: normal;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal

}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT
{
    COLOR: #003366;
}
H1      {      
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:      2em;
      font-weight:      700;
      font-style:      normal;
      text-decoration:      none;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      }      
            
H2      {      
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:      1.75em;
      font-weight:      700;
      font-style:      normal;
      text-decoration:      none;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      }      
            
H3      {      
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:      1.58em;
      font-weight:      500;
      font-style:      normal;
      text-decoration:      none;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      }      
            
H4      {      
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:      1.33em;
      font-weight:      500;
      text-decoration:      none;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      }      
            
H5, DT      {      
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:      1em;
      font-weight:      700;
      font-style:      normal;
      text-decoration:      none;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      }      
            
H6      {      
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:      .8em;
      font-weight:      700;
      font-style:      normal;
      text-decoration:      none;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      }      
            
TFOOT, THEAD      {      
      font-size:      1em;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      font-family: Arial, Helvetica, sans-serif;
      }      
            
TH      {      
      vertical-align:      baseline;
      font-size:      1em;
      font-weight:      bold;
      word-spacing:      normal;
      letter-spacing:      normal;
      text-transform:      none;
      font-family: Arial, Helvetica, sans-serif;
      }      


A:link      {      
      text-decoration:      none;
      color:      #3333cc;
      }      
            
A:visited      {      
      text-decoration:      none;
      color:      #333399;
      }      
            
A:active      {      
      text-decoration:      none;
      color:      #333399;
      }      
            
A:hover      {      
      text-decoration:      underline;
      color:      #3333cc;
      }
      
SMALL      {      
      font-size:      .7em;
      }      

BIG      {      
      font-size:      1.17em;
      }      

BLOCKQUOTE, PRE      {      
      font-family:      Courier New, monospace;
      }      
      

UL LI      {      
      list-style-type:      square ;
      }      

UL LI LI      {      
      list-style-type:      disc;
      }      

UL LI LI LI      {      
      list-style-type:      circle;
      }      
      
OL LI      {      
      list-style-type:      decimal;
      }      

OL OL LI      {      
      list-style-type:      lower-alpha;
      }      

OL OL OL LI      {      
      list-style-type:      lower-roman;
      }      

IMG       {
      margin-top: 5px;
      margin-left: 10px;
      margin-right: 10px;
      }

.TextBoxAlignRight
{
    text-align : right;
}


 I have added .TextBoxAlign at the bottom and then modified the <asp:TextBox  tag.

Before adding

                        <asp:textbox id="txtPounds1" style="Z-INDEX: 113; LEFT: 217px; POSITION: absolute; TOP: 80px"
                        tabIndex="6" runat="server" Width="79px">0</asp:textbox>

After adding

                        <asp:textbox id="txtPounds1" style="Z-INDEX: 113; LEFT: 217px; POSITION: absolute; TOP: 80px"
                        tabIndex="6" runat="server"  CssClass="TextBoxAlignRight" Width="79px">0</asp:textbox>


Nothing happened. What am I doing wrong?
Avatar of mmarinov
mmarinov

hi iboutchkine,

i've just copied your code and everything was fine - the text was right aligned in the textbox
i've tested it on IE 6 and NS 7 and it was OK


Regards,
B..M
Avatar of iboutchkine
iboutchkine

ASKER

Do you have to drag and drop the Styles.css on to the form? Maybe this is the reason it does not work for me?
Avatar of mmarinov
mmarinov

i've tested it in 2 ways
1 way

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>Navigation1</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <LINK href="..\StyleSheet1.css" type="text/css" rel="stylesheet">
        <style>
        BODY
{
    BACKGROUND-COLOR: white;
    FONT-FAMILY: Verdana, Helvetica, sans-serif;
    FONT-SIZE: .8em;
    FONT-WEIGHT: normal;
    LETTER-SPACING: normal;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal

}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT
{
    COLOR: #003366;
}
H1     {    
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:     2em;
     font-weight:     700;
     font-style:     normal;
     text-decoration:     none;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     }    
         
H2     {    
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:     1.75em;
     font-weight:     700;
     font-style:     normal;
     text-decoration:     none;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     }    
         
H3     {    
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:     1.58em;
     font-weight:     500;
     font-style:     normal;
     text-decoration:     none;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     }    
         
H4     {    
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:     1.33em;
     font-weight:     500;
     text-decoration:     none;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     }    
         
H5, DT     {    
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:     1em;
     font-weight:     700;
     font-style:     normal;
     text-decoration:     none;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     }    
         
H6     {    
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:     .8em;
     font-weight:     700;
     font-style:     normal;
     text-decoration:     none;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     }    
         
TFOOT, THEAD     {    
     font-size:     1em;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     font-family: Arial, Helvetica, sans-serif;
     }    
         
TH     {    
     vertical-align:     baseline;
     font-size:     1em;
     font-weight:     bold;
     word-spacing:     normal;
     letter-spacing:     normal;
     text-transform:     none;
     font-family: Arial, Helvetica, sans-serif;
     }    


A:link     {    
     text-decoration:     none;
     color:     #3333cc;
     }    
         
A:visited     {    
     text-decoration:     none;
     color:     #333399;
     }    
         
A:active     {    
     text-decoration:     none;
     color:     #333399;
     }    
         
A:hover     {    
     text-decoration:     underline;
     color:     #3333cc;
     }
     
SMALL     {    
     font-size:     .7em;
     }    

BIG     {    
     font-size:     1.17em;
     }    

BLOCKQUOTE, PRE     {    
     font-family:     Courier New, monospace;
     }    
     

UL LI     {    
     list-style-type:     square ;
     }    

UL LI LI     {    
     list-style-type:     disc;
     }    

UL LI LI LI     {    
     list-style-type:     circle;
     }    
     
OL LI     {    
     list-style-type:     decimal;
     }    

OL OL LI     {    
     list-style-type:     lower-alpha;
     }    

OL OL OL LI     {    
     list-style-type:     lower-roman;
     }    

IMG      {
     margin-top: 5px;
     margin-left: 10px;
     margin-right: 10px;
     }

.TextBoxAlignRight
{
    text-align : right;
}
        </style>
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
             <asp:textbox id="txtPounds1" style="Z-INDEX: 113; LEFT: 217px; POSITION: absolute; TOP: 80px"
                    tabIndex="6" runat="server"  CssClass="TextBoxAlignRight" Width="79px">0</asp:textbox>
        </form>
    </body>
</HTML>

2 way
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>Navigation1</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <LINK href="..\StyleSheet1.css" type="text/css" rel="stylesheet">
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
            <uc1:Navigation id="Navigation2" runat="server" backColor="#84b0c7" Owner="Orders"></uc1:Navigation>
             <asp:textbox id="txtPounds1" style="Z-INDEX: 113; LEFT: 217px; POSITION: absolute; TOP: 80px"
                    tabIndex="6" runat="server"  CssClass="TextBoxAlignRight" Width="79px">0</asp:textbox>
        </form>
    </body>
</HTML>
where i put all the styles in the StyleSheet1.css file

Regards,
B..M
Avatar of iboutchkine
iboutchkine

ASKER

Yes that was it. I forgot to drag and drop the Sty;es.css to the form
Avatar of iboutchkine
iboutchkine

ASKER

Thank you, Martin :)
Avatar of mmarinov
mmarinov
You are welcome

Regards,
B..M
Avatar of Ismaeel
Ismaeel
txtBoxName.Attributes["dir"] = "rtl"