{"id":80,"date":"2008-07-30T14:20:25","date_gmt":"2008-07-30T18:20:25","guid":{"rendered":"http:\/\/www.dev-notes.com\/blog\/2008\/07\/30\/creating-a-pre-text-area-with-scroll-bar\/"},"modified":"2008-07-30T14:20:25","modified_gmt":"2008-07-30T18:20:25","slug":"creating-a-pre-text-area-with-scroll-bar","status":"publish","type":"post","link":"https:\/\/www.dev-notes.com\/blog\/2008\/07\/30\/creating-a-pre-text-area-with-scroll-bar\/","title":{"rendered":"Creating a PRE text area with scroll bar"},"content":{"rendered":"<p>I actually had this issue on Dev-Notes.com for a little while.  To get around it, I changed the style class for code so it looks like the following:<\/p>\n<pre class=\"code\">\npre.code {\n\toverflow: auto; \n\toverflow-y: visible;\n}\n<\/pre>\n<p>With this, when encountered with a long line of code, a horizontal scroll bar will appear to allow the user to scroll left and right instead of breaking the width and sometimes positioning of the parent DIV.  Below is a demo of this CSS style.<\/p>\n<pre class=\"code\">\nBufferedWriter out = new BufferedWriter(new FileWriter(\"\/folder\/anotherFolder\/thirdFolder\/anotherFolderToMakeThisLineLong\/file.txt\"));\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The PRE tag in HTML is useful when you need to control exactly how text appears, both with spacing, line breaks, etc., but it sometimes has peculiarities with Internet Explorer if at least one of the lines is longer than the width of the parent DIV.  This note shows how I get around it by creating overflow scroll bars with CSS.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-80","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":0,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}