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%;
}
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 am trying to code a locally saved simple web page. I have implemented the Semantic UI as the css framework. I am Trying to use a similar menu setup as one of their examples. I have the majority coded the same, yet when I click on the menu button the sidebar does not become visible.
var sideBarMenu = $('ui.sidebar');
sideBarMenu
.sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.main .item', 'show');
<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></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<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=Rye&display=swap" rel="stylesheet">
<link rel="stylesheet" href="SVGPCGen.css">
</head>
<div class="ui fixed main menu" id="menuButton">
<a href="" class="launch icon item">
<i class="sidebar icon"></i>
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item" id="calculate">
<i class="calculator icon"></i> Calculate
</a>
<a class="item" id="save">
<i class="save icon"></i> Save
</a>
<a class="item" id="load">
<i class="upload icon"></i> Load
</a>
</div>
<div class="pusher">
Never Mind, found the problem was missing a class description in Javascript jquery search
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?
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;
}