I am using ionic framework to make a simple application( you can search through itunes for tracks). However, when displaying a lot of results, the ion content isn't scrollable. Here is my markup:
<!DOCTYPE html>
<html ng-app="hiphop">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS-Cordova</title>
<!-- Ionic framework - replace the CDN links with local files and build -->
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-controller="SearchCtrl" ng-app="hiphop">
<ion-pane>
<ion-header-bar class="bar-stable">
<label class="item-input-wrapper header">
<i class="icon ion-android-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search.query" ng-enter="search()" />
</label>
</ion-header-bar>
<ion-content class="has-header" animation="slide-left-right" padding="true" scroll="true" has-bouncing="true">
<!-- our list and list items -->
<div class="list">
<a class="item item-avatar" href="#" ng-repeat="item in items">
<img src="{{ item.artworkUrl60 }}">
<h2>{{item.trackName}}</h2>
<p>{{item.artistName}}
</p>
</a>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Codepen demo (with also js).
Why isn't it possible to scroll? How to do it?
PS: I am using Intel XDK
You had included ionic.bundle script 2 times, I removed one in your code-pen example and scrolling worked.
http://codepen.io/anon/pen/ynCsc
Related
please could you assist with printing a dropdown selection value when using the Print.js Javascript Library, the original selection remains and it does not dynamically change when you get the print window...
https://codepen.io/markchavush/pen/WWrWda
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<form method="post" action="#" id="printJS-form">
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test#mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
</form>
<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection', css: 'https://cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css' })">
Print Form with Header
</button>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
</body>
</html>
Please go directly to the codepen and press the print button to see that the dropdown list value does not appear correctly in the printout...
Cheers
Mark
You can't, not with the Print.js library.
The problem you're facing is a known issue - there was an issue created on their GitHub repo detailing this exact issue back in 2018. (That issue was merged to this open issue instead, since apparently it's the same problem). The original GitHub issuer even created a JSFiddle demoing the same problem you show in your codepen.
My only recommendation would be to attempt to implement something similar to this answer, though I won't pretend it will be easy.
I am very new to ionic. Trying to put a nice looking picture into the header. So right after I added the ion-nav-title in index.html it becomes like this http://imgur.com/a/XzCpS , the picture was too big. I need the image to fully be shown and also the top nav to not block the form the page.All help will be greatly appreciated :)
index.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">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="lib/ngStorage.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar bar-header navBar" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title>
<img alt="Company Logo" height="100" src="img/logo.png">
</ion-nav-title>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
style.css*
.navBar {
height: 100px;
background: #fffef1;
}
Eventsearch.html
<ion-view>
<ion-content padding="true" class="has-header">
<form id="othername-form1" class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date">
</label>
<label class="item item-select" >
<span class="input-label">Country</span>
<select ng-model="selected">
<option>Hong Kong</option>
<option>Tokyo</option>
<option>Paris</option>
</select>
</label>
</form>
<a class="button button-positive button-block" ui-sref="tab.schedule({country:selected})">Go</a>
<p>You are searching for events in {{selected}}</p>
</ion-content>
</ion-view>
Try setting the height to auto and the maximum to a huge value:
.navBar {
height: 100;
background: #fffef1;
}
ion-nav-title {
height: 100;
}
I am trying to develop a simple front end for displaying images using BootStrap. However before using BootStrap the button to view images was working fine but after styling the page using bootstrap, It does nothing, Can anybody tell me what am I doing wrong? When I tried seeing in Developer tools of Chrome , I get 2 exceptions:
Uncaught Error: You must include the utils.js file before tether.js
at tether.js:4
(anonymous) # tether.js:4
bootstrap.min.js:7 Uncaught ReferenceError: Tether is not defined
Code:
<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">
<title></title>
<script src="script/tether.min.js"></script>
<script src="script/tether.js"></script>
<script src="script/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/styles.css"></link>
<script src="script/bootstrap.min.js"></script>
</head>
<body>
<h1 class="mt-4" align='center'> Demo Website </h1><br>
<div class="container" style="width:300px; background-color:ghostwhite;">
<div class="form-group">
<form action='viewimages2.php' method="GET">
<button class="btn-block btn btn-info" align='center' type="submit" name="Submit"> View Images </button>
</form>
</div>
</body>
</html>
Working Code without Bootstrap:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<H1 align='center'>Demo Website/h1><br>
<button align='center' type="button" onclick="window.location='Register.php';" value="Register"> Register </Button>
<button align='center' type="button" onclick="window.location='Login.php';" value="Login"> Login </Button>
<form action='viewimages2.php' method="GET">
<button type='submit' name="Submit"> View Images </button>
</form>
</body>
</html>
You can try this, put the jquery.min.js before the other .js files. I think you can remove tether.js since you are already using tether.min.js
<script src="script/jquery.min.js"></script>
<script src="script/tether.min.js"></script>
I am building a huge one-page site, so I wanted to keep my code clean. I decided to part it into several HTML files and include them in one main index.html. So I wrote a snippet of code in index.html and everything worked fine. However, as I tried to include this snippet from another file, my web page did not appear properly.
Here is the snippet I wrote:
<div class="hidden-sm hidden-xs" id="containerStart">
<div id="left" class="start">
<img src="../pics/svg/Logo%20links.svg" class="logoStart hidden img-responsive" id="logoLeft">
</div>
<div id="right" class="start">
<img src="../pics/svg/Logo%20rechts.svg" class="logoStart hidden img-responsive" id="logoRight">
</div>
<div id="captions">
<h3 class="hidden" id="mivalStart">Mival</h3>
<h5 class="hidden" id="mivalMotto">Innovative Vertriebskonzepte</h5>
</div>
</div>
Here is my index.html:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--Start animation css-->
<link rel="stylesheet" href="../css/start.css">
<link rel="stylesheet" href="../css/letterFx.css">
<title>Mival</title>
</head>
<body ng-app>
<!--Intro-->
<div ng-include src="'intro.html'"></div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-letterfx.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
Maybe you know any solutions for my problem?
So I have spent more than an hour trying to figure this out.
I am trying to use a ToolTip from html5-kickstart and it doesn't seem to work when I use it, but the kickstart's kitchen sink works fine. I even copied all of their code into my web server and it didn't work?
I copied their headers and it didn't work, copied their code and it didn't work.
I am using Apache 2 pretty much out of the box. everything else html5 seems to work fine, but kickstart's tool tip.
Here is my code.
<html>
<head>
<title>Please Set name in fuction!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/mainpage.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/kickstart.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/tiptip.css" />
<script src="http://192.168.77.74/xxxxdesk/js/mainpage.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/kickstart.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/jquery-1.6.4.min.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/helium.js"></script>
</head>
<body>
<nav>
<div class="grid">
<div id="title" class="col_8 left">
<span>xxxxdesk<span>
</div>
<div id="login" class="col_4 right">
<!-- Click Action -->
<button class="tooltip" data-content="#usermenu" data-action="click">
<i class="icon-user"></i> UserName <i class="icon-sort-down"></i>
</button>
<div class="tooltip-content" id="usermenu"><h5>Menu</h5>
<button class="button meduim red pill" href="index.php/auth/logout">Logout</button>
</div>
</div>
</div>
</nav>
<div class="background">
<header>
A header .........
</header>
<main>
Content ...........
</main>
</div>
<footer>
A Footer ..............
</footer>
Please note that all this code is generated by my PHP code. So it is a dynamic site, but this is all that matters concerning HTML5 Kickstart.
Ok I finally figured it out.
The kitchen sink displays an older version of the package, and it uses an older version of jQuery.
My 1st mistake was that I had the old version of jQuery.
My 2nd mistake was that I was calling jQuery after I called kickstart.js. jQuery needs to come first.
I hope this help others down the road.