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.
Related
I have two html sheets, one in Spanish and one in English, and I want to put a bootstrap toggle switch so that every time I click I am redirected to a different sheet
<li>
<a href="secciones/index-esp.html">
ESP
</a>
<div class="form-check form-switch">
<input type="checkbox" id="flexSwitchCheckDefault">
</div>
<a href="secciones/index-esp.html">
ENG
</a>
</li>
I have a search bar at the header and wish to be able to link a click event to one icon.
Here is the header code:
<ion-nav-title>
<div class="item-input-inset" style="padding:5px">
<label class="item-input-wrapper" style="background-color:#FFF">
<i class="icon ion-ios-search placeholder-icon" style="font-size:20px"></i>
<input ng-model="search_text" type="text" placeholder="Search"
style="width:100%;height:33px"
focus-me my-enter="new_search(search_text)">
<i class="icon ion-android-close placeholder-icon" style="font-size:20px;" ng-click="clear_search_text()"></i>
</label>
</div>
</ion-nav-title>
As can be seen, there are two icons. the second one has a ng-click that never fires once tapped. In fact, when clicked, it's like i had clicked on the input.
Is there any solution for this situation?
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
I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.
I found on the official Semantic-UI documentations, there is the setting "detachable" for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?
Here's the code thus far:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
Semantic UI does not support draggable modals at the moment like JQuery UI does.
Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker color).
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/