This week's book giveaway is in the Reactive Progamming forum.
We're giving away four copies of Reactive Streams in Java: Concurrency with RxJava, Reactor, and Akka Streams and have Adam Davis on-line!
See this thread for details.
Win a copy of Reactive Streams in Java: Concurrency with RxJava, Reactor, and Akka Streams this week in the Reactive Progamming 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
  • Junilu Lacar
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Knute Snortum
  • Tim Cooke
  • Devaka Cooray
Saloon Keepers:
  • Ron McLeod
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Ganesh Patekar

Mobile-friendly CODE blocks

 
Saloon Keeper
Posts: 5809
146
Android Mac OS X Firefox Browser VI Editor Tomcat Server Safari
  • 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: 10658
227
  • 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: 5809
146
Android Mac OS X Firefox Browser VI Editor Tomcat Server Safari
  • 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: 10658
227
  • 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: 5809
146
Android Mac OS X Firefox Browser VI Editor Tomcat Server Safari
  • 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: 10658
227
  • 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: 5809
146
Android Mac OS X Firefox Browser VI Editor Tomcat Server Safari
  • 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: 10658
227
  • 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.
 
A "dutch baby" is not a baby. But this tiny ad is baby sized:
Java file APIs (DOC, XLS, PDF, and many more)
https://products.aspose.com/total/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!