Codemirror cursor position offset - css

I'm using code mirror to display, highlight and edit xml in a web page but I am having a problem with the cursor position being offset from the insert position so that if you delete a character from where the blinking cursor is, a character before the one you would expect gets deleted instead. I am assuming its a css clash with my current page because it works well outside my page, but cant find the clash anywhere. Has anyone had similar issues or know what to do?

Further investigation shows that the page had padding set on all divs embedded in fieldsets which was the cause of the problem.

The following lines fixed the issue for me:
.CodeMirror pre {
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
I'm using lineWrapping: true in my CodeMirror configuration. Setting that to false works as well.

Be careful using zoom in your CSS with CodeMirror.
I used zoom in body and removing that worked for me.

This issue often happened to me after resizing a parent container. What helped was:
editor.setSize("100%", "100%");
editor.focus();
in the end of a resize event handler.

Sometimes, also, below italic or bold -containing lines (depending on your OS and browser), cursor has a wrong vertical position up to 90% of a line. It can be easily fixed by setting, e.g.
.CodeMirror pre {
height:15px;
}
anywhere in your CSS stylesheets. This also provides you with a way to control line height, if you find lines of code showing too close to each other.

For some reason the white spaces when indention is enabled were not treated correctly when calculating the line size. Replacing measureLine function with the following in codemirror.js did the trick for me:
function measureLine(cm, line) {
// First look in the cache
var cached = findCachedMeasurement(cm, line);
if (cached) return cached.measure;
// Failing that, recompute and store result in cache
var measure = measureLineInner(cm, line);
var origL;
var origR;
var lastR ="";
for (var mes in measure) {
origL = measure[mes].left;
origR = measure[mes].right;
if (lastR != "") {
measure[mes].left = lastR;
measure[mes].right = lastR + (origR - origL);
}
if (origL == origR) {
measure[mes].right = measure[mes].right + 8;
}
lastR = measure[mes].right;
}
var cache = cm.display.measureLineCache;
var memo = {
text: line.text,
width: cm.display.scroller.clientWidth,
markedSpans: line.markedSpans,
measure: measure,
classes: line.textClass + "|" + line.bgClass + "|" + line.wrapClass
};
if (cache.length == 16) cache[++cm.display.measureLineCachePos % 16] = memo;
else cache.push(memo);
return measure;
}

Related

Insert a page break if the height of a div does not fit in print media?

I am dynamically creating elements on a web page which I want to print. I want a page break if the element can't fit in the rest of the A4 size paper.
Example is this question: Force an element to take exactly half of available height in print media
In the picture, A broken element is appearing on first page, which should actually go on the second page.
How can I force a page break if the element does not fit in this page.
**What I tried: **
I tried to use css page-breakafter` property, with the following code:
$(document).ready(function(){
$(".row").each(function(){
if($(this).height()>$(document).height()/2){
$(this).after('<div style="page-break-after:always"></div>');
}
});
});
But it does not work.
Here is a JsFiddle
I noticed in your fiddle that you have applied page breaks only after a few rows. The problem with your jQuery code is that, the $(document).height() will return a huge value compared to each row. In your case, document height = 3861 while each row is only 537. Hence 537 is never greater than 3861/2. Revisit the exact condition you need to apply the page break. I tried window.height instead and it works.
Note: You can only see the difference in print preview
EDIT:
Could you remove all the page break div's you manually added and try the below script.
What I tried is to capture the previous element height and then calculate if he page break is necessary.
For this purpose, I have kept a maxHeight of the document to be 1024 considering how much an A4 sheet can take up. Feel free to adjust the maxHeight according to your paper size.
$(document).ready(function(){
var prevRowHeight = 0;
$(".row").each(function(){
// console.log($(this).height());
var maxHeight = 1024;
var eachRowHeight = $(this).height();
if((prevRowHeight + eachRowHeight) > maxHeight){
$(this).before('<div style="page-break-after:always"></div>');
console.log("add page break before");
}
prevRowHeight = $(this).height();
});
});
Previous answer was good but there is a bug. You must need total_height. Please Check this I think this code help you. I use this code for a hospital management project for printing system. Thank you.
jQuery(document).ready(function(){
var prevRowHeight = 0;
var total_height = 0;
jQuery(".row").each(function(){
// console.log($(this).height());
var maxHeight = 1000;
var eachRowHeight = jQuery(this).height();
total_height += prevRowHeight + eachRowHeight;
alert('now : '+total_height +' , Was: '+ prevRowHeight);
if(total_height > maxHeight){
jQuery(this).before('<div style="page-break-after:always"></div>');
console.log("add page break before");
now_height = 0;
}
prevRowHeight = jQuery(this).height();
});
});

Hiding grid columns change height of rows

I have quite annoying problem with hiding grid columns dynamically. After I hide columns (with long text in cells), the height of grid rows dramatically increases.
Before hide
and after hide operation
As You can see first row is definitely too high. Probably the reason of that behavior is the fact, that I use text wrap in grid cells.
.x-grid-cell-inner { white-space: normal; }
Is there any efficient way to make grid rows, not to change their height after hiding columns (and using textwrap ) ?
I've personally encountered this strange phenomenon before. The problem is caused by Ext JS "hiding" columns by setting the width to 0px.
My solution was to add event listeners to the grid header like this:
// me is the grid
me.headerCt.on({
columnhide: me.removeWordWrapOnHide,
columnshow: me.addWordWrapOnShow,
scope: me
});
Instead of using the existing x-grid-cell-inner class, make a new one like this:
<style type="text/css">
td.grid-cell-wordwrap > div {
white-space: normal; /* may need !important, not sure */
}
</style>
Then the implementation of these two functions did this:
removeWordWrapOnHide: function(headerCt, column){
var me = this,
wordWrapRe = /wordwrap/;
if(column.useWordWrap || wordWrapRe.test(column.tdCls)){
column.tdCls = column.tdCls.replace("grid-cell-wordwrap", "");
column.useWordWrap = true; // Flag to check on show
me.view.refresh();
}
},
addWordWrapOnShow: function(headerCt, column){
var me = this,
wordWrapRe = /wordwrap/;
if(column.useWordWrap && !wordWrapRe.test(column.tdCls)){
column.tdCls = "grid-cell-wordwrap " + column.tdCls;
me.view.refresh();
}
}
Might not be the most efficient way, but it gets the job done.

PhantomJS: Webkit-Transform scale causes page to flow outside viewport

I'm trying to generate large png screenshots of web pages using PhantomJS, which is built on webkit. I have the application generating screenshots just fine (using their raster.js example.) But, I want the text to be larger (rather than 12-16px) - I don't care about the images becoming grainy. I thought that I could simply scale/zoom the webpage doing something like:
document.documentElement.style.webkitTransform = "scale(2.0)";
But that causes the content of the page to escape the viewport. You can see this if you evaluate that line of code in Chrome. Is it possible to scale a whole web page (duplicating "Ctrl +" functionality of the browser) in JavaScript/Phantom.js?
My current phantom.js script looks like:
var page = new WebPage(),
address, output, size;
if (phantom.args.length < 2 || phantom.args.length > 3) {
console.log('Usage: rasterize.js URL filename');
phantom.exit();
} else {
address = phantom.args[0];
output = phantom.args[1];
page.viewportSize = { width: 1280, height: 1024 };
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
page.evaluate(function () {
document.body.style.webkitTransform = "scale(2.0)";
});
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
}
Try
page.zoomFactor=2.0;
The webkitTransform CSS property is not going to do what you want, with or without setting the origin. For one thing, it does not change the dimensions of elements (ie, no relayout occurs, the element(s) are zoomed within their current bounding boxes).
Update
You forgot to set the CSS transform-origin property, so your content expands half up and half down (the default is 50% 50%) and the upper part escapes.
So set it to 0% 0% to get the transform happen only down and right:
document.body.style.webkitTransformOrigin = "0% 0%";
You will also have to set the body width to 50% to avoid it ending twice as large as your viewport:
document.body.style.width = "50%";
Old answer - disregard
This resolves only vertical alignment
Ok, the scaling goes up and down, but the viewport extends only down. The fix fortunately is easy: move your content down of half its height.
Use this as your doubling function and you'll be fine:
page.evaluate(function() {
var h = $('body').height();
$('body').css('position', 'relative');
$('body').css('top', h/2 + 'px');
$('body').css('-webkit-transform', 'scale(2.0)');
});
Be aware anyway that getBoundingClientRect() and page.clipRect behaves weirdly when dealing with this transform.

Prevent Clipping while printing multi-page TextFlow using FlexPrintJob

I have a RichEditiableText component in a Flex 4.5 project and I want to print its contents. The problem I'm having is that component is holding a TextFlow and the copy is being clipped at the beginning/ending of pages. I can't seem to get it to respect the page breaks consistently.
I have this piece of code that adjusts the scroll position of the the RichEditableText component in a loop. Is there a better/smarter way to do this so that I ensure the text breaks to a new page appropriately?
if(richEditTextComponent.contentHeight <= printJob.pageHeight) {
printJob.addObject(richEditTextComponent, FlexPrintJobScaleType.NONE);
} else {
var max:Number = richEditTextComponent.contentHeight;
var i:Number = 0;
while(i<max) {
printJob.addObject(richEditTextComponent, FlexPrintJobScaleType.NONE);
richEditTextComponent.verticalScrollPosition += printJob.pageHeight;
i+=printJob.pageHeight;
}
}
Just for anyone else that has this problem...I ended up simply passing the copy to Javascript to handle printing. Turns out TLF is pretty cumbersome for type of thing.

Autosize Text Area (Multiline asp:TextBox)

I have a MultiLine asp:Textbox (a standard html textarea for those non-asp people) that I want to be auto-sized to fit all it's content only through css. The reason for this is that I want it to be of a specified height in the web browser, with scrolling enabled.
I have implemented a print style sheet however and want all text located in the textarea to be displayed when printed with no overflow hidden.
I can manually specify the height of the textarea in the print.css file problem with this being that the fields are optional and a 350px blank box is not optimal and there is always the possibility of a larger amount of text than this...
I have tried using :
height: auto;
height: 100%;
In IE and Firefox respectively yet these seem to be overridden by the presence of a specified number of rows in the html mark-up for the form which must be generated by .NET when you do not specify a height on the asp:Textbox tag, this seems to only accept numercial measurements such as px em etc...
Any ideas?
What you are asking for (a css solution) is not possible.
The content of the textarea is not html elements, so it can not be used by css to calculate the size of the textarea.
The only thing that could work would be Javascript, e.g. reading the scrollHeight property and use that to set the height of the element. Still the scrollHeight property is non-standard, so it might not work in all browsers.
jQuery or a javascript function to find and make textboxes bigger might be the best solution - at least thats what i found
we use this set of functions and call clean form after the page is loaded (i know this isnt the best solution right here and am working to transfer to a jQuery solution that is more elegant) - one note make sure your textareas have rows and cols specified or it doesnt work right.
function countLines(strtocount, cols)
{
var hard_lines = 1;
var last = 0;
while (true)
{
last = strtocount.indexOf("\n", last + 1);
hard_lines++;
if (last == -1) break;
}
var soft_lines = Math.round(strtocount.length / (cols - 1));
var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;");
if (hard) soft_lines = hard_lines; return soft_lines;
}
function cleanForm()
{
var the_form = document.forms[0];
for (var i = 0, il = the_form.length; i < il; i++)
{
if (!the_form[i]) continue;
if (typeof the_form[i].rows != "number") continue;
the_form[i].rows = countLines(the_form[i].value, the_form[i].cols) + 1;
}
setTimeout("cleanForm();", 3000);
}
If you set rows to be a ridiculously high number the CSS height rule should override it on the screen.
Then in the print stylesheet just set height to auto. This might result in some big blank space where all the available rows haven't been filled up, but at least all text will be visible.
give jQuery's autogrow() a go #
http://plugins.jquery.com/project/autogrow

Resources