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.
Related
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.
Simple problem in fact.
I am displaying some Text using sap.m or sap.ui.commons elements.
I cannot access any of them using the arrows (cursors).
I succeed navigating to input fields, rows in table but not Text.
I looked for any help on the net but without success.
if i grasp the question right, then the desire is to have a click event for sap.m.Text. I.e. a click on a sap.m.Text control triggers a event which leads to a method in the corresponding controller of the view in which the control sits.
sap.m.Text does not feature any click event by standard. instead please use sap.m.Link. sap.m.Link has the press event which is a click event. e.g. in a xml view:
...
<Link
text="clickMe"
press="onClickMethod">
</Link>
...
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>
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.
I have a modal form which loads upon clicking an anchor tag with a specific class.
What I am trying to achieve is to apply a value to a certain text field within the mdoal form when the anchor tag is clicked.
I have this function working to a point with the following, when the anchor tag is clicked the input field with the id="contact-catalogue" is populated with the value set within anchor tag:
<input type="text" id="contact-catalogue" />
<a class="button-left contact" href="#" onclick="document.getElementById('contact-catalogue').value='link2';">Request</a></div>
My problem is that the modal form loads when the anchor tag is clicked and the value set within the anchor tag does not populate the required text field.
My guess is that because the form loads after anchor tag is clicked there is no ID being picked up and that is why the value is not being passed.
Any help would be greatly appreciated....
So I have come up with a solution on how to populate the input field within the Modal form upon the onclick event.
Basically I set a delay on the onclick event which gives the modal window enough time to load. This allows the onclick event to find the ID of the inputfield within the form and populate it with the value that I require:
<a class="button-left contact" onclick="setTimeout(function() {document.getElementById('contact-catalogue').value='AS101'}, 1000);" href="#">Kit Insert Request</a></div>
I hope this helps anyone in a simialr situation in the future.