Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    196
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Clipped Scrollbar and Border in Webkit

    Part of the textarea scrollbar and border is cut off:

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>Clipped Scrollbar and Border in Webkit</title>
        <style>
            textarea,
            iframe {
                display: block;
                width: 300px;
                margin: 0;
                padding: 0;
            }
            textarea {
                height: 200px;
                resize: none;
                outline: 0;
                border: solid red;
                border-width: 0 0 5px;
            }
            iframe {
                height: 0;
                border: 0;
            }
        </style>
    </head>
    
    <body>
        <textarea>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
            <p>Hello, world!</p>
        </textarea>
        <iframe srcdoc="<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>"></iframe>
    </body>
    
    </html>
    DEMO

    Why does it happen? What's the fix?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Rain Lover,

    The cause of your problem appears to be...
    Code:
    
    iframe {
        height:0;
        border:0;
     }
    
    If you don't want it behave oddly, why not just use this instead...
    Code:
    
    iframe {
        display:none;
     }
    

    coothead
    Last edited by coothead; 05-05-2014 at 11:36 AM.


  •  

    Posting Permissions

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