I am using html2canvas and jspdf to generate pdf. Everthing is working fine in Desktop and Android but Font Awsome Icon is not rendering in iOS . I have created a fiddle that fiddle is working in desktop and Android but same fiddle is breaking in iOS. Please help.
Fiddle Link : https://jsfiddle.net/j09qd4xm/36/
HTML :
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
JS:
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
width:320,
height:220
}).then(function (canvas) {
document.body.appendChild(canvas);
});
}
CSS :
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
Version :
Html2Canvas : 1.0.0-alpha.12
jspdf : 1.4.1
This pull request fixed it for me: niklasvh/html2canvas#1649. I manually patched the change to my minified JS file.
Related
JSFiddle Link
When SVG image is clicked, alert function does not trigger in IPhone. (It works in android).
How can I make this workin IPhone without using z-index and overlay div?
HTML
<div id="svg" style="position: relative; background: green; width: 900px; height: 900px;" >
<object id="object" type="image/svg+xml" data="http://www.useragentman.com/tests/pointerEvents/images/tv-path.svg">
</object>
</div>
CSS
#svg object{
pointer-events: none;
}
Javascript
$('#svg').on('click', function () {
alert('hello');
});
Select2 4.0 jQuery plugin
In (Mac) Chrome or Firefox, the multiple select box looks fine with default, selected values:
but in (Mac) Safari it looks like below (light gray bracket around what is the <input> element for typing in a search term.)
What is the preferred way (i.e. select2 option or select2 css) to get rid of this visual artifact: [] ?
The HTML element generated by select2 is this:
<span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 110px;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<ul class="select2-selection__rendered">
<li class="select2-selection__choice" title="Text">
<li class="select2-selection__choice" title="Video">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="-1" autocomplete="off"
autocorrect="off" autocapitalize="off" placeholder=""
spellcheck="false" role="textbox" style="width: 0.75em;"/>
</li>
</ul>
</span>
</span>
I tried both of the below (now commented out) select2 options to no effect:
$j(".select2").select2({ // we're using the Select2 plugin
// minimumResultsForSearch: Infinity // has no effect on Safari
// placeholder: null // attempt two - no effect
});
The only select2 class styles overridden are:
<style type="text/css">
.select2 { /* select2 honors width CSS property */
font-size: xx-small;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice { /* The results container with MSP-chosen values */
margin-left: .2em;
padding: 0px 2px;
}
.select2-results__option { /* The list of available MSP choices */
font-size: xx-small;
margin-left: .2em;
padding: 0px 4px;
}
</style>
The answer comes courtesy of select2 gitHub Issues - Select box not displayed properly in safari #3459
Specifically, this line of css:
.select2-search__field {
-webkit-appearance: textfield;
}
Per Kevin Brown, added to 4.01 milestone
Im following along with http://multiplethreads.wordpress.com/tag/pagedown/
The example in the link above makes use of twitter bootstrap whereas i make use of zurb foundation.
Basically im trying to get a custom dialog box to insert images from my pagedown editior (sort of like how stackoverflow does it).
Im abale to pull up the modal box (foundation reveal) but it seems to be "behind" something and i cant seem to interact with it. Any ideas?
My code:
js file:
PH.ui.markdown = {
initialize: function () {
var markdownTextArea = $('textarea[data-markdown=true]');
if (markdownTextArea.length == 1) {
markdownTextArea.addClass('wmd-input')
.wrap("<div class='wmd-panel' />")
.before("<div id='wmd-button-bar'></div>")
.after("<div id='wmd-preview' class='wmd-preview'></div>");
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.hooks.set("insertImageDialog", function (callback) {
//setTimeout(function () {
$('#myModal').foundation('reveal', 'open');
// }, 5000);
return true; // tell the editor that we'll take care of getting the image url
});
editor.run();
}
}
};
html:
<div id="myModal" class="reveal-modal">
<h2>Upload Image</h2>
<%= f.file_field :image %>
<button class="btn" id="insert_image_post">Insert Image</button>
<!-- <a class="close-reveal-modal">×</a> -->
</div>
I figured it out.
The wmd-prompt-background had a z-index of 1000:
<div class="wmd-prompt-background" style="position: absolute; top: 0px; z-index: 1000; opacity: 0.5; height: 1085px; left: 0px; width: 100%;"></div>
So i just added:
<style type="text/css">
#myModal {
z-index: 1500;
}
</style>
to my page and it worked.
One way to do it is to position the div of your modal directly under the <body>. This way you make sure that the modal is not part of elements with special z-index
so I'm using the Twitter Bootstrap plugin for Grails and I'm having trouble centering modals. When I remove the class="modal" part from the div that contains the modal, my centering function works properly, but when I put it back (which is necessary for it to have the functionality of a modal it gets stuck halfway off the page). Any help would be very nice :D
Here's my code:
<a style="position: relative; top: 2px;" data-toggle="modal" href="#myModal${instanceType.id}"
id="${instanceType.id}"> ${message} </a>
<div class="modal" style="background: black; overflow: hidden; top: 0px; left: 0px; display: none; border: 2px solid white; float: center; position: absolute"
id="myModal${instanceType.id}">
<div style="border:none" class="modal-header">
<a style="color:white;" class="close" data-dismiss="modal">X</a>
</div>
<iframe id="iFrame" style="border: none;"width=800px height=675px src="${action}/${instanceType.id}">
</iframe>
<div class="modal-body" style="background: black;"></div>
<div style="border:none; background: black;" class="modal-footer">
<a "="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$(myModal${instanceType.id}).css({
'width' : $(window).width()*.75,
'height' : $(window).height()*.75
})
$(myModal${instanceType.id}).center()
$('#modal-footer').append('${saveName}')
function submitFunction(){
$("iFrame").contents().find("#submit").click()
}
function changePre(){
$("iFrame").contents().find(".buttonNew").submit()
alert('hi')
}
</script>
If you're using the default modal styling centers the modal by absolute positioning. So when you customize a modal windows, and you change the size of it, you shall adjust relevant elements also. Like the modal-body and modal header and the .modal class.
And to answer your question, and if I got your question right, that is you were trying to position your modal VERTICALLY.
Open bootstrap.css , then find and edit .modal.fade.in
The default value is 50%. Try to play with it until you achieve your desired position. Increase it to move the modal to the bottom, decrease it and it will do the opposite.
Default modal size modal window positions Horizontal centre of the screen, once the modal customizes(width changes), need to position it with script.
sample script:
$('#myModal').modal({
backdrop: true,
keyboard: true
}).css({
width: '800',// custom width
'margin-left': function () {
return -($(this).width() / 2);
}
});
When the dialog is set to modal it should disable all input elements, but I tried a simple example with a textbox and a radiobutton. When the dialog is opened the text-input is disabled as expected, but i still can check the radiobutton.
I used the example from the jQuery-ui demo and a simple html with just a input-textbox and the radio.
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="dialog-message" title="Download complete" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<input type="text"/>
<input type="radio" onClick="showDialog();"/>
<input type="radio"/>
</body>
</html>
And the jQuery:
function showDialog(){
jQuery(function() {
jQuery( "#dialog-message" ).dialog({
position: 'center',
zIndex: 4001,
draggable: false,
modal: true,
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
}
}
});
});
}
Problem solved. It had to do with the css. Because I didn't use the default css or css created with theme roller I forgot to define the styling for ui-widget-overlay. After I copied the ovelay-styling from the jquery-ui css everything worked fine.
the css:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-widget-overlay {
background: #666666 url(ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
opacity: .50;
filter:Alpha(Opacity=50);
}