johnsu01 (johnsu01) wrote,

Quills and the Firefox DOM inspector

Changing the way the default Quills CSS handles overflow, to have long lines handled nicely.

I've transfered all of the entries that were in the Computers and Code folder previously into my blog folder here. In doing that, I ran into a problem with overflow and some of the long lines that are in the code in some of these entries. In a regular document content type, these lines caused a horizontal scrollbar to appear, which was great. But in a Quills entry, they made the central column very wide, which was not great.

The problem had to be in the Quills CSS, since I knew these exact same entries worked fine in the document content type. domestos on #plone suggested I use the Firefox DOM inspector to help find the problem.

The DOM inspector is very handy. Debian users can get it with apt-get install mozilla-firefox-dom-inspector. It gives a nice visual view of the document structure so you can tell what CSS is affecting what stuff.

Anyway, this was not a complicated problem in the end. Adding overflow: auto; to .weblog-summary and .weblog-body in the Quills CSS seems to have solved the issue. The former fixes it on the overview page, while the latter fixes it in the individual entry view.

I was flustered for a while after this by the width of the content column in the individual entry view. It was even wider than the long code lines, so this was a separate problem from the above. Then I noticed how long the Trackback URL was at the bottom. The solution is to add overflow: auto to div.trackbacks. Don't add it to div.entry-trackback, otherwise you will end up with a little vertical scrollar as well.

Tags: css, firefox, quills, web design
  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.