Is this a bug?

Question

Just though I'd point it out - the first answer (answered May 2, 2014 by pupi1985) to the following question contains syntax-colored code and runs over the boarder of the post-area into the side-panel on the left.  Same was found in several browsers and using two computers with different, yet both quite high-resolution displays.

http://question2answer.org/qa/34156/seo-optimisation-all-titles-add-sitename-but-want-sitename?show=34156#q34156

Thx!

Answer 1

This is due to missing CSS:

I thought one solution would be to add:

.qa-main p span {
  max-width: 490px;
  display: inline-block;
}

But this brings other positioning problems - because each code line is a span.

display:block; won't help since it brings each element in a separate line.

Changing the CSS of the wrapping p tag is also no solution (display:block;max-width:500px; or alike).

Seems, that the HTML layout itself is too "problematic".

Comments

I see what you're saying.  Wouldn't it help to place code into it's own container where scrollbars could be used.  Because I would expect most lines of code (esp. those with any decent formatting column alignment) to be longer than the main page allows. I will not be using/allowing much formatting on my present (and first) Q2A project, but it does look unprofessional, for such an otherwise amazing OS project.

---

The problem is, the code is copied from another HTML page (probably Github) so it copies the formatting but makes it inline, i.e. <span style="white-space:nowrap">...</span>

I think it can be solved by setting overflow:auto on the answer wrapper.

---

You beat me to it, Scott!  

I didn't realize it was copied formatting, I havn't studies the buttons very closely yet on the text-area editor!  But now I see!

Well This WAS what I was about to enter:

All that I'm suggesting is something to compartmentalize the whole code section, akin to the following (but this is very raw and crude, I'm not fluent in the specifics e.g. measurements, for instance, needed for Q2A, so I just used basic values like 90% for the width - avoiding 100% as to not prevent a longer-line of code from being scrolled to all the way to the end!  And I think a div tag wrapper around the <p>...</p> would be a better sol'n for this style-info than a paragraph tag, I'm not sure about how different browsers might handle it or what other consequences it might have, I've just always tended to use div tags for this type of thing!)  But, in any event:


.qa-main p{
overflow-x: auto;
width: 90%;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border: 1px solid #ccccff;
background-color: #fcfcff;
}


Try C/P-ing it directly into the <p> tag that has all the code "spans" in it, in the linked page that displays the bug:

style="overflow-x:auto; width:90%; border:1px solid #ccccff; background-color:#fcfcff; margin:5px 5px 5px 5px; padding:5px 5px 5px 5px;"

---

Problem is, the code might not be in a p tag, because any HTML can be submitted.