I have an application with multiple Angular Material dialogues opened at the same time with a drag and drop feature. What I want is when I click a modal it should be placed in front, is there a way to do that using Angular Material or at least a CSS trick.
Thank you
Related
We have created a cordova App using angular JS, and in the app we have desabled the Apple webview copy/share/define menu from our view code in Xcode. This works as intended, since we don't want the menu to popup.
The angular JS code is also hosted on a website, where desktops can access it, but here the Copy/share/define menu is shown.
I have tried numerous things I found on Stackoverflow and other website, most of them give the following css tag:
-webkit-user-select: none;
This competly desabled selection, we just want the copy/define/share menu gone, is this possible, ore is this something that has yet to be implemented.
You can put ng-hide="true" attribute on the menu so that it will be hidden on the view.
When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.
When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.
However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.
Thanks
There's a good reason for this.
As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.
Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.
If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.
I'm a newbie with jquery mobile but I want to build a vertical navigation panel with its specific animation (no page changing).
A good example is here ( i don't want sencha touch, i need to do this with jquery mobile): http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
For example, if you select "User Interface", just the menu is updating (and a button back appear...)
Another good example is IOs, as the dropbox Ipad application (cf http://www.youtube.com/watch?v=qeqw5OroHzY)
How I can do that with jquery mobile ? I see panels, the 1.3 new feature, but it's not really the same thing ...
Thanks for your help
Try this: jQueryUI's .menu
Other than that, it's just a fancy <aside>
I'm using multiple jquery ui widgets for my project and as the project has progressed I've just added what I've needed to the bottom of the list but now I get some errors. In this question is saying some widgets inherit properties/functions from others so what is best order to arrange the script tags for all the widgets to work properly without errors?
Here are jquery files I'm using in the order they are in the HTML
jquery.1.7.2.min.js
jquery.ui.core.min.js
jquery.ui.widget.min.js
jquery.ui.position.min.js
jquery.effects.core.min.js
jquery.ui.tooltip.min.js
jquery.ui.dialog.min.js
jquery.ui.datepicker.min.js
jquery.ui.tabs.min.js
jquery.ui.selectable.min.js
jquery.ui.autocomplete.min.js
jquery.ui.menu.min.js
jquery.ui.button.min.js
jquery.ui.draggable.min.js
jquery.ui.mouse.min.js
jquery.ui.resizable.min.js
Thanks
Looking through the compiled UI file is looks like it might be this:
UI Core
Widget
Mouse
Draggable
Droppable
Resizeable
Selectable
Sortable
Effects Core
All effects included alphabetically
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Menubar
Popup
Positon
Progress bar
Slider
Spinner
Tabs
Tooltip
Please specify what widgets are you trying to use. You should always import jquery first, and then look at the widget dependencies.
You can also "build your own jquery" here and any required dependencies will automatically be checked automatically.
SO I have a select box that I fill dynamically. I discovered that once the SELECT gets longer than the page, it automatically becomes a dialog listview.... which is TERRIBLE!
When this happens, the page refreshes when the dialog is closed and my whole page starts over....
Has anyone experienced that and do you know how to shut it off?
Thanks!
Todd
You could use the native look and feel?
http://jquerymobile.com/demos/1.0.1/docs/forms/forms-all-native.html
Native form elements & buttons Although the framework automatically enhances form elements and buttons into touch input
optimized controls to streamline development, it's easy to tell jQuery
Mobile to leave these elements alone so the standard, native control
can be used instead.
Adding the data-role="none" attribute to any form or button element
tells the framework to not apply any enhanced styles or scripting. The
examples below all have this attribute in place to demonstrate the
effect. You may need to write custom styles to lay out your form
controls because we try to leave all the default styling intact.