Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

positioning a text inside an input tag

Status
Not open for further replies.
davikokar

davikokar

Technical User
May 13, 2004
523
IT
Hallo,
does someone know how to position the text inside an input tag (textarea). If the textarea is a little bit higher than the text, the cursor automatically position itself on top position. I would like to control this but I've no idea how... thanks for suggestions
 
Sort by date Sort by votes
Hi,

You can use CSS to control the layout -however, I'm not sure exactly what you're asking ... could you please post a (brief) example.

Cheers


Jakob
 
Upvote 0 Downvote
hallo jakob,
well, the problem is that if I have a textfield that 25 px high and the text inside the textfield is going to be 12px high, then the text will be aligned on the top of the textfield. The example:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<style>
input.text {border-color: #000000;
border-width:1px;
font-family: arial;
font-size:12px;
display:inline;
width: 192px;
height :25px;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="textarea" name="textarea" value="hallo" class="text">
</form>
</body>
</html>
 
Upvote 0 Downvote
Apply some padding to the box. It's not really automatic centering, but you can make it work:
Code: 
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style>
      input.text {border-color: #000000; 
           border-width: 1px; 
           font-family: Arial; 
           font-size: 12px;         
           display: inline;
           width: 192px;
           height: 25px;
	   padding: 3px 2px 3px 2px;
      }
    </style>
  </head>
  <body>
    <form name="form1" method="post" action="">
      <input type="textarea" name="textarea" value="hallo" class="text">
    </form>
  </body>
</html>
 
Upvote 0 Downvote
karerda,

Add the following to your CSS definition for the input box:

Code: 
line-height: 25px;

Hope this helps,
Dan
 
Upvote 0 Downvote

Sorry - forgot to mention.... You can increase or decrease that vaue to move the text (and thus the cursor, too) up or down accordingly.

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
234
lmcate
lmcate
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
792
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
239
Alt255
Alt255
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
826
spamjim
spamjim
SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
159
SitesMasstec
SitesMasstec

Part and Inventory Search

Sponsor

Back
Top