I have problem with instagram image in my WKWebView. It does not shows properly. It show only 20% of that image
<html><head><script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script></head><body><p>Vest je potvrdio njegov sin Rik putem društvene mreže Instagram.</p>
<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: calc(100% - 2px);" data-instgrm-permalink="https://www.instagram.com/p/Bkc6yKGB3C9/" data-instgrm-version="8">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"> </div>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;"><a style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none;" href="https://www.instagram.com/p/Bkc6yKGB3C9/" target="_blank" rel="noopener">A post shared by Rick Harrison (#rick_harrison)</a> on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2018-06-25T14:58:50+00:00">Jun 25, 2018 at 7:58am PDT</time></p>
</div>
</blockquote>
<p><br />"On je bio moj heroj. Kroz svoj život dotakao je duše mnogih ljudi, učio ih vrednostima života i porodice, teškog rada i humora", napisao je.</p>
<p>Ričard Harison rođen je 4. marta 1941. u Leksingtonu, Severna Karolina. U trenutku smrti imao je 77 godina.</p>
<p>"Zvezde zalagonica" je jedna od najpopularnijih emisija Histrory Channela od prvog emitovanja 2009. godine, koja gledaoce vodi kroz rad zalagaonice u Las Vegasu.</p>
<script async defer src="https://platform.instagram.com/en_US/embeds.js"> </script>
<style>img{display: inline; height: auto; max-width: 100%;}</style>
<style>iframe{display: inline; height: auto; max-width: 100%;}</style>
</body>
</html>
I have an app in Rails 4 which generate PDFs. Those PDFs are reports which contain tables and other information. The Tables are dynamically generated in a view in the app and then when a user presses a button report, its export the PDf. My problem is that the table is looking not complete. I need to show all the information on that table, but only the first row is showed. Look at the screenshot image
From the image, I see only first row complete but I need also the second row or next rows with the ticks. The ticks are added or removed from the app, that's mean the cell without the tick is empty.
I'm trying to resolve this issue from a while but no luck.
the codes related to this table below:
From Controller:
def export_acrf
html = ""
html += "<br>"
html += params[:table_data].gsub('<span class="glyphicon glyphicon-ok text-success"></span>', '✔') if params[:table_data].present?
html += "</td></tr></tbody></table>"
html += PdfReport.page_break
study_version = StudyVersion.find(params[:id])
study = Study.find(study_version.study_id)
lock = Token.obtain("#{study.identifier}_ACRF", "", current_user)
forms = Form.where(study_version_id: study_version.id).order('ordinal asc')
forms.each do |form|
html += PdfReport.page_break
html += Mdr.form_to_html_annotations(form.form_id, form.form_namespace, true).html_safe
end
#pdf = PdfReport.create("Annotated CRF", "#{study.label}", current_user, html)
header_html = view_context.render 'shared/report.html.erb'
pdf = PdfReport.create("Case Report Form", "#{study.label}", current_user, html, header_html)
send_data pdf, filename: "#{study.identifier}_aCRF.pdf", type: 'application/pdf', disposition: 'inline'
lock.release
end
The class:
class PdfReport
C_CLASS_NAME = "PdfReport"
def self.create(title, sub_title, user, body_html, header_html)
paper_size = "A4"
html = page_header(header_html)
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]"} )
options = { :page_size => paper_size, :footer => {:font_size => "10", :font_name => "Arial, \"Helvetica Neue\", Helvetica, sans-serif", :left => "", :center => "", :right => "[page] of [topage]"} }
pdf = CdiscChangesReport.export(html, options)
return pdf
end
def self.page_header(header_html)
html = "<html><head>"
# html += header_html
html += '<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">'
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; }\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>" * 29
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
View:
<%= form_tag( "/study_versions/export_acrf?format=pdf", id: "preview_form_acrf", method: :post, style: "display: none;") do %>
<input type="hidden" name="id" value="<%= params[:id] %>" >
<input type="hidden" name="table_data" value="<%= params[:table_data] %>" />
<input type="text" name="study_version[export_type]" value="acrf" >
<input type="submit" value="Submit" />
<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
<% end %>
JS related:
// Study Version Editor: Annotated CRF
//
// Initialise
//
// #param [Integer] studyVersionId the id for the study version
// #return [void]
function SveAcrf(studyVersionId) {
this.progress = new SveProgress('#aCrfPb');
this.studyVersionId = studyVersionId;
this.html = []; // Array for resulting HTML
var _this = this;
// Button handlers
$('#study_acrf').click(function() {
$('#soa_table thead tr th, #soa_table tbody tr td').removeClass('success'); //success
_this.start();
});
$('#export_acrf').click(function() {
// $('#table_data').val($("<div />")
// .append($("#soa_table").clone()).html());
var table_data = $("<div />").append($("#soa_table").clone()).html()
// $('#preview_form').submit();
window.open('/study_versions/' + studyVersionId + '/export?study_version[export_type]=acrf;table_data='+table_data);
});
}
// Start the CRF build
//
// #return [void]
SveAcrf.prototype.start = function() {
var _this = this;
this.clear();
$.ajax({
url: "/study_versions/" + this.studyVersionId,
type: 'GET',
dataType: 'json',
success: function(result){
var forms = result.data.children;
if (forms.length > 0) {
_this.progress.clear(forms.length); // Set the progress total
var table = $("<div />").append($("#soa_table").clone()).html()
_this.html.push(table);
for (var i=0; i<forms.length; i++) {
_this.html.push(_this.placeholder(i, forms[i].label)); // Create the slot for the result.
_this.getForm(forms[i], i);
}
$("#aCrfHtml").append(_this.html.join(''));
} else {
displayWarning("Study does not include any forms at present, nothing to display.");
}
},
error: function(xhr,status,error){
handleAjaxError(xhr, status, error);
}
});
}
// Display form
//
// #param [JS Object] form structure containing the form id and namespace
// #param [Integer] index the index of the form
// #return [void]
SveAcrf.prototype.getForm = function(form, index) {
var _this = this;
$.ajax({
url: "/mdrs/form_annotations",
data: { "id": form.form_id, "namespace": form.form_namespace },
type: 'GET',
dataType: 'html',
success: function(result){
_this.displayForm(result, index);
setTimeout(function(){ $(".spinner_and_label_"+index).hide(); }, 500);
},
error: function(xhr,status,error){
handleAjaxError(xhr, status, error);
}
});
}
// Form display
//
// #param [result] the form html
// #param [Integer] index the index of the form
// #return [void]
SveAcrf.prototype.displayForm = function(result, index) {
this.html[index] = result; // Save the result in the correct slot
$("#aCrfHtml").append(this.html.join('')); // Joint the array to form the whole page.
this.progress.increment();
}
// Clear the CRF
//
// #return [void]
SveAcrf.prototype.clear = function() {
this.progress.clear(0);
this.html = [];
$("#aCrfHtml").html("");
}
// Placeholder html for building the CRF
//
// #param [String] label the form label
// #return [String] the html placeholder
SveAcrf.prototype.placeholder = function(index, label) { return '<div class="row spinner_and_label_'+index+'"><div class="col-md-3 col-sm-4"><p><i class="fa fa-refresh fa-spin fa-lg fa-fw margin-bottom"></i></p></div>' +
'<div class="col-md-9 col-sm-8"><p>Form: ' + label + ' will appear here ...</p></div></div>';
}
SveAcrf.prototype.openWindowWithPost = function (url, data) {
var form = document.createElement("form");
form.target = "_blank";
form.method = "POST";
form.action = url;
form.style.display = "none";
for (var key in data) {
var input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = data[key];
form.appendChild(input);
}
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
As from your post
with
html += params[:table_data]
you are just adding a row for Demographics
</thead><tbody><tr><td class=\"soa-row\" id=\"2\">Demographics (Pilot)</td><td class=\"soa-element text-center\" form_id=\"2\" visit_id=\"112\" id=\"36\"><span class=\"glyphicon glyphicon-ok text-success\"></span></td><td class=\"soa-element text-center\" form_id=\"2\" visit_id=\"113\" id=\"37\"><span class=\"glyphicon glyphicon-ok text-success\"></span></td><td class=\"soa-element text-center\" form_id=\"2\" visit_id=\"114\" id=\"43\"><span class=\"glyphicon glyphicon-ok text-success\"></span></td><td class=\"soa-element text-center\" form_id=\"2\" visit_id=\"115\" id=\"44\"><span class=\"glyphicon glyphicon-ok text-success\"></span></td><td class=\"soa-element text-center\" form_id=\"2\" visit_id=\"116\" id=\"45\"><span class=\"glyphicon glyphicon-ok text-success\"></span></td><td class=\"soa-element\" form_id=\"2\" visit_id=\"117\" id=\"0\">"
if you check your params[:table_data] it just includes the Demographics row, not the Education
I have a button being used to show a dropdown div. The button padding and text can be clicked on to show the dropdown div. The very small Material "font-icon" CANNOT be clicked to show the dropdown div. How can I ensure that you can click anywhere within the button (including directly on the Material icon) in order to show the dropdown div.
Here is a link to show you what I've done.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
body {
margin: 0;
color: #333;
overflow-x: hidden;
padding-top: 80px;
}
:root{
var-MainColor: #4C00F9;
--main-color: #4C00F9;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -64px;
}
#navWrapper {
padding: 0px;
border-bottom: 1px solid #eee;
font-size: 13px;
font-family: Sans-Serif;
width: 100%;
background-color: #fff;
z-index: 1000;
height: 64px;
}
#navLeft {
float: left;
}
#navRight {
float: right;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: var(--main-color);
padding: 24px;
font-size: 13px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: var(--main-color);
color: #fff;
outline: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-left: 10px;
margin-right: 2%;
margin-top: -8px;
border-radius: 2px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: var(--main-color);
padding: 24px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #fdfdfd;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.material-icons.md-01 { font-size: 13px; vertical-align: middle; margin-top: -3px;}
.material-icons.md-02 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: red;}
.material-icons.md-03 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: #40FA35;}
.material-icons.md-04 { font-size: 21px; vertical-align: middle; margin-top: -1px;}
.material-icons.md-05 { font-size: 16px; vertical-align: middle; margin-top: -1px;margin-right: 15px;}
#main {
margin-top: 50px;
position: absolute;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 50px 0px;
}
#sectionInnerText {
max-width: 700px;
padding: 0px 100px;
}
#sectionInnerImage {
max-width: 1000px;
padding: 0px 100px;
}
#sectionInnerImage-rowWrapper {
padding: 0px 100px;
}
#sectionInnerImage-3row {
width: 31%;
max-width: 400px;
display: inline-block;
margin-right: 1vw;
}
#sectionInnerImage-2row {
width: 48%;
max-width: 1000px;
display: inline-block;
margin-right: 1vw;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
font-weight: 700;
font-family: Sans-Serif;
}
h2 {
font-size: 22px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 15px;
}
h3 {
font-size: 13px;
font-family: Sans-Serif;
font-weight: normal;
margin-bottom: 30px;
}
h4 {
font-size: 17px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 5px;
margin-bottom: 0;
display: inline-block;
}
p {
font-size: 19px;
line-height: 180%;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: normal;
margin: 15px 0;
}
a.one {
display: block;
color: #fff;
background-color: var(--main-color);
padding: 16px;
text-decoration: none;
text-align: center;
border-radius: 3px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
max-width: 350px;
}
a.one:hover {
background: #4C03F1;
}
a.one:active {
background-color: var(--main-color);
}
#media only screen and (min-width: 1080px) {
section {
min-height: 30vh;
}
}
#media only screen and (max-width: 1080px) {
html, body {
margin: 0;
color: #333;
overflow-x: hidden;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 0px;
}
#sectionInnerText {
padding: 2vh 5vw;
}
#sectionInnerImage {
padding: 0 5vw;
}
#sectionInnerImage-rowWrapper {
padding: 0 5vw;
}
#sectionInnerImage-3row {
width: 100%;
max-width: 1000px;
}
#sectionInnerImage-2row {
width: 100%;
max-width: 1000px;
}
p {
font-size: 21px;
}
ul li {
font-size: 21px;
}
a.one, a.two, a.three, a.four {
display: block;
margin-bottom: 25px;
max-width: 100%;
max-width: 450px;
}
.dropdown-content {
width: 100vw;
margin: 0;
margin-top: -6px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
border-top: 1px solid #eee;
border-bottom: 0;
z-index: 1;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
}
.dropdown-content a{
border-bottom: 1px solid #f4f4f4;
}
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="nav-down">
<div id="navWrapper">
<div id="navLeft">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu <i class="material-icons md-01">keyboard_arrow_down</i></button>
<div id="myDropdown" class="dropdown-content">
<i class="material-icons md-05">home</i> Home & Projects List
<i class="material-icons md-05">dashboard</i> Project 01
<i class="material-icons md-05">dashboard</i> Project 02
<i class="material-icons md-05">dashboard</i> Project 03
<i class="material-icons md-05">account_circle</i> Info & Contact
<i class="material-icons md-05">picture_as_pdf</i> View & Download Resume
</div>
</div>
</div>
</div>
</header>