I want to have a "Help Icon" button appear in the header bar of every nav-view in an Ionic project. To do that I included the following in my index.html page:
<ion-nav-view>
<ion-header-bar>
<div class="row">
<div class="col col-10 col-offset-90">
<div class="buttons">
<button class="button" ng-click="doSomthing()"><i class="ion-help-circled"></i></button>
</div>
</div>
</div>
</ion-header-bar>
</ion-nav-view>
The help button I want appears in every view as expected, but is not clickable. I'm guessing it has to do something with the layering of itself within the ion-nav-view?
Things I've tried:
Wrapping the button in an anchor
Removing the row and col placement
Note: I do have ion-header-bars in other views as well so I can show page titles. Would this affect the button at all? The button still appears but is not interactive anywhere.
Any help/comments as to why the button is not clickable is greatly appreciated.
EDIT:
So I have narrowed down my issue after more testing. The problem is with the following code in my index.html file:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
It seems as though this nav-bar overlaps the header bar. And this code is essential because of the "Back Button" implementation. Removing this code block returns the functionality of the Help Icon Button.
I figured out what I was doing wrong. ion-header-bar should not be used after the ion-nav-bar. Doing so caused it to be overlapped and not be interactive. Adding the button to the ion-nav-bar itself solved this issue. The following code works perfectly and displays the button on all views:
<ion-nav-bar>
<ion-nav-back-button>
<i class="icon ion-ios-arrow-left"></i>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<a ui-sref="url.path.tohelp" class="button icon ion-ios-help"></a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
Related
I'm trying to use the materialize modal in my laravel app, I've got a blade file called skeleton which I put all my "scripts" in and stylesheets etc. That yeilds the sections which I define in my single blade files. That works great, however I've had loads of issues with materialize lately.
When I try to use the modal, I use this code from the docs:
$(document).ready(function() {
$('.modal').modal();
});
That's at the bottom of my skeleton file and shows at the bottom of every file. I've tried putting it in my file itself and it didn't work.
My HTML looks like this:
#if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
href="#modal1"> Create</a>
#endif
at the bottom of the blade file:
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
My modal appears on screen, but it's automatically "shown" and when I click the open button it doesn't do anything. I'm just using the demo modal, I'll customize it when I can get it to work, thanks.
Here you go with a solution
For opening a modal please use the below code
$('.modal').modal('show');
For closing a modal please use the below code
$('.modal').modal('hide');
It's opening automatically because of
$(document).ready(function() {
$('.modal').modal();
});
Whenever the doument is ready then it's opens the modal.
On click
#if($auth >= 5) Create
#endif
Open the modal using $('.modal').modal('show');
Ok, first up, why two href's on the modal trigger?
#if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
href="#modal1"> Create</a>
#endif
Take one off, and let's take it from there.
The answer above incorrectly states that the init below opens the modal:
$(document).ready(function() {
$('.modal').modal();
});
This is just the initialisation, it plugs into the JS to allow it to work.
<!-- this is the initialisation -->
$('.modal').modal();
<!-- this is instruction to open -->
$('.modal').modal('open');
Check the pen here for the two commands, comment each out to see what happens.
Modals are closed by default, and are triggered by clicking the .modal-trigger or using the open command above..
I was being stupid, I had bootstrap js linked for some reason and they were conflicting. Sorry to waste anyone's time.
In my application,I use Polymer.The application is made up with the left part and the right part. there is a button in the right part,when the button is clicked,the paper-dialog will appear on the right part.But I want it on in the whole page.How do I do?
the code is blow...
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<paper-dialog id="allActAddModal" style="width:80%;max-height:90%;margin-top:-2.5%" with-backdrop>
<act-create-all id="actAdd" on-save-ok="handleSaveOkTapped">
</act-create-all>
</paper-dialog>
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red" on-click="handleAddAct">
<i class="large mdi-content-add"></i>
</a>
</div>
handleAddAct: function(event) {
this.$.allActAddModal.toggle();
}
In Polymer neon-animataion exist demo when grid transform to half page. You can use this example to resolve your task.
Foe help you in bower write next
"neon-elements": "PolymerElements/neon-elements#master",
"web-animations-js": "web-animations/web-animations-js#2.0.0"
And in bower_components/neon-animation/demo/grid you can find what you need.
P.S
"web-animations-js": "web-animations/web-animations-js#2.0.0" need to resolve bug in Google Chrome when animation don't work
EDIT
Fiddle of that problem: https://jsfiddle.net/9k449qs2/ - debug the fiddle and try to select the header with your picker. You will not be able to do so, it will select you the whole page every time you click.
I'm just working on a project which has a persistent header and footer. Just the content changes by clicking through the application. Now i wanted to add a backbutton into the header which i did with:
<header id="headerMain" data-position="fixed" data-role="header">
<a href="#" data-rel="back">
<div class="backButton">GO BACK</div>
</a>
</header>
The rest of my code directly after the header looks like this:
<div data-role="page" id="pageMain">
<div class="content gray">
adfjsöalfjasödf
</div>
</div><!-- pageMain end -->
<footer id="footerMain" data-position="fixed" data-role="footer">
Footer
</footer>
<div data-role="page" id="checkConnection">
<div class="content gray">
<button id="checkConnectionState" class="button" onclick="CTFNetworkState()">Check your Connection</button>
<a href="#checkBattery">
<button id="checkBatteryState" class="button">Check your Battery</button>
</a>
</div>
</div> <!-- checkConnection end -->
<div data-role="page" id="checkBattery">
<div class="content gray">
<p>Just plug your device and you'll get information about your battery state.</p>
</div>
</div> <!-- checkBattery end -->
So all works fine, the transitions and so on. But i can't get the backbutton work. He is not clickable. The headers on each page are not clickable in any form. If i debug that with gapDebug and i click onto the header, GapDebug marks the Pagecontainer and not the header.
So, how can i make the backbutton inside the header clickable on each page?
EDIT
So the header doesn't care what kind of button i place inside it. No matter what button i choose, or what attribute i add to my <a></a> it is not clickable.
So i tried to run GapDebug again, pressing the "Inspect" Button and than clicked on my backbutton, it selects me the code from the page which is wrong.
So i found the solution. The problem was, that not the documentation for persistent toolbars helped me, instead the documentation for external toolbars did it then.
Simply add
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
inside your <script></script> tag and all works fine. This happens Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.
I created a navigation bar using ionic-nav-bar. Added an h1 element with class title. But it's not displaying anything.
Here's my code
<ion-pane>
<ion-nav-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-nav-bar>
<ion-content>
</ion-content>
</ion-pane>
However, this is working:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
So what am i doing wrong?
<ion-nav-bar class="bar-positive">
<ion-nav-title>hello</ion-nav-title>
</ion-nav-bar>
This Will solve your problem.
That would be the html file of your view:
<ion-view title='My Title' class="dashboard">
<ion-content>
</ion-content>
</ion-view>
In your case you should wrap all that in an other ion-nav-view-element, because you are using the
ion-nav-bar-element.
The ion-nav-bar will be your navigation bar and you will have ion-views that will be plugged into the ion-content section. You would never want one title if you have a nav bar because the title should change as you navigate across ion-views. When you create you ion-view tag add a view-title attribute. Then when that view is active it will automatically update the header no h1 tag required.
The ion-header approach works because ion-header is designed to be a static and not dynamically update like a navigation header would.
The fact is that your
<h1>Test</h1>
tag is displayed but it is placed behind your <ion-nav-bar></ion-nav-bar>. As Anand suggested in answer above you should use <ion-nav-title>Test</ion-nav-title> to get expected result.
Hope this helps.
I'm trying to add a BootStrap modal to an already-existing page and I'm running into the following problem:
The modal displays exactly as I would expect it to, content in place looking quite beautiful but I have two problems. If I specify only class="modal" the modal displays by default when the page loads and will not close. If I include class="modal hide" then the modal does not display at page load but also doesn't close when the appropriate buttons are clicked.
I'm not making any big departures from the modals sample code on the Bootstrap site, any ideas what's going wrong?
Here's the button that's supposed to launch the modal:
<a class="btn" data-toggle="modal" href="#testmodal" >About</a>
And here's the modal itself:
<div class="modal hide fade in" id="testmodal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>body</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
And for the record, yes I did remember to include bootstrap-modal.js and bootstrap-transition.js
Glad your problem is resolved.
Also if you want the default bootstrap functionality without customizing anything just use the big download button on the main page. This zip file contains a default bootstrap.min.js file that includes all the plugins (like the modal dialogs etc). If you use that one instead of all the seperate javascript files your page has to make less requests and load faster.
your close link should be like this:
<a class="close" data-dismiss="modal">×</a>
since, data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window.