I am working on an Ionic App and I don't know why the list item is not visible why it is under the title tab?
Here is the link of code.
https://jsfiddle.net/jneypysb/
I used <ion-header-bar> and <ion-content> with has-header class and I resolved.
Because you declared <body ng-app="Hungroo"> it's necessary to define those module.
It follows a complete example:
angular.module('Hungroo', ['ionic']);
<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/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="Hungroo">
<ion-header-bar class="bar bar-header bar-royal">
<button class="button button-icon icon ion-navicon"></button>
<div class="h1 title">title</div>
<button class="button button-icon icon ion-settings"></button>
</ion-header-bar>
<ion-content class="has-header">
<div class="padding">
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
First Things First!
</div>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</label>
</div>
</div>
</ion-content>
</body>
</html>
Related
Configurations:
Vapor 4 | Updated beta version & packages | macOS Catalina v.10.15.3 | XCode 11.4 beta 2 | Bootstrap CDN 4.4.1
I'm unable to toggle my navbar button. I'm not sure if it's a bug in Leaf. I've implemented Bootstrap and CSS in the right order. Try and run this code. Don't forget to resize your browser window to mobile or tablet view in order to show navbar toggle button.
Here's my leaf code:
// base.leaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- <link rel="stylesheet" href="/styles/bootstrap.min.css"/>-->
<link rel="stylesheet" href="/fonts/fa/css/all.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/styles/main.css"/>
<link rel="stylesheet" href="/styles/header.css"/>
<link rel="stylesheet" href="/styles/footer.css"/>
<title>#(metaContent.title)</title>
<meta name="description" content="#(metaContent.description)"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main>
#import("main")
</main>
<footer id="myFooter">
<div class="bg-secondary" style="height:3px;">
</div>
<div class="footer-copyright footer-brand">
<h6 class="mt-2 text-light">© 2020 Company. All Rights Reserved.</h6>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// index.leaf
#extend("base"):
#export("main"):
<div class="container mt-3">
<h1>#(metaContent.title)</h1>
<p>#(body.content)</p>
</div>
#endexport
#endextend
In Safari's Inspect element, my html document is rendered in the right order. But, I've no clue why the click on navbar toggle isn't working.
As far as I remember using Vapor 4 leaf renderer there is a bug about #. They are always interpreted as the beginning of a leaf tag.
The simplest workaround is to escape them with a \ : data-target="#navbarCollapse" become data-target="\#navbarCollapse"
I believe there is a bug in Leaf parser, and the # in data-target="#navbarCollapse" gets misinterpreted. The way I have solved it is to change data-target to data-target=".navbarCollapse" and to modify class attribute of navbarSupportedContent div element from <div class="collapse navbar-collapse" id="navbarSupportedContent"> to <div class="collapse navbar-collapse navbarSupportedContent" id="navbarSupportedContent">. Not the best of workaround, but it does the trick until the Leaf parser is modified.
I am trying to build a todo app based on Materialize-css. I want the input-field to be on the same line, as the submit button which should include a materialize icon. That's what I have currently:
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<input type ="submit" class ="btn waves-effect waves-light inline" value = "Submit"/>
</div>
</div>
Here's a picture about how it looks currently. I just don't know how to add the icon to the submit button, because there is no opening and closing tag, it's just an input tag. I need that input-tag to be able to use php code after the submition.
Todo-App
You just have to replace the input tag with a button tag like in the example, hope it will help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue darken-3">
Charts
<!-- <i class="material-icons">menu</i> -->
<ul class="right hide-on-med-and-down">
<!-- <li>Sass</li> -->
</ul>
</div>
</nav>
<!-- <ul class="sidenav" id="mobile-demo">
<li>Sass</li>
</ul> -->
</header>
<main >
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<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>Input X Icon</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 ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>
Playing around with ionic and found a strange behavior on the first click on `ion-radio.
<!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="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://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">
<div class="card">
<div class="item item-divider">Social media</div>
<ion-radio ng-model="choice" ng-value="''" icon="icon ion-social-facebook">facebook</ion-radio>
<ion-radio ng-model="choice" ng-value="''" icon="icon ion-social-twitter">twitter</ion-radio>
<ion-radio ng-model="choice" ng-value="''" icon="icon ion-social-youtube">youtube</ion-radio>
</div>
</ion-content>
</ion-pane>
</body>
</html>
You can give it a try at
http://play.ionic.io/app/9056e06acc35
The problem may be:
ng-model="choice" ng-value="''"
You have set ng-value as empty, so when click on any option.. choice is set to empty.
so,now..it try to search ng-value as empty till end in options and as all are empty it set last one as selected.
try to set ng-value="twitter", means set some value to ng-value.
<ion-radio ng-model="choice" ng-value="'fb'" icon="icon ion-social-facebook">facebook</ion-radio>
<ion-radio ng-model="choice" ng-value="'twit'" icon="icon ion-social-twitter">twitter</ion-radio>
<ion-radio ng-model="choice" ng-value="'youtube'" icon="icon ion-social-youtube">youtube</ion-radio>
Started with Ionic but want to add a new button to the right of my apps header.
However, in my index.html I only have this:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
And cannot find how to edit the header? Im guessing its generated in a template somewhere, but no searching is returning anything.
If you need a working example... here it is:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
<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>Ionic Template</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-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="onepage">
<ion-nav-buttons side="left">
<button class="button">
LeftButton
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-assertive">
RightButton
</button>
</ion-nav-buttons>
<ion-content class="padding">
<!-- The content of the page -->
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
check this codepen
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
Available sides: primary, secondary, left, and right