Yesterday i deployed a new NodeJS + React to heroku.
The project works as well on laptops and android but on iPhone (IOS) the screen is froze after the user loggin in.
cannot scroll cannot see images and cannoot click on buttons.
any ideas what can I do?
The main CSS:
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
text-decoration: none;
list-style: none;
border: none;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--color-light);
color: var(--color-dark);
overflow-x: hidden;
}
Fixed it by adding the following on the main CSS
overflow: scroll;
-webkit-overflow-scrolling: touch;
I have an app where I can generate reports and when I'm trying to generate one I have this error Error File name too long # rb_sysopen and a very long stuff see below. What I want to understand what could be the reason of this error. What should I look?
Errno::ENAMETOOLONG at /study_versions/2/export_acrf.2
File name too long # rb_sysopen - /Users/jakublemiszewski/Desktop/A3informatics/Tourmalet/Tourmalet/public/<html><head><style>h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 34pt; }
h1.title { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 30pt; text-align: center; margin-top: 0; }
h2 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 18pt; line-height: 28pt; }
This continues for many rows in the error message.
However, I have no idea where to look I spent hours to understand and cannot see a solution for it.
I believe the error comes from this class:
class PdfReport
C_CLASS_NAME = "PdfReport"
def self.create(title, sub_title, user, body_html)
paper_size = "A4"
html = page_header()
html += title_page(title, sub_title, user)
# Document history
html += body_html
# Completion instructions
html += page_footer()
#ConsoleLogger.log(C_CLASS_NAME, "create", "HTML=" + html.to_s)
# pdf = WickedPdf.new.pdf_from_string(html, :page_size => paper_size, :footer => {:font_size => "10", :font_name => "Arial, \"Helvetica Neue\", Helvetica, sans-serif", :left => "", :center => "", :right => "[page] of [topage]"} )
cls = [{:status=> ["created", "no_change", "updated"], :prefered_term => "test term", :notation => "This is test notation" }]
results = [{ bc_demo: 'demo'}]
pdf = CdiscChangesReport.new.create(results, cls, User.last, html)
return pdf
end
def self.page_header
html = "<html><head>"
html += "<style>"
html += "h1 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 24pt; line-height: 34pt; }\n"
html += "h1.title { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 24pt; line-height: 30pt; text-align: center; margin-top: 0; }\n"
html += "h2 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 18pt; line-height: 28pt; }\n"
html += "h2.title { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 18pt; line-height: 24pt; text-align: center; margin-top: 0; }\n"
html += "h3 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 16pt; }\n"
html += "h4 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 14pt; }\n"
html += "h5 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 12pt; }\n"
html += "p { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; }\n"
html += "table tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.simple { border: 1px solid black; border-collapse: collapse; width: 100%;}\n"
html += "table.simple tr td { border: 1px solid black; font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.simple tr th { border: 1px solid black; font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.form_table { border: 1px solid black; width: 100%;}\n"
html += "table.form_table tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.form_table h4 { vertical-align: middle;}\n"
html += "table.form_table td:first-child{ font: bold; }\n"
html += "table.form_repeat { border: 1px solid black; width: 100%;}\n"
html += "table.form_repeat th { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; }\n"
html += "table.form_repeat tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top;}\n"
html += "table.details tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 11pt; text-align: left; vertical-align: top; padding: 1px; }\n"
html += "table.ci { border: 1px solid black; width: 100%; border-collapse: collapse;}\n"
html += "table.ci tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px; border-bottom: 1pt solid black; }\n"
html += ".ci td table, .ci td table tbody, .ci td table td { border:none; }\n" # Stops inheritence into markdown
html += "table.note { border: 1px solid black; width: 100%;}\n"
html += "table.note tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; font: bold; text-align: left; vertical-align: top; }\n"
html += "table.input_field { border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;}\n"
html += "table.input_field tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 8pt; text-align: center; vertical-align: center; padding: 5px; }\n"
html += "table.input_field td:not(:last-child){border-right: 1px dashed}\n"
html += "table.cl_field tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: center; padding: 2px; }\n"
html += "table.cl_field td:first-child{ border: 1px solid black; }\n"
html += "tr.warning { background-color: #fcf8e3 !important; }\n"
html += "</style>"
html += "</head><body>"
return html
end
def self.page_footer
html = "</body></html>"
return html
end
def self.title_page(title, sub_title, user)
name = ENV['organization_title']
image_file = ENV['organization_image_file']
dir = Rails.root.join("app", "assets", "images")
file = File.join(dir, image_file)
time_generated = Time.now
# Generate HTML
html = "<br><br><div style=\"text-align: center;\"><img src=\"#{file}\" style=\"height:75px;\"></div>"
html += "<h2 class=\"title\">#{name}</h2>"
html += "<br>" * 10
html += "<h1 class=\"title\">#{title}<br>#{sub_title}</h1>"
html += "<br>" * 23
html += "<table class=\"details\" align=\"right\"><tr><td>Run at:</td><td>#{time_generated.strftime("%Y-%b-%d, %H:%M:%S")}</td></tr><tr><td>Run by:</td><td>#{user.email}</td></tr></table>"
html += page_break
return html
end
def self.page_break
return "<p style='page-break-after:always;'></p>"
end
end
File systems have limits to the length of the path of the filename. Your error shows that you're naming your file with the contents of your file, which is probably why you're hitting this limit.
From your error message, here is your attempted filename:
/Users/jakublemiszewski/Desktop/A3informatics/Tourmalet/Tourmalet/public/<html><head><style>h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 34pt; }
h1.title { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 30pt; text-align: center; margin-top: 0; }
h2 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 18pt; line-height: 28pt; }
Giving your file a proper name should resolve your issue.
I am using a web font in an :after pseudo class. It shows fine on Desktop Chrome and Android Chrome but on iOS Chrome and Safari (iOS 7.1.2, 9.2.1 and 9.3.1) it disappears unless I comment out both display:inline-block and position:absolute where it then shows the icon immediately to the right with no width.
#font-face {
font-family: 'myFont';
src: url('/channels/myFontFolder/fonts/myFont.eot');
src: url('/channels/myFontFolder/fonts/myFont.eot?#iefix') format('embedded-opentype'),
url('/channels/myFontFolder/fonts/myFont.woff2') format('woff2'),
url('/channels/myFontFolder/fonts/myFont.woff') format('woff'),
url('/channels/myFontFolder/fonts/myFont.ttf') format('truetype'),
url('/channels/myFontFolder/fonts/myFont.svg#my_Font') format('svg');
font-weight: normal;
font-style: normal;
text-rendering: optimizeLegibility;
}
h2 {
padding: 10px;
cursor: pointer;
margin: 0;
border: none;
border-top: 1px solid $table-row-border-colour;
background: none;
font-size: $body-fontSize;
position: relative;
}
h2:after {
content: "\e101";
font-family: myFont;
display: inline-block;
position: absolute;
background: none;
color: green;
font-size: 20px;
width: 20px;
height: 20px;
border: 1px solid red;
right: 0;
top: 0;
}
It's working fine on another element with, as far as I can tell, the same styling applied.
Any help would be appreciated!
Fixed it, needed to add font-weight: bold
I've a CSS question. I'm using Rails 3.0 and trying to design a site of mine. I found this anoying problem previously also but now is the time to find a solution.
The situation: I set up a CSS like this:
* {margin: 0;padding: 0;}
body {background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
a {color: blue; outline: none; text-decoration: underline;}
a:hover {text-decoration: none;}
p {margin: 0 0 18px}
img {border: none;}
input {vertical-align: middle;}
#wrapper {width: 955px; margin: 0 auto;}
/* Header
-----------------------------------------------------------------------------*/
#header {background: transparent url(../images/header.jpg) no-repeat; height: 413px;}
#navigation {background: transparent url(../images/menu_bg.jpg) no-repeat; height:36px;}
/* Middle
-----------------------------------------------------------------------------*/
#middle {width: 100%; height: 1%; position: relative;}
#middle:after {content: '.'; display: block; clear: both; visibility: hidden; height: 0;}
#container {background: transparent url(../images/main_bg.jpg) no-repeat; width: 100%; float: left; overflow: hidden;}
#content {padding: 0 270px 0 0;}
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {float: left; margin-right: -3px; width: 313px; margin-left: -313px; position: relative;}
/* Footer
-----------------------------------------------------------------------------*/
#footer {background: transparent url(../images/footer.jpg) no-repeat; height: 63px;}
/*Content
-----------------------------------------------------------------------------*/
#prediction_box {width:290px; height:200px; position:relative; background-color:#392b3f; border: 1px solid #000; margin: 25px 25px 40px 40px;}
When I start to write something on my index page, this wont be 12px Arial as I set in the body tag. The wierness starts if I wan't to have the text in white.
body {font-color:#fff; background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
If I use the font-color:#fff; than nothing happens. However if I use font: #fff 12px/18px etc... than suddenly the texts will be Arial 12px but still in black!
Can you explain how is this possible?
Looking forward your answears,
Kael
CSS does not define a font-color property. You'll need to use the color property as so: color: #fff; in order for the foreground colour (font colour) to become white.
Can we use stylesheet classes inside Pdf reports?
i am trying to change the header_color from b7e3fe to .heading oh the stylesheet, inside the table
file:heading.pdf.prawn
texts=[""],[""]
pdf.table texts,
:headers => [" Heading "],
:header_color => 'b7e3fe',
file: public/stylesheets/style.css
.heading
{ font-family: "trebuchet ms", Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background: #E5E5E5; color: #0D0E0E; font-weight: bold; padding-left:10px; line-height: 20px;}
If you want to use HTML/CSS to generate PDFs, you should look at PDFKit instead of Prawn.