treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Mediawiki - stop a nav box extending so that users don't have to scroll LTR

  • I run a mediawiki website and we are trying to implement a new navbox template taken from wikipedia.

    I have installed the templates and populated one as a test - the issue I am having is that the template output does not stay within the page. This forces users to scroll to the right to see any long lists. I have tried to look at the css using firebug without much luck.

    Any advice ?

    Link to page with navbox and the scrolling issue. SOTW Template... Drew

  • The simplest answer would be not to use a table but I guess that's out of the question?

  • .hlist dd, .hlist dt, .hlist li {
      white-space: nowrap;
    }
    

    That's from styles in load.php, remove it for starters. A more elegant solution imho would be to add white space between each li, so they wrap naturally.

    </li><li><a href="/wiki/Category:Afghanistan" title="Category:Afghanistan">Afghanistan </a>
    </li><li><a href="/wiki/Category:Aitutaki" title="Category:Aitutaki">Aitutaki </a>
    

    would become

    <li><a href="/wiki/Category:Afghanistan" title="Category:Afghanistan">Afghanistan</a></li> 
    <li><a href="/wiki/Category:Aitutaki" title="Category:Aitutaki">Aitutaki</a></li>