left and top margin appears after showing keyboard in WebView - keyboard

I have a web app in PhoneGap with a width and height of 100%, and it fills the whole page, but when I input or try to input a value(numeric) into a <input> field, a 2-3px wide margin appears on the top and to the right of the page. I even tried changing the margin of the body to -3px on all sides after, but still the white gap stays, it appears so far only in Android 2.2 and 2.3. Is it a bug, or am I the only one to have this issue?

I have encountered this error on the app I'm working on. I am convinced this is a bug on Android 2.2 and above. I tried several possible solutions and found one that works. Unfortunately, I don't know why it works. It consists of three parts.
In the css file, I inserted the following:
#offset_wrapper {
position: absolute;
top: -20px;
}
Each time the app navigates to a page that contains elements with fixed position, we inserted the following code snippet:
$("div#main_container").append("<div id='offset_wrapper'>" + window.pageXOffset + "</div>");
Subsequently, every time the app navigates from these pages, the code below is applied.
$("#offset_wrapper").remove();

It had to do with fixed position headers and footers. When navigating to the page where the inputs are, I changed the position css attribute for the header and footer to other than fixed and the body position to default(css('position', '')) in jQuery. When navigationg to the page where fixed position is needed I just changed it back.

Old I know, but I fixed this or very similar issue in my phonegap application by specifying not the left:0 on my fixed elements. Generally I kept only top or bottom specified for my 100% width fixed navigation header and footer elements.
When the keyboard flew out, about 5 pixels of margin would appear. Adding left:0 stopped this from occurring for me.

Related

FabricJS Textbox - The cursor position is not set correctly for certain fonts

In the above image, the cursor should be at the end, but for some reason, it is placed before the last character.
This only happens for certain fonts.
I don't think it is related with how the custom font is being loaded, this image was taken from http://fabricjs.com/loadfonts. Also, the last version of the library is being used.
To reproduce the issue you have to do the following:
Change the font-family to "Pacifico".
Click on the text box to enter in edit mode.
Start typing.
Sometimes, even the last character goes outside of the bounding box.
I think that this has something to do with how the _measureChar() function executes, but I'm not sure what needs to be changed.
Thanks in advance!
Edit:
I did more tests and it seems that this problem is not present in IE.
This problem appears in Chrome and Firefox.
It is also strange how the characters are being rendered in each browser:
add below code before canvas.requestRenderAll();
fabric.charWidthsCache[this.value] = {};
canvas.getActiveObject()._initDimensions();
canvas.getActiveObject().setCoords();

Wicket ModalWindow - fixed vertical (start) position

I'm using a wicket application inside an Iframe. This causes a problem in the Internet Explorer. The ModalWindow opens not at the middle of the screen (of the current viewport). It opens at the bottom of the screen and nearly outside of it. I only want it to open some pixels under the start of the Iframe.
It works at Firefox and Chrome and opens correct, but not at the IE.
Only the first appearance must be fixed because the next position will be read out of the cookie anyway.
So are there any solutions for it?
How can I set a fixed vertical position at the beginning (first view of the modal)?
I read the blogpost "Repositioning a ModalWindow in Wicket" by steveswinsburg. But that doesn't work for me.
Question is answered in
Wicket ModalWindow position
I used this to give my modal window a new position.

confusion about chrome extensions iframe dimensions and scrolling

So I really hate the way chrome extension development works so I decided to make a regular webapp and use an iframe in my extension. Everything works fine, except for the dimensions of the website and the scrolling on the extension/site.
When developing the site, I knew I was going to use an iframe so I used percentages when formatting the site, for the most part I used 100% on most divs and textboxes. Anyway, the problem I am facing is that the scroll is extremely wonky on the extension for instance this is a picture of my extension with 400px height:
400x400. Everything looks fine.
and here is my extension with 800px height:
400x800. Scroll appears.
Why is the scroll appearing if I am merely making the extension longer? It doesn't make sense to me.
Any idea why this is happening?
There is a limit on the size of the popup window. I don't know the exact dimensions though.
You cannot increase the size of the document past it, scroll will appear.

Set height for dojo text area in xpages

I have a dojo text area which I'm binding it to a field. I saw that on browser, its height is OK but if I open the xpage in the Notes client its height is twice bigger. I tried adding height property for the text area, but it doesn't work.
Thanks in advance!
Browsers Firefox and XPiNC (XPages in Notes Client - that is XULrunner based on Firefox) show Dojo Text Area (dijit.form.Textarea) always with at least two rows even it contains only one line of text.
Other browsers like Chrome and IE work like expected.
You don't have a chance to change that behavior with style "height"/"minHeight" or parameter "rows".
The only solution I found is to create an own Textarea widget. But I am not sure if it's worth it...
This issue shows up only for contents with one line. As soon as you have two or more text lines Dojo Text Area's height adapts exactly - for all browsers.
Try setting the height using css styles, that should do it.
Update:
In case css should not be working here try using the classic HTML attributes 'cols' and 'rows'. I don't have Domino Designer ata hand right now, so I can't tell whether those attributes are available. If not you could add them yourself using the 'attrs' group.

How to show the bottom of a Form when its last component is displayed?

The container which contains the components inside a Form has a TOP and BOTTOM margin set to 1 and 10 respectively. The problem is that when scrolling through the navigation button ( the down key ) then when reaching the last component which is a Button then the remaining space below , the bottom margin, is not shown. Here are the image when scrolling to the last component :
What I want is like this image :
So how to show the bottom margin space when scrolling the last component ?
If you aren't using LWUIT 1.5 or SVN then we can't verify and help with issues like these since LWUIT changed quite allot since 1.4.

Resources