Code output going outside display box

By Richard on Wednesday, 11 January 2017

Likes 0

Votes 0

I added code to a blog post using the default Github, HTML and Gutter options, but the first line of code continues outside the display box and does not display correctly on smaller devices (part of code is hidden and all code cannot be copied).

There is a large space in the display, perhaps where the code should be? The code displays correctly on initial page load before changing to the output outside the display box.

I am not sure if this is related, but I also used the HTML block in the same article and the end of the frame output does not initially display correctly on desktop, requiring a reduction in the screen view to make it appear in full screen when the screen view is moved out again (Write a Review box is the end of the frame output).

On smaller devices it requires moving up to the top of the screen and back down again to make the output appear.

Everything does appear, it is just on initial load there seems to be an issue.

You can see the article here

Hi Richard,

The code is displaying well on smaller screen http://take.ms/6vwQu . Can you provide us the details on mobile devices, OS and browser version? Also, can you share us with some screenshots/screencasts on the issues?

Chang

Wednesday, 11 January 2017 13:17

0 Likes

0 Votes

0 Comments

#309390

You can see a screencast of desktop access at https://www.screencast.com/t/lKRl5H3PHpi that shows the code appearing as one type of output filling the box before changing to the Github style in your image but with the first line of code outside the display box.

The desktop screen needs to be reduced to get the table at the bottom to appear and as both the code box and table are using types of html block, is the problem connected?

The table display at the bottom issue only applies to Kindle, not mobile, i should have mentioned that in my initial post, sorry..

I checked on mobile again and it displays as in your screenshot but as not all the code can be seen, how can it be copied?

All I want to do is display code to be copied from the blog, should I be using a different block or version of the html block?

Richard

Wednesday, 11 January 2017 14:45

0 Likes

0 Votes

0 Comments

#309412

You can see a screencast of desktop access at https://www.screencast.com/t/lKRl5H3PHpi that shows the code appearing as one type of output filling the box before changing to the Github style in your image but with the first line of code outside the display box.

This is because javascript execution needs time to convert the code to Github style.

The desktop screen needs to be reduced to get the table at the bottom to appear and as both the code box and table are using types of html block, is the problem connected?

The table display at the bottom issue only applies to Kindle, not mobile, i should have mentioned that in my initial post, sorry..

Same as above the table content from Jreviews are using javascript to generate. Regarding the table content in mobile view, the only way is view the table of content by scrolling horizontally on mobile.

I checked on mobile again and it displays as in your screenshot but as not all the code can be seen, how can it be copied?

All I want to do is display code to be copied from the blog, should I be using a different block or version of the html block?

1. My advice is using 'gist' block to share the codes with gist. http://take.ms/SraEy
2. On mobile tap on the RAW to get the contents. http://take.ms/Z14rw

Chang

Wednesday, 11 January 2017 16:22

0 Likes

0 Votes

0 Comments

#309431

Perfect Chang, thank you for your help, everything is fine now and working on all devices.

The Gist and HTML combination worked as you suggested, there seemed to be a display conflict on desktop initial page load using the Code block with HTML block on the same page but changing from Code to Gist solved the issue.

Richard

Thursday, 12 January 2017 00:56

0 Likes

0 Votes

0 Comments

#309585

Thanks for updating, glad that your issues are resolved now.

Mark

Thursday, 12 January 2017 02:12

0 Likes

0 Votes

0 Comments

#309598