I'm developing a web app for mobile phones and i got a strange problem.
I have a simple page with a background image and an input field centered in the middle of the page.
The problem is whenever i click the input box and the virtual keyboard comes up, the background image and input field dimensions are recalculated according to the remaining page space.
The desired behavior is that the whole page will be pushed up.
relevant code (i'm developing with react, hence the weird names)
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style type="text/css">.location_input__LocationInputStyle___2cLQ9 {
position: absolute;
width: 85%;
height: 10%;
top: 45%;
left: 50%;
transform: translate(-50%);
background-color: transparent;
border-radius: 50px;
border: 3px solid #ffffff;
text-align: center;
font-size: 22px;
color: #ffffff;
}
</style>
<style type="text/css">.home_page_container__HomePageStyle___2f5vW {
position: relative;
width: 100%;
height: 100%;
background-image: url(86349e48855062e70072f79443fe0af6.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 40% 0;
}
</style>
</head>
<body>
<div id="app">
<div class="home_page_container__HomePageStyle___2f5vW">
<input type="text" class="location_input__LocationInputStyle___2cLQ9" placeholder="Address">
</div>
</div>
</body>
</html>
Related Images:
The problem, when keyboard pops up
Desired result
P.S: after playing with the debugger a bit, i found out that if i set the height of my app container/body/html to a fixed pixel height it doesn't happen.
Yet it's not a good solution, because i want the height to be 100% of the viewport (so it will be compatible with all devices).
How do i fix it properly?
You can specify min-height for the keyboard div.
You can also try giving the dividing the text part and keyboard part in vh (viewport height, like for input div : 50vh,keyboard :50vh ) instead of giving height:100%;.Please remove all other heights.
Related
The problem is: when changing width of a window in Chrome or Safari, my grid element would create 1 additional row to fit its children, and when the window is shrunk even further it won't create any more rows, it keeps just 2 rows and, instead, begins to resize itself (pic.3).
It's the first time I see this problem and, honestly, can't understand what I'm missing there.
I've tested the same HTML file in Firefox -- and it works how intended (pic.1). The grid works just fine, creating as many rows as it needs to fit all its children. I have replicated the same styles and structure in CodePen, and it works fine on CodePen page in Chrome (pic.2), but if I download my CodePen project and open it in Chrome or Safari like an HTML file -- it has the same problem (pic.3).
I'd appreciate any suggestion or a correction. Thanks for your time.
CodePen link: https://codepen.io/vkharlakov/pen/wvjEgWM
HTML
<html>
<body>
<main>
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
</main>
</body>
</html>
CSS
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: plum;
}
main {
width: 100%;
max-width: 1920px;
display: flex;
flex-direction: column;
justify-content: center;
}
section {
width: 100%;
display: flex;
justify-content: center;
background-color: white;
}
ul {
width: 100%;
margin: 30px;
gap: 20px;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, 250px);
grid-auto-rows: 350px;
justify-content: space-evenly;
}
li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border: 3px solid steelblue;
padding: 10px;
}
If you found yourself searching the Internet with the same question, consider including this meta tag in your <head></head> section of your page:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It fixed the issue for me. Hope it helps you too!
In AngularJS, I have one textbox and while writing message if we type # then it should display list of names which is in arraylist.
Kindly help how can I do this feature using angularjs.
Thanks in advance
first you should publish what you have tried so far.. then only will help us to help you further...
here i wrote search alone..
for string specific,
you have to write function inside ng-change="func_name(your_txt)"
read the text use substr to find whether your text contains # if its do filter.. here i wrote filter inside ng-repeat can write filter on change will answer.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Angular animated search box - sibeeshpassion </title>
<style>
.inputText {
border: 1px solid #ccc;
border-radius: 10px;
background-color: #0ff;
box-shadow: 1px 1px 1px 1px #ccc;
width: 230px;
height: 30px;
}
ul {
list-style: none;
padding: 10px;
background-color: #CAEAF5;
border-radius: 10px;
border: 1px solid #ccc;
width: 210px;
}
li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
}
</style>
</head>
<body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu','Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">
<div>
<input type="text" ng-change="do_on_at(curPlace)" ng-model="curPlace" class="inputText">
<ul>
<li ng-repeat="place in placesVisited | filter:curPlace">
<span>{{place}} </span>
</li>
</ul>
</div>
</body>
</html>
I want to add footer in react which is tuck to the bottom of the page(not position: fixed ) when content is more I should see footer after scrolling till end and if content is less then it should display at the bottom. How to do it in React.js?
This can be done by making your footer a component and giving it the class as described here
You can use CSS do the trick with the power of flexbox and min-height.
Basically, a .wrapper for your container having minimum height of 100% of the vertical height, ie: 100vh, then the children components or elements (eg. .navbar, .content and .footer) sharing the height, you can make the .content assume the remaining height of the .wrapper while the other components assume the size of themselves, see below snippet for solution.
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1 1 0%;
background-color: whitesmoke;
}
/* You can ignore the styling below */
.app {
font-family: sans-serif;
}
.footer, .navbar, .content {
padding: 20px;
text-align: center;
border: 1px solid rgba(0,0,0,0.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Landing Page Flexbox Layout With Navbar Full Height Content And Footer Sticky To The Bottom</title>
</head>
<body>
<div class="app wrapper">
<div class="navbar">
Navbar
</div>
<div class="content">
<h1>Content</h1>
<h2>Takes remaining height and grows if needed!</h2>
</div>
<footer class="footer">
Footer
</footer>
</div>
</body>
</html>
You can read more about flexbox here: W3schools CSS Flexbox
You can also play around with this sandbox I created for ReactJS applying the above styles: Codesandbox
The behaviour you need looks exactly like the sticky position in css.I recommend using pure css here:
footer{
position: sticky;
}
See more here
this is its code it is only occupying 1/3rd of the browser page when seen through android chrome browser,Xperia z1
please someone suggest some changes
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style type="text/css" >
*{
margin:0;
}
html {
background: url('Startupal coming soon4.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (max-width: 600px) {
img src="Startupal coming soon4.jpg" {width: 100%; height: 100%; margin: 0; padding; 0;}
}
}
</style>
</head>
<body>
</body>
</html>
this is the whole code,it works fine on pc but not on the cell phone
Use a javascript script tag or file and update the width and height of the html body element each time the page is resized.
I usually use window.innerWidth and innerHeight because it is cross compatible and seems reliable.
window.addEventListener("resize", onResize);
function onResize(){
document.body.width = window.innerWidth;
document.body.height = window.innerHeight;
}
I am new to angularjs and web development is already not my forte, but I did search for an answer to this issue and can't find anything.
I am using ng-repeat on a div displayed as inline-block. I'm getting weird top and bottom spacing. I have a screenshot here: https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png.
Here is the base html:
<html>
<head>
<title>Knock Admin V1.0</title>
<script type="text/javascript" src="/assets/js/angular.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript" src="/assets/ng/admin/app.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>
<body ng-app="admin">
<div id="sidebar">
Welcome
<br>Logout
</div>
<div id="view">
<div ng-view></div>
</div>
</body>
</html>
And the view template:
<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />
<div id="locationCardCollection">
<div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
{{ loc.chain.name }} - {{ loc.name }} <br>
{{ loc.message }}
</div>
</div>
And lastly, the CSS:
body, div {
margin: 0;
padding: 0;
}
body{
background-color: #E4E4E4;
}
#view {
padding: 10px;
margin-left: 200px;
overflow: hidden;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background-color: #555555;
color: #FFFFFF;
}
div.locationCard {
background: #FFFFFF;
display: inline-block;
height: 400px;
width: 300px;
margin: 10px;
-webkit-box-shadow: 5px 5px 10px 1px #404040;
box-shadow: 5px 5px 10px 1px #404040;
}
div.locationCard.hover {
background-color: #FF0000;
}
I'm not doing anything tricky with formatting in the angular app code, so I'll leave that out unless otherwise requested. Can someone give me a hand here?
Thanks!
Added overflow: hidden to locationCard CSS.