Angular material form input box styling not displaying properly - angularjs

I came accross a form wizard by Afrad on github material-wizard and will like to implement it because of its angular-material properties. The downside is that the text-boxes turn out totally different from the angular styling. Is there a way to fix this? what causes this and how do you go about the fix. I have tried using ngWizard as well and face the same issue. the forms display okay without being encapsulated in the wizard directive.
A link to a plunker showing the demo is on the github page. Attached below is a snapshot of the plunker.

Related

`md-center-tabs` attribute of `md-tabs` in AngularJS Material 1.1.7 not working properly on mobile

Is anyone else having an issue with the md-center-tabs attribute for md-tabs in AngularJS Material 1.1.7?
We recently upgraded from AngularJS Material 1.1.3, which is when I observed it to be working as intended and stated in the documentation. We upgraded in order to take advantage of the upgraded md-datepicker directive in Angular JS Material 1.1.7. Anyway, here is the documentation that I am referencing for md-tabs:
https://material.angularjs.org/latest/api/directive/mdTabs
On mobile screen sizes (i.e. smaller viewports) the tabs end up getting scrunched up as show below:
I have tried to use md-stretch-tabs to "offset/counter" this issue; however, that does not seem to solve the problem. We had not used md-stretch-tabs when coding in AngularJS Material 1.1.3 and presumably md-center-tabs was automatically stretching each individual tab to be equal to the viewport size on smaller screen sizes, where users could scroll through all md-tabs as shown below:
I've searched the web endlessly hoping that someone might be having the same issue here or on Github, but cannot find anything. Hopefully, it's such a small nit that someone can help me figure out an easy workaround.

How to implement dynamic ons-tab with ons-lazy repeat

Onsen UI: v2.0.1
AngularJS: 1.5.9
I am building an Android and IOS application that requires dynamic tabs (ons-tab) like in native applications. The content in each tabs can be up to a hundred items. So I want to use ons-lazy-repeat for the ons-tab content to minimize memory consumptions. How do I go about achieving this (dynamic tabs and ons-lazy-repeat ) with Onsen UI. I have searched online and I couldn’t see any solution.
Thank you!
The ons-lazy-repeat component is described in detail in the documentation.
Dynamic tabs can easily be achieved by using the ng-repeat clause of AngularJS. If you don't want to load the content of each tab right at the beginning, you have multiple options like ng-if or ng-include to make sure that only the content of the current visible tab is loaded. You may access and check the visibility of the $index variable that is available in the ng-repeats scope to do so.
See this post how this may be done. Onsen offers a tabbar and tab components which will work the same way as the tab div's in the questions answer.

AngularJS - Carousel mouse click and phone touch

I am using Angular-UI-Bootstrap. in they github they have allot of examples, one is about carousel and it's really cool on they site. All over the internet i have tried like 50+ examples an none of them worked out. What i need it's simple clicking and moving items inside carousel, without click on sides. I have seen things about animation, i am not using that, maybe angular-ui-bootstrap using it, i am not sure. Any one have found solution for this problem?

Getting Started with AngularJS and Material Design

I am trying to play around with the Material Design stuff for AngularJS. The Project can be seen here. I'm trying to do a basic project. This has led me to two questions about material design.
How do I use an icon for a button? I ran git submodule update --init per the docs. I have the icons directory. However, I do not understand how to actually use a button. For instance, I want to use the refresh icon (/icons/system_icons/av/res/2x_web/ic_loop_24dp.png), so I'm trying the following:
However, the icon is off-center. How should I fix this?
How do I setup navigation up in the app?
Thank you!

Looking for comparable tooltip capability for AngularJS that cluetip gave me

I've gotten the code from the post Angular-ui tooltip with HTML working but it's capabilities are not near what cluetip gave me. Things like not having automatically aligning based on screen position and other options make it not very useful for me. You can see the capability I'm wanting with Angular when you hover over the details buttons on the page http://www.siliconvalley-codecamp.com/session
Is there anything comparable to cluetip in the angular world? has anyone done an integration with angular and cluetip?
you could mod a popover element from http://angular-ui.github.io/bootstrap/ with css to do the same

Resources