I have View where body must be 100% height.
Here is code of page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8" />
<title>Евгений Соя</title>
<link rel="shortcut icon" type="image/x-icon" href="mini.png"/>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img class="graficlogo" src="logo.png" alt="Logo">
</div>
<nav>
<div class="topnav" id="myTopnav">
Главная
Тур
Книги
<a id="menu" href="#" class="icon">☰</a>
</div>
</nav>
</header>
<script src="script.js"></script>
<div class="main">
<h1> "Времени пленница "-
новая песня Марии Чайковской по мотивам стихов Евгения Сои доступна iTunes.</h1>
<p></p>
</div>
<div class="icons">
<img class="embl1" src="INSTAGRAM_icon.png">
<a href="https://www.stihi.ru/avtor/sunfish"><img class="embl2"
src="111.png"></a>
</div>
</body>
</html>
Full code is here
https://codepen.io/suhomlineugene/pen/MXPGPN
When I open it on ios device all ok and I see this
ios
On android it is like this
Android
I don't understand why, if I had body 100% width and height.
How I can solve it?
Related
I am creating a navbar for mobile using Bulma. The HTML snippet I used from Bulma for the Navbar is misbehaving by aligning the buttons to the left instead of aligning them to the right. Moreover, I want those buttons to appear on small screens to the right without the Hamburger. Here is what it looks like on small and large screens. I have even tried using columns to align the buttons to the right and make their appearance possible on small screens.
Small Screen
Large Screen
Here's my code for Navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<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>Document</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
You have an extra <div> with a class of "navbar-start" that is not needed and you also need to get rid of class="navbar-menu" as Bulma automatically hides the right side on small devices with this class.
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
I'm using AOS plugin, and once I run the plugin on localhost it fails to appear, but if I run it on codepen it runs perfectly.
I have the same code as it appears in codepen and I've used AOS.init inside a <script> tag to run it.
Also I have CDN stylesheet and script in my code.
<html>
<head>
<title>What To Eat - Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
<script>
AOS.init({
duration: 1200,
})
</script>
</head>
<body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
</body>
</html>
And CSS is the same as you can see in codepen.
I believe the browser version (Chrome - latest version) isn't the problem since I able to see the result in CodePen good enough.
How can I run this plugin in my localhost?
You need to call your script after the page is rendered, this will allow to bind the events to your elements after being created:
<html>
<head>
<title>What To Eat - Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
</body>
</html>
<script>
AOS.init({
duration: 1200,
})
</script>
I am implement mobile website. I am using mobileangularui framework for mobile website. I want to set image in home.html, But i could not set image from image folder.If i put URL of image which is exist in server then it is works. I will show screen shot of code snippet.
Existing output:
home.html
<style>
.bgImage
{
background-image: url('http://www.electricshop.com/editordocs/image/OurTopGiftIdeas231215_978x400.png');
height:330px;
background-position: center center;
}
</style>
<div class="jumbtron scrollable-content">
<div class="bgImage">
</div>
<img src="../images/clocks.jpg">
<img src="http://1.bp.blogspot.com/-NFIfiFmg8SA/Ti0xrNqB4OI/AAAAAAAADno/fB_2wYQBiv4/s1600/silence-between-two-people.jpg">
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>y</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<script src="http://localhost:8001/target/target-script-min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.min.js"></script>
</head>
<style>
.color-winni-text
{
color:#c62222;
}
</style>
<body ng-app="Y" ng-controller="MainController">
<!-- Sidebars -->
<div ng-include="'sidebar.html'"
ui-track-as-search-param='true'
class="sidebar sidebar-left"></div>
<div class="app">
<!-- Navbars -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center color-winni-text" ui-yield-to="title">
<strong>Winni Celebration</strong>
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars color-winni-text fa-2x"></i>
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn">
<i class="fa fa-comment color-winni-text"></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<i class="fa fa-home fa-navbar"></i> Docs
<i class="fa fa-github fa-navbar"></i> Sources
<i class="fa fa-exclamation-circle fa-navbar"></i> Issues
</div>
</div>
<!-- App Body -->
<div class="app-body background-color-body">
<div class="app-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<div ui-yield-to="modals"></div>
</body>
</html>
When i give
<img src="../images.clocks.jpg">
then it is not works, But i give image url which is exist in server then it is works.
Directory Screen Shot:
Please give me some idea.
I am trying to display google & facebook sign buttons side by side in a webpage.I'm using bootstrap social to display Facebook button and Google API to display Google button.By default I'm able to display them one below the other but when I try to display them one beside the error I'm not getting the desired output..
HTML Code..
<!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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body>
<div class ="google">
<div class="g-signin2" data-onsuccess="onSignIn"></div> <!--Google signup button-->
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div>
</body>
</html>
Current Output..
<!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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body><div class ="google">
<div style="float:left;" class="g-signin2" data-onsuccess="onSignIn">goooogle</div>
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div></body>
Remove , to .google and .facebook you can give display: inline-block; or you can give to both float: left;
Use This CSS Style code:
.google{
float:left;
}
.facebook{
float:left;
}
Use css code:
.google, .facebook {
float:left;
}
Or
.google, . facebook{
display:inline-block;
}
I am trying to implement toolbar in ionic which should look like same as this given in bootstrap .
http://jsfiddle.net/wmDL8/17/
I need to implement toolbar in ionic same as above in fiddle which is implemented in bootstrap.I tried it but my button are taking whole width I need equal space take from left and right .And user should able to add active class so that it know which button is selected and which is not
can we implement toolbar in ionic
here is my code
http://codepen.io/anon/pen/pJRJLj
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
<div class="buttons">
<i style="font-size:30px;" class='icon ion-chevron-left'></i>
</div>
<h1 class="title">Title!</h1>
</ion-header-bar>
<ion-content>
<div class="button-bar">
<a class="button">Command1</a>
<a class="button">Command2</a>
<a class="button">Command3</a>
</div></ion-content>
</body>
</html>
You can change your CSS padding-left and padding-right for your button-bar div:
http://codepen.io/anon/pen/vOgOvV
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
<div class="buttons">
<i style="font-size:30px;" class='icon ion-chevron-left'></i>
</div>
<h1 class="title">Title!</h1>
</ion-header-bar>
<ion-content>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
<a class="button">fourth</a>
</div></ion-content>
</body>
</html>
CSS:
.button-bar {
padding-left:10%;
padding-right:10%;
}
Image:
You can change the percentage to whatever you need it to eventually be.
add a padding to your button-bar class with the desired value :
.button-bar {
padding-left:10%;
padding-right:10%;
}