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
Related
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.
I want to create a button with a ripple effect on clicked.Is it necessary to achieve it through a directive. How do i handle the javascript required to handle the click and propagate the ripple away from the point it was clicked.
I have done it using javascript and css but it is not the angular way.
<!doctype html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div {
width: 150px;
position: relative;
padding: 15px;
border: 1px solid black;
}
button { color: green; border: 1px solid green; }
</style>
<div>
<paper-ripple></paper-ripple>
<button id="btn">Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem',
listeners: {'btn.down': 'onDown'},
onDown: function(e) {
e.stopPropagation();
}
});
</script>
</dom-module>
</body>
I have just uploaded my website onto a hosted server with 1&1. The problem I am having is I cannot seem to find out why the media query rules I have set are now not working / are ignorned.
I have tested on my iphone 5 but my website does not scale as it should. However when I resize my browser (Google Chrome) on my desktop to tablet and mobile sizes it does scale correctly.
Is there any reason why when I resize my browser it works perfectly but when I test it on a mobile device it does not work / scale properly?
Just for extra info I am using wordpress and I include my css files in the right way through the functions.php file.
My website is www.jamieclague.com, please feel free to look at the source code.
Thanks for any help, much apprciated.
header.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
CSS - styles.php (snippet of the code)
#media only screen
and (min-device-width:401px)
and (max-device-width:480px){
.header{
min-height:520px;
}
.banner-matter {
top: 22%;
width:100%;
}
.banner-matter p {
overflow: hidden;
width: 100%;
}
}
#media only screen
and (min-device-width:321px)
and (max-device-width:400px) {
.banner-matter h2 {
font-size: 27px;
}
.banner-matter p {
font-size: 20px;
}
a.more span {
left: 30%;
}
}
#media only screen
and (min-device-width:220px)
and (max-device-width:320px) {
img.scroll {
margin-top: -0.7em;
}
a.more {
background-size: 92%;
width: 180px;
height: 64px;
font-size: 1.15em;
}
.view {
padding: 0.3em 0 0;
}
a.more span {
left: 27%;
top: 27%;
}
}
Update
A couple of suggestions.
If you use web inspector you'll see a number of 404s, including
http://www.jamieclague.com/js/jquery.contentcarousel.js
http://www.jamieclague.com/js/jquery.mousewheel.js
http://www.jamieclague.com/wp-content/themes/portfolio/style.css
and a jQuery error from line 113
$ is not a function. (In '$(document)', '$' is undefined)
As a starting point it would be good to fix these.
Also, if I look in http://www.jamieclague.com/wp-content/themes/portfolio/css/style.css?ver=4.6, I'm not sure if you have a closing curly bracket for the statement that starts at line 1813
#media only screen and (max-width:993px){
...
You need a viewport meta tag in the head of your document, without this the default behaviour for mobile devices will be to scale the page to fit your screen.
Something like the following will get you started.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
Find out more about settings you can use: http://www.w3schools.com/css/css_rwd_viewport.asp
Good luck!
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;
}
could you please tell me how to make button of same size (or same height).Actually I have four buttons and a toggle button in one row I need their height should same as shown in image .I need to decrease height of toggle button .can we make same like that as show in image
here is my code
.margin_button_bar{
margin-left: -0.5em!important;
padding:0.5em!important;
}
.button_tab{
position: relative;
}
.toggle_button{
position: absolute!important; right: 0px!important;
display: inline;
border: none;
background: transparent;
paddig:0.5em!important;
}
can we reduce toggle button height ?
you can change the height of the toggle track (the part the toggle slides along) by chaning the .toggle .track {} class and you can change the handle (the part that moves) in the .toggle .handle {} class: or in your ion toggle you can just apply toggle-small as a class so it looks like <ion-toggle class="toggle-small">
see this play ground and play with the css http://play.ionic.io/app/46f56cb9e30d
code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
</ion-content>
</ion-pane>
</body>
</html>
CSS:
/* Styles here */
.toggle .track {
height: 20px;
}
.toggle .handle {
height: 20px;
}
JS:
angular.module('app', ['ionic']);