How to increase the width of the Book module’s reading area (Moodle 1.9.15)

1809

Peter Skoda (http://skodak.org) and Mojmir Volf are the authors of the Book resource. The Book resource is one of the major reasons why I love Moodle. It’s a brilliant resource because it allows me to group related articles and webpages in a nice package. Something like the HTML frameset objects which were very common during the early days of HTML and the Internet. In short, I can’t live without it. And neither can most of you Moodlers reading this I would reckon.

Post Pages - Post Inline - WIRIS

The challenge: 
Recently I was using the Book resource to encapsulate articles on Sew What? Incorporated.  I was doing this work as part of my teaching of MIS at Stamford College Malacca, specifically a case study the Sew What Inc. So anyway, I discovered that I wanted to increase the width of the reading area of the Book resource. Why would I want to do that? I was embedding a Dell webpage into a book chapter and I found that

  1. I couldn’t view the embedded webpage’s entire width within the book
  2. the embedded content did not fit inside the right area of the book resource. The embedded website needed horizontal scroll bars (hmmm….) at the bottom of the display area in order for me to view the Dell site in its entirety.

When you click on a link on the TOC (Table of Contents) in a book, you would want to view the right-hand-side content easily, and with no fuss. In this case, using the mouse to scroll left was very irritating.

BTW, here’s the embedded code that I used in the reading area.

<table cellspacing="0" style="width:100% !important;background:#999 !important;padding:0px !important;margin:0px !important;border:0px !important;border-collapse:collapse !important"><tr><td style="background:#999 !important;padding:1px !important;margin:0px !important;border:0px !important;"><iframe src="http://www.dell.com/html/us/segments/bsd/case_studies/sew/index.html" scrolling="yes" frameborder="0" style="display:block !important;width:100% !important;height:400px !important;background:#D4D0C8 !important;padding:0px !important;margin:0px !important;border:0px !important;"><a href="http://moodurian.com/">Moodurian.com</a>; (iframes required)</iframe></td></tr></table>

The embedded code worked, but unfortunately the content did not fit nicely inside the Book’s reading area.  By default, the width of the TOC (located on the left) is 140 pixels.To solve this, I …(read more here) >>