We are using the ionic framework. We have an html title tag in our parent page's head i.e. <title>our app</title>. This seems to get overwritten in our login page when using <ion-view title="Login"> and it sometimes get's overridden in other pages I can't really figure out why certain ones do get overridden and others don't.
We want the parent's page title to remain the title throughout the entire app. I would take out the ion-view title but it gives our pages headers, which we still want.
I was adding titles like so:
<ion-view title="login">
this was in order to get the title in the top nav bar when I added the titles like this instead I would get the titles in the nav bar without affecting the title of the page.
<ion-view>
<ion-nav-title>Emergency Contacts</ion-nav-title>
...
</ion-view>
Related
So I want to create a modal-like behavior for the search.
When the ion-searchbar is focused, a modal would slide from the bottom showing search history, which would hold the suggestion once the user starts typing. The problem with ionic nodals is the backdrop, I couldn't keep the ion-searchbar active to input search words.
This component is called Popover, you can create them pretty much like you do with a modal but using an PopoverController instead. The PopoverController.create() method has an event parameter that will tell which element will be the anchor for the popover, set that to your search bar and it should be magically aligned.
By default a backdrop is shown when the popover is created but it can be deactivated via showBackdrop property upon creation.
Take a look at the Ionic's Popover API Docs for further information
I ended up by using segments, as below:
<div *ngIf="segment == 'prodSection'">
...
</div>
<div *ngIf="segment == 'searchSection'">
...
</div>
I styled the two divs in a way to be on top of each other and added events to the searchbar like:
<ion-searchbar (ionFocus)="openSearch()" (ionCancel)="retProd()"></ion-searchbar>
And toggeled between the segments with setting the segment variable's value with each event.
I have <router-outlet [routes]="Routes.all"></router-outlet> set in my app component. I have a page with links at the bottom of the page. If a user clicks a link I want them to be taken to the top of the new page.
If I use RouterLink the current scroll position is retained so the user lands in the middle of the new page.
<a [routerLink]="RoutePaths.featurePage.toUrl()">...</a>
If I use a regular HTML link, I get the behavior I want, the user lands at the top of the new page.
...
What I really don't get is how they can respond differently yet compile to the exact same HTML code.
<a class="_ngcontent-zbb-0" href="/feature-page">...</a>
What am I missing here?
I understand regular non-Dart Angular has something called scrollPositionRestoration but it doesn't seem to exist for AngularDart.
The answer is really a hack to return the scroll position by utilizing the
window.scrollTo(x,y) function.
This issue was raised in here in regular angular
Equivalent to autoscroll=true: automatic scroll to top when route changes
remmeber to import dart:html
I have cart icon, which when clicked loads the cart of the user in a Modal. However, any link or HTML form items like input or buttons that are within this modal are unusable. It can never be brought to focus nor clicked. I tried playing with CSS property z-index with no success.
Check site here.
Add any product to cart and then click bag/cart icon on the top right to see the issue.
Changing the pointer-events value in CSS solved the issue. wrapping the content part in an element with class modal-content is also fixing the issue as suggested in comments.
I am working on a project based on Ionic. I have a page consisting of three tabs.
When I switch between the tabs there is a white blank screen appears for a short period of time, but it looks like the whole page is getting refreshed.What I want to achieve is that the tabs should remain as it is. It should not look like tab gets disappears and then appears.only the content should change.
Any help will be appreciated.
you have to use show hide functionality. in your design three tabs are there right. so in your application create one main div and in that div put your three tab and inside your controller buy-default tab1 data show on load tab2 and tab3 div make hide. and if you click on tab2 then hide data tab1 and tab3. you do not change your whole page only data show hide. its faster and all header footer data as it is. and if you have any confusing then tell me.
I have an application which contains generated code for ion-nav-view. When I remove the code, the entire app disappears. I want to get rid of the arrows generated by ion-nav-view. Is there a way to do this without throwing away the entire app? I just want a view without the extra nav buttons.
The answer is that a button bar child element which was an href styled as a button, i.e.
<a href="/page1" class="button">
was being parsed and displayed into the topmost and bottom most region as part of the ion-nav-bar. The solution, in my case was to remove the anchor styled as a button in another part of the app, and the phantom objects at top of page and bottom of page go away.
I'm not sure what that magic logic was supposed to achieve, but I'm not a fan.