Win a copy of Grokking Bitcoin this week in the Cloud/Virtualization forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Bear Bibeault
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Paul Clapham
  • Devaka Cooray
  • Knute Snortum
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Frits Walraven
Bartenders:
  • Carey Brown
  • salvin francis
  • Claude Moore

Mobile-friendly CODE blocks  RSS feed

 
Saloon Keeper
Posts: 5401
143
Android Firefox Browser Mac OS X Safari Tomcat Server VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
While most of a site I'm working on is mobile friendly simply by using



pages that contain CODE blocks get scaled way down due to the long lines of code. Is there a way to ignore the width of CODE blocks while still having the rest of the page scaled according to the viewport? I tried various combinations of



but they seem to get ignored when the viewport width is calculated. I don't want to wrap lines in the CODE block, just cut them off and add scrollbars. Are there any other CSS attributes I should be looking at?
 
Saloon Keeper
Posts: 10107
212
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What happens if you use overflow: scroll and only add the code to the scrollable element after the page has loaded, using some JavaScript?
 
Tim Moores
Saloon Keeper
Posts: 5401
143
Android Firefox Browser Mac OS X Safari Tomcat Server VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is part of a CMS where the page contents aren't all generated in the JSP, but partly originate from another source - so it's not all that easy to handle all CODE blocks with JavaScript. Adding a class to each CODE block wouldn't be a big deal, but handling all CODE blocks in JavaScript would be. That's why I was hoping for a solution using only CSS (maybe along with some JSP changes).

Hoping for a simple solution, I tried to set the CODE block's visibility to hidden, but it's still considered for calculating the page width.
 
Stephan van Hulst
Saloon Keeper
Posts: 10107
212
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This looks good to me on a lot of different devices:
 
Tim Moores
Saloon Keeper
Posts: 5401
143
Android Firefox Browser Mac OS X Safari Tomcat Server VI Editor
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Stephan! This does what I was trying to accomplish:


Without "display:block" it wouldn't work in Chrome, although Firefox was fine. "white-space:pre" would add empty lines, so I used nowrap instead. And "overflow: auto" rather than scroll suppresses the scrollbars when they're not necessary. Neat!
 
Stephan van Hulst
Saloon Keeper
Posts: 10107
212
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What do you use for indentation of lines of code?
 
Tim Moores
Saloon Keeper
Posts: 5401
143
Android Firefox Browser Mac OS X Safari Tomcat Server VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Spaces. But it added empty lines even when there was no leading white space.
 
Stephan van Hulst
Saloon Keeper
Posts: 10107
212
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yeah that's because there are hard carriage returns in the text node containing the code. If you're not using white-space: pre, then you can use <br> instead of carriage returns, but I was wondering how you represent indentation, because if you use white-space: nowrap, then whitespace at the start of lines will be removed.
 
We noticed he had no friends. So we gave him this tiny ad:
Create Edit Print & Convert PDF Using Free API with Java
https://coderanch.com/wiki/703735/Create-Convert-PDF-Free-Spire
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!