Details

Written by Tech Notes

Published: 06 September 2017

How To Fix Text Overflowing Out Of Display Or screen Area On Joomla Articles And Any Other CMS Page.

Choosing a title for this article was not trivial as so many apply.  The title of "How To Put Source Code Into Scrollable Window On Blog" would have been good too and I even initially used "To Fit Long Text/Code Samples In Blog/Article In Joomla Or Any Web Page Or Blog".

This article provides a quick, but manual, fix for when you got an over running text past the window/screen size on Joomla articles or any other CMS pages or website pages.  This especially has a major impact on mobile devices and portable devices like tablets and pads.  I've put this in the Joomla section, but it can be used anywhere and with any CMS platform.

I try to keep my articles as short as possible with the idea that I'll be using it as a quick reference myself later, and be able to find what I want quickly.  Usually, it's a good idea to bookmark the page to come back when needed and copy and paste what you need.

I estimate that this article took about 3 hours to make.
Please note that I do not get paid to write these articles.

For this example, we will make the assumption that you have assigned the format of "code" to your text content via the Joomla editor.  Code is assigned from the expanded Joomla editor by going to Format menu >> Formats >> Inline >> Code.

Steps

1. Open article from within Joomla admin area.  This means begin editing the article.
   
   
2. Click the "Source code" button on your editor.  It looks like this
   
   
   
3. Search (push the two keys of ctrl and f simultaneously on your keyboard to initiate a browser search of your page content) your page sub-window showing the source code for the phrase "<code>".  This is because we are assuming for this example that you assigned the format of Code to the text content.
   
   
4. Before the phrase of <code> in the source code of the HTML, add the below HTML code, and then add "</div>" after the phrase "</code>":
   
   
   
   <div style="height: 150px; line-height: 1.5em; overflow: scroll; padding: 5px; background-color:rgb(7, 222, 207); color:#714D03; border: 4px double #076cde;">

   
   * You can adjust the box height by increasing or decreasing the 150 number for height.
   
   * You can change the spacing between the lines by increasing or decreasing the 1.5 number for line-height.
   
   * The "overflow: scroll" indication is what causes the scroll bars to show when the site visitor's screen size/display size provides less spaced than needed to show the continuous line of text.
   
   * You can adjust the distance of the text from the border of the box by increasing or decreasing the 5 number for padding.
   
   * You remove the background color by removing the phrase "background-color:rgb(7, 222, 207)".
   
   * You can adjust the back ground color by changing the values of (7, 222, 207) or have it indicated as a hexadecimal number with the format of #07decf.  Note that the Joomla editor may automatically convert your rgb number to a hexadecimal number format.
   
   * Text color can be controlled via the "color" word by changing the number of 714D03.
   
   * The border thickness can be controlled by increasing or decreasing the 4 number for "border".
   
   * You can change the double lined border effect and have a single border by replacing the word "double" with "solid".
   
   * The border color can be changed by changing the hexadecimal value of 076cde that shows after double.
   
   Here is another example.
   
   
   <div style="height: 150px; line-height: 1.5em; overflow: scroll; padding: 5px; border: 2px solid #076cde;">

   The difference between this and the above example is that this has no background color, single solid border, a thinner border, and no color has been assigned to it's text content.
   
   
   

That's All.

Consider Contributing

• Article Contribution:
  Consider submitting an article of your own to Tech Notes.  I will create a sub-category for your article if needed.  Guest articles are welcome!
  
  
• Financial Contribution:
  If you found this article or any Tech Notes article useful, and you'd like to make a financial contribution as a simple thanks (no fear, any small amount can be given), you can use the Paypal contribution button which is safe and does not require you to have a Paypal account to make a contribution to Tech Notes. 

Feel Free To Leave A Good Comment. :)

Look around this site and it's menus, and you may find other useful articles.