I am creating a web app using angular and Material, I want to be able to drag, drop and resize my sections. I have seen many plugins, e.g. angular-gridster and gridstack-angular but did not get right solution.
Related
I'm using the Ionic Framework to build a hybrid app and its heavily dependant on drag and drop features. Using the 'sidemenu' template I have created one main view, and two side menus.
The main view will use the Ionic Calendar to display data. The two side menus will be used as views where data will initial be stored in list form. I need to be able to drag elements from side menu and into the main screen, where they can then be dropped on the calendar.
All the events work perfect when in calendar view (ie. onClickItem, onClickTime, etc). The drag and drop call backs work fine too, when remaining in the side menu display area. However, when I try to drag the element out of the side menu area and into the calendar, only the onDragStop event is recognized and not the onClickTime event from the calendar.
I realize I'm trying to fuse a few things together here in a not so usual way. I can't even find anyone else making posts about the same thing. Maybe I'm making the wrong searches.
Any help, advice, or direction would be appreciated.
I'm using angularJs 1.3 with Angular Material Design 0.8.3 and I have a page that has a toolbar on the top <md-toolbar class="md-whiteframe-glow-z2 md-default-theme"> where I'm trying to put some icons dynamically. The page has some crud's and each crud has it own controller. The case is, each crud must have it specific icons at the toolbar, I'm trying to specify it through the controllers but I have no idea how can I write this cuz each icon should have it owns properties (the href link, the action function etc). Someone know if its possible to apply this idea (control the icons that will appears in the screen per crud via controllers)?
I am using Angularjs and bootstrap for my application. I have multiple sections in my page and each sections has multiple columns. I have used bootstrap grid to show the list of items for tablet and desktops ranges and used "row" for each of my sections and then col- class. Due to default bootstrap grid css, it shows one column display at mobile breakpoints for each sections.
However we want only at mobile breakpoint it should display work as accordion control.
I don't want to use css to hide the markup for tablets and desktop and show mobile markup for accordion. I want to use same markup for all of my breakpoints.
I have gone through the bootstrap accordion control also angular-ui project accordion control, however both require new HTML markup.
How can I use same bootstrap grid based markup to show accordion control at mobile breakpoints. Please also note; I tried to use ":target" css properties however it doesn't seems working fine with angular.
Please also note; I am using single page application and HTML5(true) router.
Please advice.
I was looking and found blog by Mary Lou which seems good solution to implement accordion using css only.
Accordion using CSS Only
I'm building this website using bootstrap.
The problem is that i have nested drop downs. The dropdowns look nice and not cluttered in desktop version.
However this is how it looks in mobile:
They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.
I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.
Question:
I'm really not experienced in developing UI. Is my approach sufficient?
How should i solve this problem?
I use a sweet JS plugin that plays nicely with Bootstrap, called Snap.js. If you've ever used the Facebook iOS app, you'll be familiar with this layout. There are some great demos here.
I am working on silverlight 4 application and need to implement google maps in the same app.
Now to implement the google maps, i was planning to use WebBrowser control but when i used it i found out that it will run only in out of browser mode.
So, i decided to use another approach since i want to implement google maps inside of my application. I then used http://csharperimage.jeremylikness.com/2010/09/hosting-html-in-silverlight-not-out-of.html alternative which was having to use iframe to show web page there. It was seems to be good alternative in start. But Here comes another twist.
On top of my app, i have one top MENU for navigation, its a classic web menu, user hover over the menu item and its sub item will expand vertically.
Now just underneath the MENU i have above HTML control to display my map. Now since the HTML browser control has higher z-Index so my vertical sub menu is goes underneath the google map and hence it not visible.
And giving silverlight app higher z-Index the iframe for HTML does not show up as it goes behind the app.
So how can i get my HTML MAP and MENU both to work? If you guys have any other alternative to implement google maps then please let me know
Thanks
I would recommend using the Silverlight Bing Maps control, with the tile-source set to Google Maps. This will give you the maps you desire, via a proper Silverlight control. You can find out about how to provide a custom tile source from Google here:
http://www.scottlogic.co.uk/blog/colin/2011/02/google-sky-on-windows-phone-7/