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>
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>
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>
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>
I'm building a responsive webpage with bootstrap plugin. Everything works fine in desktop browsers, even in low resolution and toggle device mode (chrome). But when i open the page on chrome or safari, on my iphone, the carousel just don't slide. It goes to the next slide, but without using the sliding effect.
This is the URL: http://diogoalmeida.pt/2/index.html
This is my HTML code:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Blueimp Gallery -->
<link rel="stylesheet" href="css/blueimp-gallery.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Menu -->
<nav class="navbar navbar-fixed navbar-green" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav nav-green navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container-fluid myCarousel">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
<div class="item">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div class="container">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" style="width:10%;" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" style="width:10%;" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" style="width:10%;" alt="Orange">
</a>
</div>
</div>
<!-- JQuery -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4(custom-touch).js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Blueimp Gallery -->
<script src="js/jquery.blueimp-gallery-1.2.2.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
</body>
</html>
Problem solved, the bootstrap auto compiler (website) wasn't including vendor prefixes.
Solution here -> https://github.com/twbs/bootstrap/issues/14973
similar problem .....my problem was that the images were not sliding to the next on small screens , i added to the head and it worked
<script src="../resources/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="../resources/assets/js/smoothproducts.min.js"></script>
<script src="../resources/assets/js/theme.js"></script>