I've used to create tabs with some content on it using the following code:
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
<div class="item item-avatar">
<div ng-bind="profile.img_element"></div>
<h2 ng-bind="profile.name"></h2>
<p ng-bind="profile.points"></p><p> points</p>
</div>
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
However, my problem is that the tabs doesn't switch, and on the top of that I've been unable to set the content of the tab 'Test' properly.
I did some searches, but still didn't find a solution.
I don't have enough experience with Ionic, So any help will be much appreciated.
Thank you.
href="#" should not be '#' for every tab. '#' means default root url. So when you click on every page it redirect on same page. You need to set content using 'ion-nav-view' for tab view.
Please study this CodePen for more guid
Related
Below is the HTML code. Unable to click on the Login link at the navigation bar at the right hand side of the page .
<ul class="nav navbar-nav navbar-right">
<li class="online" data-toggle="modal" data-target="#loginPopup">
<a href="#">
<span class="glyphicon glyphicon-log-in">
</span> Login
<div class="ripple-container">
</div>
</a>
</li>
try
element(by.css('.glyphicon.glyphicon-log-in').click();
I am trying to add badges to my tabs in ionic, having one badge works fine using the following code:
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" ng-click="showVenue('venue')"><i class="icon ion-waterdrop"></i>Venue</a>
<a class="tab-item" ng-click="showComments()"><i class="icon ion-ios-chatbubble"></i>Comments</a>
<a class="tab-item" ng-click="showEvents()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-calendar"></i> Events</a>
<a class="tab-item" ng-click="showMap()"><i class="icon ion-android-pin"></i>Map</a>
<a class="tab-item" ng-click="showOffer()"><i class="icon ion-pizza"></i> Offers</a>
</nav>
However adding one more badge on, seems to not display or messes up the current view, e.g.
Venue
Comments
<a class="tab-item" ng-click="showEvents()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-calendar"></i> Events</a>
<a class="tab-item" ng-click="showMap()"><i class="icon ion-android-pin"></i>Map</a>
<a class="tab-item" ng-click="showOffer()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-pizza"></i> Offers</a>
I'm I doing it right?
I have it working in my current project, the only difference is that my 2 badges bind to 2 different values.
Here you are binding the 2 badges to same property {{detail.events}}, could you try with 2 different values?
Another difference is that I use <ion-tabs> and <ion-tab> directives while you're using CSS classes.
Below please find my article (individual blog) template for Modx. Everything works fine except for the fact that my [[*pagetitle]] value is not visible. I can select it with the mouse, but it is invisible. I am using the default sample.ArticleRowTpl. Also, find below my container template as well. Does anyone know why it wont display the [[*pagetitle]] href?
Individual article blog template:
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*pagetitle]]
<p class="post-info">
<span class="left">Posted on [[*publishedon:strtotime:date=`%b %d, %Y`]] by [[*publishedby:userinfo=`username`]]</span>
</p>
<br>
<div class="entry">
[[*content]]
</div>
<!--<hr />-->
<p>
[[*articlestags:notempty=`
<br>
<span class="tags left"> <b style="color: #000000">Tags: </b>[[+article_tags]]</span>
<br>
`]]
</p>
<div class="post-comments" id="comments">
<br>
[[+comments]]
<h3>Add a Comment</h3>
[[+comments_form]]
<br>
</div>
</div>
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
Blog container template
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*content]]
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
I figured it out. Somehow I had a class in my .css file (which I wasnt actually using) that was causing this anomaly. It took me a while to troubleshoot, but I finally figured out which one it was and removed it. It works fine now:)
I've got the following nav on my site
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar pull-right" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><span class="icon-chevron-up icon-medium"></span> Rocky Mountain Arts</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Gallery <b class="caret"></b>
<ul class="dropdown-menu">
<li>For Sale</li>
<li>Sold</li>
<li>Private Collection</li>
</ul>
</li>
<li>About The Artist</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
When I view the site on my desktop, I see everything as expected, and I can navigate all of the links.
HOWEVER: When I load the site up on my iPhone, press the toggle collapse button and then expand the dropdown, I cannot click any of the sub links within the dropdown menu, rather the menu closes and either the "about" or the "contact" link activate instead.
How can I fix this?
Thanks #MiikaL for the comment. Looks like it's a bug filed over at Github that no-one is really addressing in the official source code.
https://github.com/twitter/bootstrap/issues/4550
This can be reproduced on the github components demo page
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
There are people with helpful info in the tread, and the 'hack' solution seems to be
// Fixes sub-nav not working as expected on IOS
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
This issue is finally fixed in the latest Twitter Bootstrap as of version 2.2.2:
You can read a short summary about the changelog in 2.2.2 here:
http://forwebonly.com/things-you-should-know-about-twitter-bootstrap-2-2-2/
I have created phonegap app for iPhone and iPod touch, though i use to test it on iPod touch.
Problem: The images show up randomly, else it would show a question mark within the placeholder. I have tried running this app at several places like iPhone, iPod, desktop browser (with click event, not touch). Out of which on iPod and Desktop browser it seems to run fine, whereas on iPhone or iPhone Simulator I get random images to be broken.
Its an gallery for images, thus images are most important.
Any suggestions or pointers appreciated.
Below is a sample page code:
<div id="galleryRava" >
<div id="galleryRavaScroll">
<!--gallery scroll frame-->
<!-- /header -->
<div>
<div id="galleryRavalist">
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="capsicum_rava_masala"><img src="images/sankalp/rava/capsicum_rava_masala.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Capsicum Rava Masala</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="coconut_rava"><img src="images/sankalp/rava/coconut_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Coconut Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="crispy_rava"><img src="images/sankalp/rava/crispy_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Crispy rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="kanchipuram_achari_rava"><img src="images/sankalp/rava/kanchipuram_achari_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Kanchipuram achari rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="onion_rava"><img src="images/sankalp/rava/onion_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Onion Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="udupi_rava"><img src="images/sankalp/rava/udupi_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Udipi rava</span>
</a>
</div>
</div>
<div class="clear"> <br><br><br></div>
</div>
<!-- /content -->
</div><!--gallery scroll ends here-->
</div>
It's not immediately clear where you're loading the images from. Are these images stored somewhere, online? Or are you trying to access images that are already stored on the device?
And is it correct to say that sometimes the images show up, and sometimes they do not? Have you had an instance where you've had all the images appear? Or is there always at least one image missing?