SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Styling and positioning text within a textarea

    I need to create and style this mockup in HTML:

    sigBox.png

    How do I position the word "SIG" and the "140 characters remain" in the top left and bottom right of the textarea? I did some Googling and it looks like the solution offered most often is to use position:absolute and put a div over or under the textarea with exactly the same position - then put the two lines of text inside the div and style away. However, the efforts I came up with didn't work so I'd appreciate some help. I used this html to play around with - but feel free to change it if there's a better solution. This is part of a longer form - here are a couple of the rows:

    <table>
    <tr>
    <td>Frequency <select><option>Select</option><option>Second</option></select></td>
    <td><textarea id="topOne">Textarea</textarea><div id="underTop"><span>SIG</span><span>140 characters remaining</span></div></td>
    </tr>
    <tr>
    <td>Brand medically necessary <input type="checkbox" /></td><td><textarea>Something else</textarea></td>
    </tr>
    </table>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    How 'bout something like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    div {float: right; position: relative;}
    textarea {padding: 20px 5px; width: 500px;}
    div span {position: absolute; display: block; color: #999;}
    span.top {top: 5px; left: 5px;}
    span.bot {bottom: 10px; right: 10px; font-style: italic;}
    
    
    </style>
    </head>
    <body>
    <form>
    <div>
        <textarea id="topOne"></textarea>
        <span class="top">SIG</span>
        <span class="bot">140 characters remaining</span>
    </div>
    </form>	
    </body>
    </html>
    EDIT: Hm, has one issue—if the user types a lot of stuff, the bottom bit will overlap text nless user scrolls to bottom of textarea.

    Personally, I would recommend placing the countdown line outside the textarea, just beneath it.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works perfectly. It never occurred to me to put the textarea inside the div and then go from there. I don't THINK the countdown line will be an issue since we're limiting the number of characters they can add, but if it is, I'll move it. Thanks for your help. : )

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Cool, you're welcome.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •