I have this webapp running which is pretty much a chat-widget that you can implement on your website. The DOM structure is as following
<html>
<head>
</head>
<body>
<iframe1 ../> // chat body
<iframe2 ../> // chat toggle
</body>
</html>
which looks like this on the mobile browser:
On the very bottom we have a textarea element. Once you tap on it the virtual keyboard of the mobile device gets opened and it looks as following:
Once you start typing and try to select the text itself you see that the cursor position is offset. This only happens on the iPhone 6 mobile Safari as far as I am aware. All other tested mobile devices / browsers seem to work fine.
I have found a related issue which is being described here : https://github.com/18F/web-design-standards/issues/277
I realized that if you hold your finger on the textarea field and try to scroll the page down (which sometimes works), then it appears as if the cursor position is stuck on its position whilst the rest ob the webpage scrolls.
When you manage to scroll the app further down so that the textarea is right where the current wide button with the x is located, then the cursor position seems to align with the text that you inputed.
The bottom container, containing the textarea is built as following:
<div class="container"> // position fixed to the bottom of iframe1
<div class="container2"> // position relative
// menu button positioned absolute
// textarea field positioned with margin to each side
// file icon positioned absolute
</div>
</div>
Related
I have a mobile website that has a main wrapper with three divs inside - all are fixed height which add up to 480px total. The top two divs inside are headers which are pretty short, and the bottom one is where the main content is and has an overflow-y of scroll. I set the html and body to overflow-y:hidden. I want only the main content div to scroll vertically and absolutely nothing else, leaving the headers always visible in full.
When I view it in my desktop browser it works fine. In my iPhone simulator it scrolls correctly if I click and drag within that content div, but if I click and drag from one of the headers or I swipe with two fingers on my trackpad it scrolls the whole page, not just the content. This results in the top header getting scrolled off the page. I don't have a real iphone to test with, but I am told by my client that the same thing happens on her iphone.
I tried setting the height of the main wrapper to something very short (300px) so in theory there shouldn't be any need to scroll the page at all regardless of the overflow setting, but it still scrolls. I also tried visiting this very short page and even there in the simulator it scrolls a little. I also tried setting my headers to position:fixed but no luck.
How can I get the page to stop scrolling away from the headers?
You could bind a "touchmove" event to the two other divs, and use prevent default.
<div id="main-wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
The use jQuery and
jQuery(function($) {
$("#header").on(‘touchmove’, function(e) { e.preventDefault() });
$("#footer").on(‘touchmove’, function(e) { e.preventDefault() });
}
This will prevent the browser from doing it’s default behaviour.
Given a website with a fixed header and fixed footer... if you try to input text with my Galaxy Samsung S3 the browser (Chrome) zoomes the input form an opens an onscreen-keyboard.
But the fixed header and footer is still there in the screen.. so there is almost no space anymore and the input form is overlapped by the fixed css elements.
Isn't the mobile browser supposed to "hide" all the other elements, also fixed elements, when it goes into text input mode?
I'm working on jQuery mobile. I have an overlay which pops out on tap of a button in the header. The overlay appears close to the button.
<div data-role="header" data-position="fixed" data-theme="a" data-tap-toggle="false">
<h1>Photos</h1>
<a href="#photomenu" data-icon="gear" data-iconpos="notext"
data-rel="popup" data-transition="slidedown"></a>
</div>
But on orientation change the overlay appears at the center.
How to retain the position of the overlay on orientation change? Any help is appreciated.
By default, popups open centered vertically and horizontally over the thing you clicked (the origin) which is good for popups used as tooltips or menus. The framework also applies some basic collision detection rules to ensure that the popup will appear on-screen so the ultimate position may not always be centered over the origin.
For situations like a dialog or lightbox where the popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of position-to in addition to origin and window. For example, if you add data-position-to="#myElement" the popup will be positioned over the element with the id myElement.
Position to window
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
I have also made you a live jsfiddle example: http://jsfiddle.net/Gajotres/8xCYB/
I have an issue with website markup on WebKit browsers (Chrome & Safari), i.e. when I type something in edit box of right-slider, it scrolls the left area.
Please take a look at following example:
http://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - html code (input is inside div with id="palette")
Open next link in Chrome or Safari
Type something in edit box in right upper corner
Notice that scrollbar in left area shifts
It is very unlikely to change this markup radically if possible
Q. How to prevent scroll-bar from shifting and make it behave same way as it is in FF?
The problem here is that what it looks like you are doing and what you are actually doing are two different things.
It looks like the div on the left with a fixed width and overflow: auto (div#kb-board) and the input field on the right are unrelated elements - but they are not. The input field is actually a child of div#kb-board but its parent (div#palette) has fixed positioning so it sits in the top right of the page.
As a result, the input field is actually on the right hand side of div#kb-board and when you type in it the scroll bar moves as you are giving focus to the right hand side of that div.
So in this case, I would say Chrome is showing the correct behavior.
To resolve this you should stop nesting div#palette within div#kb-board. Since it uses fixed positioning, there is no need to nest it.
<div id="kb-board">
<div id="boards-container">
<div id="lane">...</div>
</div>
<!-- div#palette was originally here -->
</div>
<div id="palette">
<input type="text" value="Type here" />
</div>
Working example: http://jsbin.com/obiyec/8
I am experimenting with a map interface where the entire window is filled with the (Google) map, and my app chrome (don't know what else to call it -- the menues, controls, etc.) are floating or fade away when not required. I have put up an experimental interface.
When the entire page has loaded, the top menu fades out, but dissolves back into view if the mouse cursor moves to the top edge of the window. the legend tabs widget is collapsible and movable.
Now, here is the problem -- for a horizontal swath of the window approximately aligned with the tabs widget, the map is unclickable. You can witness the cursor over the map change from a hand where the map is accessible to an arrow where the map is not accessible. In that band, none of the markers are clickable, nor is the map draggable.
In the web page, the hierarchy is like so
<div id="map">map</div>
<header></header>
<div id="tabs"></div>
<footer></footer>
I have the #map z-index set to -1. If I don't do that, then the header starts fading out and fading in on mouseover erratically. The header behaves fine with map z-index set to -1.
If I move the map div after header, then it obscures the header. In other words, the following doesn't work
<header></header>
<div id="map">map</div>
<div id="tabs"></div>
<footer></footer>
As is, why am I not able to click on a portion of the map? It is as if #tabs is obscuring #map, however, #tabs is only about 300px wide, so it shouldn't affect the rest of the map.
The reason why this is not working is because on your current design the tabs div is positioned relative to the map. This means that the tabs div is overlapping the map area and you can't click it.
If you change the position of the tabs div from relative to absolute then it should work. With absolute positioning you can place the tabs div anywhere on the page based on the x and y coordinates.
You can find out more about CSS positioning here.