Falls apart on wide viewport

[PAStheLoD]

The Code Highlighting page falls apart on Firefox 22 ("Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0"). It's good on 1145, and broken on 1150 (as given by document.documentElement.clientWidth).

[frastel]

Just stumpled upon this problem too.

It looks like this then:

Same on the GitHub Flavored Markdown page.

[justinwalsh]

Are you referring to the code being floated to the right hand side? If so this is a feature you can disable in the config.json

[geebru]

This works as intended. On smaller viewports it folds under (as perhaps written in the Markdown), but on larger it floats the code out of the main content area.

[frastel]

Why is this intended? It looks totally broken and there would be enough place at the original position.
I just checked the docs, wondered why this happened and thought that this would be a bug. I would never thought that this behaves intended! I would understand it if it behaves like this on small screens, but not the opposite.

[geebru]

Below is a screenshot from the project I'm using it for. Having them floated to the side means I can keep content and examples separated. The content on the left is perfectly valid without the code examples, but they are just off to the side if required.

As mentioned though, this is simply an option and can be turned off.

[dkisselev]

I can see how that wound make sense, perhaps the code examples should have some more text in them to show the code just sits beside any documentation there is of it.

Why are there "cutouts" on the left edge of the gray wherever there is code?

[frastel]

This example makes sense. The example page one the official documentation however has no main content on the left side so I would prefer disabling the "floating" feature there. Otherwise newbies like me are thinking this is not intended and that would have a negative side effect on the product.

Von meinem iPad gesendet

Am 19.07.2013 um 15:19 schrieb "Greg B." notifications@github.com:

Below is a screenshot from the project I'm using it for. Having them floated to the side means I can keep content and examples separated. The content on the left is perfectly valid without the code examples, but they are just off to the side if required.

As mentioned though, this is simply an option and can be turned off.

—
Reply to this email directly or view it on GitHub.

[dkisselev]

Yeah, agreed. I was just noting/stating that as a resolution route for this ticket. (add more text to the example in the repository so that it resembles this example.

[geebru]

Having the extra content really helps define how the code works so I agree that even some Lorem Ipsum in the example might better show how they function. As for the cutouts (which are done with a 10px border), they help further define where certain blocks start / stop.

For example - in my screenshot there are 2 code blocks directly next to each other, but without the cutout, you might think they were a single code block.

[epicwhale]

Even if my main content on the left extends the code, it does not sit next to code. Why is that the case? Please refer to screenshot.

[dkisselev]

What does your markdown look like?

The code you want to display next to the text has to go below the text itself. (it looks like you might have the code above the text)

[epicwhale]

Oops. That's what I was doing. Moved the code now below the text and it works fine. Thanks.

[darylknight]

Ok, I understand how this works, but I'm not the only one who saw the example pages and thought it was broken - perhaps the pages should explain the behaviour and have more text on the left to demonstrate?

[geebru]

@darylknight - This has already been suggested further up in the thread.

[dkisselev]

@blackpandemic, would you be willing to submit some code/docs for a sample page? You linked your site somewhere at one point, and your docs looks like they would work really well for demonstrating this. (Good mix of code and text, and the subject matter is fairly relevant to Daux.io itself. (Webapps, formatting code, etc))

[geebru]

@Kisselev Our current internal usage is for the Code Standards Manual I wrote/maintain. I have code floating off at the moment (after polling the crowd here they found it more readable that way) but I'll try and get it up on a public repo so people can pull it down.