Create custom Popup in Ionic App - css

I try to create custom Popup in my Ionic App, I try to modify using Ionic CSS in to full fill my requirement but don't get success. Please help me or suggest me if any third party CSS available which i can edit and full fill my requirement.
Proposed Design

Have a look at ionic ModalController it can be used to create custom popup along with custom template rather customizing Alert Controller. All you have to do is create a normal ionic page using ionic generate page <pageName> then using ModalController inflate the template and present the pop up to user. Read this thread to create full flexed pop up that match up your requirement. This is how you can add animation to models.
constructor(public modalCtrl: ModalController) {
}
let profileModal = this.modalCtrl.create(Profile);
profileModal.present();

Related

How to order ag-Grid and AdapTable menu items

We are using ag-Grid (React version) integrated with AdapTable.
Is there a way to sort or order the context menu so that our custom menu items appear first, followed by the AdapTable ones and then ag-Grid ones after that?
I can see how to choose which menu items should appear and how to stop some from displaying but not how to order the sections.
Do it via the contextMenuOrder property in User Interface Options
You will want
adaptableOptions.userInterfaceOptions = {
columnMenuOrder: ['user', 'adaptable', 'vendor']
};
See: https://docs.adaptabletools.com/docs/adaptable-options/user-interface-options
General menu documentation at: https://docs.adaptabletools.com/docs/user-interface/column-menu#items-order

UISearchDisplayController is no longer supported when linking against this version of iOS

Unable to use Googleplaces SDk, No where I'm using "UISearchDisplayController" in my project. So searched in my project which is showing in GooglePlaces
I'm no where using "GMSAutocompleteTableDataSource", I'm Using "GMSAutocompleteResultsViewController" for getting the places.
When adding a searchBar to UIViewController in Storyboard, the UISearchBarDisplayController will be added. Just click to it add press 'Delete'
I have just removed searchDisplayController used in storyboard viewController.
Search for searchDisplayController and just remove it and it's outlet if created.
I have a search Display Controller in my storyboard, which is not pulling up when i search like this. so search with "searchDisplayController" in each storyBoards. Referred from this post

Can this CSS layout be achieved in IBM portlet?

I am using the IBM portlet development portal, and the current configuration is three columns,like this:
Now I need to add a picture like this (green color):
Can this be achieved? How would I achieve this?
You have to create a layout template and add it to your page in the Type of Page section of Page properties page.

How to install third party component in CQ5

I am new to Adobe CQ5. I have downloaded Google Map components. But i dont know how to make the component to appear in sidekick box.
Please any one suggest the link or the steps to install the third party components.
Thanks in advance.
As #VAr has suggested, you will first have to create a component in CQ. For any component to appear in Sidekick it has to have either have a dialog or a cq:EditConfig type of node and name of cq:editConfig, do mention a component group while you create a component.
Once you have this configuration ready, you will have to edit the jsp of component.
Now, go to design mode using sideKick and find the component group in which you set while creating the component. Click on the checkbox next to the component you created and component will appear in sidekick.
You will find the component either in Other group or in the component group. If you find the component in Other group that means that the component group in which you placed your component does not contain at least 5 (don't remember exactly) components.
Hope that answered your query.
Following are the steps i have followed to embed the googleMap component.
Create a component:
Create a dialog:
go to the URL
http://www.embedgooglemap.com/
Generate the code with CreateMap
Copy and paste the code in to the newly created component JSP.
Make sure that if any component Group (if you have) is enabled in the Design Mode.
Drag and drop the component into the page from sidekick.

AJAX'y image pop-ups in Plone 4

Pipbox says it's "Plone 4 compatible way to do AJAX pop-ups in Plone 3".
http://plone.org/products/pipbox
Then, what's the proper way of doing jQuery Tools image pop-ups in Plone 4?
Scan HTML for images using selector
Install click handler
On click open the image in pop-up, using one of predefined sizes from plone.app.imaging
All pipbox really does is load plone.app.jquerytools support in Plone 3. In Plone 4, plone.app.jquerytools is built in.
plone.app.jquerytools loads jQuery Tools and some Plone-specific support for easy AJAX popups. That support allows you to associate AJAX popups with jQuery-selectable page components. See the PYPI page for full documentation.
A quick example: let's say that you want to set up lightbox-style popups for images in the content area using the preview-scale supplied by plone.app.imaging. JS to do this is:
jQuery( function($) {
$('img.image-right, img.image-left, img.image-inline')
.prepOverlay({
subtype: 'image',
urlmatch: '/image_.+$',
urlreplace: '/image_preview'
});
});
You would load this code by registering a javascript resource as a skin or browser layer, then add it to the portal_javascripts js resources.
The code:
Sets up a function to load when the page is ready, with "jQuery" aliased to "$";
Selects all image items in the page that use the styles used by the visual editor;
Calls the prepOverlay routine (from plone.app.jquerytools) to associate them with overlays;
Specifies that the overlays will be images, which means that size information may be determined from the loaded image;
Does a little regular expression matching and replacing to pick up the image URL and convert it to a preview.

Resources