tipsy
commented
6 years ago You can change this behavior in ContainerTag#renderFormatted. I consider this pretty unimportant for the project, but I will help and review your code if you want to fix it.
Closed ijabz closed 6 years ago
tipsy
commented
6 years ago You can change this behavior in ContainerTag#renderFormatted. I consider this pretty unimportant for the project, but I will help and review your code if you want to fix it.
ijabz
commented
6 years ago It is quite important since it means if you don't want your html on a singe line then you cannot use any textarea elements in your html. Just to be clear I'm not complaining about how it looks in view-source Im just showing that so you can see the issue, it means the text area displays incorrectly to the end-user
Here is a screenshot, look at the first line of the textarea
But I have to say j2html is making my life much easier, as is spark framework (which I think you are involved with as well), thanks.
tipsy
commented
6 years ago It is quite important since it means if you don't want your html on a singe line then you cannot use any textarea elements in your html. Just to be clear I'm not complaining about how it looks in view-source Im just showing that so you can see the issue, it means the text area displays incorrectly to the end-user Here is a screenshot, look at the first line of the textarea
I understand the issue, there are similar problems with the <pre> tag. renderFormatted() is not a good choice when the resulting HTML is being shown to a end-user, why do you want to use it?
But I have to say j2html is making my life much easier, as is spark framework (which I think you are involved with as well), thanks.
You're welcome! You should try forking and fixing the issue, it shouldn't be too hard.
ijabz
commented
6 years ago I just use renderFormatted() for easier debugging so that when I do View-Source from my browser I can easily understand the html rather than just getting a single line of html, I dont see why that would be a bad idea.
Sorry to go on but Im not 100% convinced you get the issue, it isnt that Im using renderFormatted() to render a text area, Im using renderFormatted() to render the complete webpage, and one particular page has a textarea element within, and simply using renderFormatted() breaks the text area. I quite understand if you dont have time to fix it (i have my own opensrc project jaudiotagger) but I dont know why you think its not much of a bug that simply using renderFormatted() breaks textarea elements.
tipsy
commented
6 years ago I just use renderFormatted() for easier debugging so that when I do View-Source from my browser I can easily understand the html rather than just getting a single line of html, I dont see why that would be a bad idea.
Since HTML can be white-space sensitive (as you have noticed with textarea), it's better to use the minified version. You can still use the non-minified version when debugging, I'm just saying it's safer to use the minified version in production.
Sorry to go on but Im not 100% convinced you get the issue, it isnt that Im using renderFormatted() to render a text area, Im using renderFormatted() to render the complete webpage, and one particular page has a textarea element within, and simply using renderFormatted() breaks the text area. I quite understand if you dont have time to fix it (i have my own opensrc project jaudiotagger) but I dont know why you think its not much of a bug that simply using renderFormatted() breaks textarea elements.
I get it, I just don't consider it a big problem. I will merge any PR that fixes it, I just won't work on it myself anytime soon.
ijabz
commented
6 years ago Weird I disabled renderFormatted to work round this issue, but it caused my footer to not wrap anymore, i.e I seem to need renderFormatted(0 for webpage to work !
tipsy
commented
6 years ago What do you mean "wrap"? You should never need renderFormatted, please show me the code.
ijabz
commented
6 years ago So what i mean is html footer contain a number of links, so if I view them on a mobile phone in portrait mode (or make my desktop browser sufficiently small) then the footer should wrap the elements onto next line instead of user having to scroll horizontally. It does when I use renderFormatted(0, does not when I don't. Below is the html of smallest page as returned by Firefox ViewSource, first when using renderformatted, secondly when not.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/googlefonts.css" rel="stylesheet" type="text/css">
<link href="style/songkong.css" rel="stylesheet" type="text/css">
<link href="style/jquery/ui/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css">
<link href="style/jstree/themes/style.css" rel="stylesheet" type="text/css">
<script src="style/songkong.js" type="text/javascript">
</script>
<script src="style/jquery/jquery-1.9.1.js" type="text/javascript">
</script>
<script src="style/jquery/ui/js/jquery-ui-1.9.2.custom.js" type="text/javascript">
</script>
<script src="style/jstree/jstree.js" type="text/javascript">
</script>
<link rel="shortcut icon" href="style/songkong32.png" type="text/png">
<link rel="icon" href="style/songkong32.png" type="text/png">
</head>
<body class="remote">
<div>
<noscript>
<h1 style="color:#FF0000;">
This reportFile will not be navigable without Javascript, please enabled Javascript
</h1>
</noscript>
<img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px">
</div>
<header>
<h2 class="subheading ui-corner-all" title="Preferences">
<a style="text-decoration: none">
Preferences
</a>
</h2>
</header>
<main>
<form action="/preferences.process" name="process" id="process" method="post">
<table>
<tr><td class="combolabel" colspan="2"><label title="User interface language" for="language" id="languagelabel">Language</label></td></tr> <tr><td colspan="2" class="indentedtextfield"><select class="showsingleselect" name="language" id="language"><option value="0">Dansk</option><option value="1">Deutsch</option><option selected="selected" value="2">English</option><option value="3">español</option><option value="4">français</option><option value="5">hrvatski</option><option value="6">italiano</option><option value="7">magyar</option><option value="8">Nederlands</option><option value="9">norsk</option><option value="10">polski</option><option value="11">português</option><option value="12">română</option><option value="13">suomi</option><option value="14">svenska</option><option value="15">Tiếng Việt</option><option value="16">íslenska</option><option value="17">čeština</option><option value="18">Ελληνικά</option><option value="19">русский</option><option value="20">हिंदी</option><option value="21">中文</option><option value="22">日本語</option></select></td></tr>
<tr>
<td colspan="2" style="padding-bottom:0.5em;">
</td>
</tr>
<tr><td class="combolabel" colspan="2"><label title="Sets how much logging is written to the debug log, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong" for="debugLevel" id="debugLevellabel">Debug Log Level</label></td></tr> <tr><td colspan="2" class="indentedtextfield"><select class="showsingleselect" name="debugLevel" id="debugLevel"><option value="0">Severe</option><option selected="selected" value="1">Warning</option><option value="2">Info</option><option value="3">Config</option><option value="4">Fine</option><option value="5">Finer</option><option value="6">Finest</option></select></td></tr>
<tr>
<td colspan="2" style="padding-bottom:0.5em;">
</td>
</tr>
<tr><td class="combolabel" colspan="2"><label title="Sets how much logging is written to the debug log when SongKong reads files or saves changes to files, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong" for="ioDebugLevel" id="ioDebugLevellabel">Debug IO Log Level</label></td></tr> <tr><td colspan="2" class="indentedtextfield"><select class="showsingleselect" name="ioDebugLevel" id="ioDebugLevel"><option value="0">Severe</option><option selected="selected" value="1">Warning</option><option value="2">Info</option><option value="3">Config</option><option value="4">Fine</option><option value="5">Finer</option><option value="6">Finest</option></select></td></tr>
</table>
<h3 class="error" style="visibility:hidden;">
</h3>
<input type="submit" name="cancel" class="text_button" value="Cancel">
<input type="submit" name="save" class="text_button" value="Save">
</form>
</main>
<footer>
<img src="subheading.png" class="footer">
<nav class="footercontent">
<a href="/index.html" target="_top" style="padding-right:4px">
Start
</a>
<a href="/reports" target="_top" style="padding-right:4px">
Reports
</a>
<a href="/preferences.go" target="_top" style="padding-right:4px">
Preferences
</a>
<a href="/about.go" target="_top" style="padding-right:4px">
About
</a>
<a href="/license.go" target="_top" style="padding-right:4px">
License
</a>
<a href="/admin.go" target="_top" style="padding-right:4px">
Admin
</a>
<a href="http://www.jthink.net/songkong/help/help.html" target="_top" style="padding-right:4px">
Help
</a>
<a href="http://www.jthink.net/songkong/help.pdf" target="_top" style="padding-right:4px">
Pdf
</a>
</nav>
</footer>
</body>
</html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style/googlefonts.css" rel="stylesheet" type="text/css"><link href="style/songkong.css" rel="stylesheet" type="text/css"><link href="style/jquery/ui/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css"><link href="style/jstree/themes/style.css" rel="stylesheet" type="text/css"><script src="style/songkong.js" type="text/javascript"></script><script src="style/jquery/jquery-1.9.1.js" type="text/javascript"></script><script src="style/jquery/ui/js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script><script src="style/jstree/jstree.js" type="text/javascript"></script><link rel="shortcut icon" href="style/songkong32.png" type="text/png"><link rel="icon" href="style/songkong32.png" type="text/png"></head><body class="remote"><div><noscript><h1 style="color:#FF0000;">This reportFile will not be navigable without Javascript, please enabled Javascript</h1></noscript><img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px"></div><header><h2 class="subheading ui-corner-all" title="Preferences"><a style="text-decoration: none">Preferences</a></h2></header><main><form action="/preferences.process" name="process" id="process" method="post"><table><tr><td class="combolabel" colspan="2"><label title="User interface language" for="language" id="languagelabel">Language</label></td></tr> <tr><td colspan="2" class="indentedtextfield"><select class="showsingleselect" name="language" id="language"><option value="0">Dansk</option><option value="1">Deutsch</option><option selected="selected" value="2">English</option><option value="3">español</option><option value="4">français</option><option value="5">hrvatski</option><option value="6">italiano</option><option value="7">magyar</option><option value="8">Nederlands</option><option value="9">norsk</option><option value="10">polski</option><option value="11">português</option><option value="12">română</option><option value="13">suomi</option><option value="14">svenska</option><option value="15">Tiếng Việt</option><option value="16">íslenska</option><option value="17">čeština</option><option value="18">Ελληνικά</option><option value="19">русский</option><option value="20">हिंदी</option><option value="21">中文</option><option value="22">日本語</option></select></td></tr><tr><td colspan="2" style="padding-bottom:0.5em;"></td></tr><tr><td class="combolabel" colspan="2"><label title="Sets how much logging is written to the debug log, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong" for="debugLevel" id="debugLevellabel">Debug Log Level</label></td></tr> <tr><td colspan="2" class="indentedtextfield"><select class="showsingleselect" name="debugLevel" id="debugLevel"><option value="0">Severe</option><option selected="selected" value="1">Warning</option><option value="2">Info</option><option value="3">Config</option><option value="4">Fine</option><option value="5">Finer</option><option value="6">Finest</option></select></td></tr><tr><td colspan="2" style="padding-bottom:0.5em;"></td></tr><tr><td class="combolabel" colspan="2"><label title="Sets how much logging is written to the debug log when SongKong reads files or saves changes to files, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong" for="ioDebugLevel" id="ioDebugLevellabel">Debug IO Log Level</label></td></tr> <tr><td colspan="2" class="indentedtextfield"><select class="showsingleselect" name="ioDebugLevel" id="ioDebugLevel"><option value="0">Severe</option><option selected="selected" value="1">Warning</option><option value="2">Info</option><option value="3">Config</option><option value="4">Fine</option><option value="5">Finer</option><option value="6">Finest</option></select></td></tr></table><h3 class="error" style="visibility:hidden;"> </h3><input type="submit" name="cancel" class="text_button" value="Cancel"><input type="submit" name="save" class="text_button" value="Save"></form></main><footer><img src="subheading.png" class="footer"><nav class="footercontent"><a href="/index.html" target="_top" style="padding-right:4px">Start</a><a href="/reports" target="_top" style="padding-right:4px">Reports</a><a href="/preferences.go" target="_top" style="padding-right:4px">Preferences</a><a href="/about.go" target="_top" style="padding-right:4px">About</a><a href="/license.go" target="_top" style="padding-right:4px">License</a><a href="/admin.go" target="_top" style="padding-right:4px">Admin</a><a href="http://www.jthink.net/songkong/help/help.html" target="_top" style="padding-right:4px">Help</a><a href="http://www.jthink.net/songkong/help.pdf" target="_top" style="padding-right:4px">Pdf</a></nav></footer></body></html>
Naxos84
commented
6 years ago after some investigation because I was just curious about this.
The problem seems that there is no space " " between the link tags (in the unformatted string)
Naxos84
commented
6 years ago I asked this on SO and the answer with using the style: a {display: inline-block} seems to do the job without needing to change anything!
j2html is prepending textarea contents with some spaces on first line if I render page with renderFormatted(). It is okay if I just use render() but I really need to use renderFormatted() to make the html readable.
i.e
textarea("fred\ntom")gives