I want to push the bottom toolbar when a mobile keyboard (from the chrome app) is shown.
Please see these images:
There is a toolbar for the content editable element.
When the keyboard is shown, the toolbar does not get pushed above the keyboard.
I use this style:
.toolbar {
width: 100%;
display: flex;
padding: 1rem 0 2rem 0;
position: fixed;
bottom:0;
right:0;
left:0;
}
Please help.
Set 100vh as height in your code of your body tag...
Related
I am attempting a layout consisting of header, content and footer. The header and footer should always be shown and the content should expand to fill any space remaining. I have implemented this in this jsfiddle; https://jsfiddle.net/SuperMe79/204wd5sv/42/
.app {
display: flex;
height: 100vh;
flex-direction: column;
flex-wrap: nowrap;
background-color: lightyellow;
}
.header {
flex-shrink: 0;
background-color: lightsalmon;
}
.content {
flex-grow: 1;
/* this adds a scrollbar when the content takes up more space than available to display */
overflow: auto;
background-color: lightgreen;
}
.footer {
flex-shrink: 0;
background-color: lightblue;
}
In the jsfiddle you can see a browser overlay obscures the footer at the bottom. I have a similar problem on my phone where the browser navigation controls obscure the footer.
I can scroll down further but that is a bad user experience.
I want the header, footer to always be visible. I can set the height to less than 100vh but this isn't ideally as it's a fudge and the footer is not longer at the bottom of the view on a browser without an overlay such as on my desktop.
Any thoughts on how to resolve this?
This is a similar issue to these questions but I've used a different approach to positioning and they haven't been answered.
Android browser bottom control bar overlays content
Chrome `position:fixed; bottom: 0;` obscured by Android UI
Try height: 100% instead of height: 100vh. You'll probably also need to assign 100% height to every container:
/* full height for every wrapping element and the app itself */
body,
html,
#app,
.app
{
height: 100%;
}
.app {
display: flex;
flex-direction: column;
}
I've got both #app and .app there because your JSFiddle example has both.
Add followings top of the style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Sample is in this link https://codepen.io/LakshithaMadushan/pen/BaoxvNv
I have a mobile web chat app as shown screenshot
, I have a textbox at the bottom of screen which is in footer and on android browsers, the textbox is not coming up on focus whereas in ios its working fine. Can any one help. developement in ReactJs.
footer: {
zIndex: 2,
bottom: 0,
boxSizing: "border-box",
left: 0,
position: "absolute",
right: 0,
background: "#fff",
position: "relative",
padding: "0 10px",
boxShadow: "0px -1px 10px 0px rgba(0,0,0,.12)"
}
You have used the position property twice one is absolute and another is relative.
Try using only one value and see the result. Hope it will work.
I just used a simple logic by using jquery
Here I am Use HTML :
<div></div>
<footer>
<input type="text"/>
</footer>
Here I am use Jquery :
$(document).ready(function(){
$('div').click(function(){
$('footer').removeClass('make-top');
});
$('footer > input').click(function(){
$('footer').addClass('make-top');
});
});
Here the CSS :
div{
height:200px;
}
footer{
z-index: 2;
bottom: 0;
box-sizing: border-box;
left: 0;
position: fixed;
right: 0;
background: #fff;
position: relative;
padding: 0 10px;
box-shadow: 0px -1px 10px 0px rgba(0,0,0,.12);
transition:.5s;
}
#media (max-width:600px){
.make-top{
bottom:100px;// Mention the keyboard layout actual height.
}
}
Just take the keycode while the back button pressed : and remove this class via jquery..
I hope this will help.
Issues fixed. my main div when media max-width: 767px i was giving height 100% !important. this was stopping android webpages not to show textbox as the height was important and i removed it. but this was not causing issue in IOS browsers.
https://i.stack.imgur.com/SLPy5.png
I have a local page in android webview, pages's html and body both has width:100%;height:100%;overflow:hidden; , and the #result-popup-wrap has the following css:
#result-popup-wrap {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 245px;
background: #fbfbfb;
border-top: 1px solid #dcd9d5;
-webkit-transform: translateY(100%);
}
but, as you see, when I scroll to bottom of the page, I can see the #result-popup-wrap, which should not be visible.
Any help is appreciated!
Just for anyone who are suffering the same problem.
ADD position:relative to the <body> tag.
Apparently, this is a bug of WebView, on both Android and iOS. On chrome of PC version, page renders OK without body{position:relative;}, but in WebView, you can scroll the entire page, including the 'hidden' #result-popup-wrap.
click here to see demo , pay attention to the UPPER comment in css
you can set body{position:fixed;top:0} to the body.
my question is almost the same with this:
Hide the scrollbar but keep the ability to scroll with native feel
I loaded a list style webpage to a webview for an android app. I found that because of the scrollbar, there's a white space on the right side of the page. It's annoying. I want to hide the scrollbar, but keep the ability to scroll with native feel like #Gabriele Cirulli said.
I found this:
http://hynchrstn.wordpress.com/2012/06/10/hide-scrollbar-but-still-scrollable-using-css/
It works fine for pc, but for mobile devices, it causes the page horizontally scrollable, which is not acceptable.
Anybody can give me some advice? Many thanks.
Based on the link you added I was able to come up with a more solid solution.
HTML
<div class="container">
<div class="scroll">
[...lots of text]
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container,
.scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container {
overflow: hidden;
}
.scroll {
padding-right: 20px;
right: -20px;
overflow-y: scroll;
}
What it does:
The .container and .scroll div both have the same dimensions as the body (full size), and since the body and .container both have overflow: hidden they will never show scrollbars in any direction.
The .scroll has an overflow-y: scroll so it can scroll vertically, but not horizontally. The scrollbar is pulled out of view with the right: -20px and I added padding of the same size so the content will always fit the screen nicely. There will be no need for the browser to let you scroll horizontally
jsFiddle
Tested on Android in Chrome and the native browser
I'm developing application in Phonegap and have some styles on my textarea:
textarea {
background: url(img/ynxjD.png) repeat-y;
width: 600px;
height: 300px;
font: normal 14px verdana;
line-height: 25px;
padding: 2px 10px;
border: solid 1px #ddd;
}
Because Android browse has default styles on input elements and textarea like overlays and basically when I click on my textarea all styles dissappear and big ugly white rectangle with green corners appears, I found a workaround with this:
textarea {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
as mentioned here:
Disable Android browser's input overlays?
Everything is great, but when I write in the textarea and go to new line android keyboard dissapears and I need to click again to appear and that is with every new line.
I am testing on HTC desire X if that matters
I would be glad if someone help me fix this : )