Forum Bugs

<code> not breaking correctly

felipellrocha
It looks like if a <code> block is bigger than the page itself, prince doesn't render the page correctly. Attached is a screenshot.
  1. Screen Shot 2014-07-09 at 5.29.58 PM.png52.1 kB
mikeday
There must be some other CSS being applied in this case, it is being floated, absolutely positioned, or formatted as an inline-block?
felipellrocha
It's inside of a <pre> tag. Could that be it?
mikeday
It should still break properly across pages. Can you load the HTML in a browser and use DOM inspector to see what CSS properties are being applied?
felipellrocha
I've got this for the css:

pre code,
.hljs {
  display: inline-block;
  padding: 7px 15px;
  background: #002b36;
  color: #839496;
  width: 100%;
  margin-bottom: 15px;
  box-sizing: border-box;
}


and html:
<pre><code class="lang-python3">&gt;&gt;&gt; <span class="hljs-reserved">import</span> cards
&gt;&gt;&gt; game = cards.OldMaidGame()
&gt;&gt;&gt; game.play([<span class="hljs-string">"Allen"</span>,<span class="hljs-string">"Jeff"</span>,<span class="hljs-string">"Chris"</span>])
---------- Cards have been dealt
Hand Allen contains
King <span class="hljs-keyword">of</span> Hearts
 Jack <span class="hljs-keyword">of</span> Clubs
  Queen <span class="hljs-keyword">of</span> Spades
   King <span class="hljs-keyword">of</span> Spades
    <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Diamonds

Hand Jeff contains
Queen <span class="hljs-keyword">of</span> Hearts
 Jack <span class="hljs-keyword">of</span> Spades
  Jack <span class="hljs-keyword">of</span> Hearts
   King <span class="hljs-keyword">of</span> Diamonds
    Queen <span class="hljs-keyword">of</span> Diamonds

Hand Chris contains
Jack <span class="hljs-keyword">of</span> Diamonds
 King <span class="hljs-keyword">of</span> Clubs
  <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Spades
   <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
    <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Clubs

Hand <span class="hljs-attribute">Jeff</span>: Queen <span class="hljs-keyword">of</span> Hearts matches Queen <span class="hljs-keyword">of</span> Diamonds
Hand <span class="hljs-attribute">Chris</span>: <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Spades matches <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Clubs
---------- Matches discarded, play begins
Hand Allen contains
King <span class="hljs-keyword">of</span> Hearts
 Jack <span class="hljs-keyword">of</span> Clubs
  Queen <span class="hljs-keyword">of</span> Spades
   King <span class="hljs-keyword">of</span> Spades
    <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Diamonds

Hand Jeff contains
Jack <span class="hljs-keyword">of</span> Spades
 Jack <span class="hljs-keyword">of</span> Hearts
  King <span class="hljs-keyword">of</span> Diamonds

Hand Chris contains
Jack <span class="hljs-keyword">of</span> Diamonds
 King <span class="hljs-keyword">of</span> Clubs
  <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts

Hand Allen picked King <span class="hljs-keyword">of</span> Diamonds
Hand <span class="hljs-attribute">Allen</span>: King <span class="hljs-keyword">of</span> Hearts matches King <span class="hljs-keyword">of</span> Diamonds
Hand Jeff picked <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
Hand Chris picked Jack <span class="hljs-keyword">of</span> Clubs
Hand Allen picked Jack <span class="hljs-keyword">of</span> Hearts
Hand Jeff picked Jack <span class="hljs-keyword">of</span> Diamonds
Hand Chris picked Queen <span class="hljs-keyword">of</span> Spades
Hand Allen picked Jack <span class="hljs-keyword">of</span> Diamonds
Hand <span class="hljs-attribute">Allen</span>: Jack <span class="hljs-keyword">of</span> Hearts matches Jack <span class="hljs-keyword">of</span> Diamonds
Hand Jeff picked King <span class="hljs-keyword">of</span> Clubs
Hand Chris picked King <span class="hljs-keyword">of</span> Spades
Hand Allen picked <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
Hand <span class="hljs-attribute">Allen</span>: <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Diamonds matches <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
Hand Jeff picked Queen <span class="hljs-keyword">of</span> Spades
Hand Chris picked Jack <span class="hljs-keyword">of</span> Spades
Hand <span class="hljs-attribute">Chris</span>: Jack <span class="hljs-keyword">of</span> Clubs matches Jack <span class="hljs-keyword">of</span> Spades
Hand Jeff picked King <span class="hljs-keyword">of</span> Spades
Hand <span class="hljs-attribute">Jeff</span>: King <span class="hljs-keyword">of</span> Clubs matches King <span class="hljs-keyword">of</span> Spades
---------- Game <span class="hljs-keyword">is</span> Over
Hand Allen <span class="hljs-keyword">is</span> empty

Hand Jeff contains
Queen <span class="hljs-keyword">of</span> Spades

Hand Chris <span class="hljs-keyword">is</span> empty
</code></pre>
mikeday
The "display: inline-block" is causing the problem. Prince can't break a single line of text across pages, and notionally that's what an inline-block is. If you can change it to block, then it should be fine.
felipellrocha
Worked! :D Thank you so much!