Window size: how to get rid of scroll scrolling in Firefox

Here is a sample code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Sample Textarea</title> <style type="text/css"> * {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;} textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;} </style> </head> <body> <form action="#"> <textarea rows="1" cols="1">This is some text.</textarea> </form> </body> </html> 

I used the box-sizing property to set the width of textarea to 100% plus some addition and works in all major browsers. However, in Firefox, if you add more content to the text box, you will see an unwanted addition around the scrollbar.

+4
source share
1 answer

Firefox applies the add-on not only to content, but also to the scroll bar.

Change the textarea style definition to read as follows:

 textarea { overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; line-height:26px; padding: 0; padding-left: 6px; } 

This fixes the fill problem, but if there are two or more lines of text, it will look somewhat inconvenient.

+2
source

Source: https://habr.com/ru/post/1388744/


All Articles