I am building Android application using Angularjs, Angular material and Cordova.
Can somebody help on below issues. Can someone suggest tips/tricks to improve/fix below points?
Issue ~1:
Animations are very very slow on android device. Mainly ripple effects/animations given to md-button are slow. See below Html .
Code:
<div>
<md-content>
<md-list>
<md-item ng-repeat="item in tags">
<md-item-content>
<md-button class="md-grid-item-content tile"
aria-label="{{item.name}}"
ui-sref="crop({cropId: item.id})">
<div class="md-tile-center">
<img ng-src="{{item.imageSource}}" class="face" alt="{{item.name}}" height="64" width="64">
</div>
</md-button>
<div class="md-tile-content">
<h3>{{item.name}}</h3>
<h4>{{item.text}}</h4>
</div>
</md-item-content>
</md-item>
</md-list>
</md-content>
</div>
Issue ~2:
Multiple click on md-button makes application not responding. Does not give intuition of which button is active or focus.
Issue ~3:
I observed that with Crome browser on Laptop, there are few problems for demo site also (https://material.angularjs.org), md-button icons are not visible. However same works in firefox. May be md-icon has changed in new build?
See : Git issue 1177
Related
Wondering if someone can lend me a hand here:
<div class="caption red_box noshadow lfl stl" importance="high"
data-x="0"
data-y="225"
data-easing="easeOutExpo" data-start="2200" data-speed="400" data-eosing="easeInSine">
CHECK COVERAGE
</div>
This button when clicked/tapped on mobile doesn't work, you can test the live button by visiting this site: http://tech5.co.za/ and checking the sliders, none of the button work when viewing on mobile but are fine when using laptop/PC
I've tried setting priorities and setting "ontap" instead of onclick.
Any ideas from anyone? Highly appreciated
I'm using Adapt Learning to create responsive E-Learning courses. I downloaded the course code (HTML5, less, CSS, JavaScript) and wrapped it into a mobile application by using PhoneGap Build (cli 6.5.0). Now I want to open the attached PDF-Files. The code is generated and I don't want to change it cause its more efficiency for upcoming projects. I have already created my config.xml in which I tried this:
<feature name="http://api.phonegap.com/1.0/file"/>
Generated Code:
<button class="base resources-item-open drawer-item-open" data-href="course/en/assets/bec3d79837937eab7f5937b3beb9d66bb0b89943.PDF" tabindex="0" role="button" aria-label="Documents. . Training Solutions. ">
<div class="drawer-item-title">
<div class="drawer-item-title-inner h5">Training Solutions</div>
</div>
<div class="drawer-item-description">
<div class="drawer-item-description-inner"></div>
</div>
</button>
I need a solution which works for both iOS and Android.
I think you will get a faster answer here: https://community.adaptlearning.org/mod/forum/view.php?id=4
First of all, I do not know if the Question title is appropriate, but I could not think of anything else out of my mind. Do suggest an edit, if you have a better one. Thank you.
I am working on a web page that uses both the Angular Material and the LumX libraries. Everything else works well on all browser, but this specific snippet of code does not run properly on Safari browsers (both iPhone and Mac) when in small screen mode.
<md-content flex layout="column">
<form layout-padding name="newSuperuserForm" flex>
<span flex layout="column">
<span flex layout="row" layout-sm="column" layout-xs="column">
<span flex="50" flex-sm="100" flex-xs="100" layout="column">
<lx-button lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button>
<span flex class="ph-padding-bottom-20"></span>
<lx-button lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button>
</span>
</span>
</span>
</form>
</md-content>
I have omitted the rest of the code that works. Only this snippet renders blank on a Safari browser, while on other browsers (Firefox on Mac, Chrome on Windows, Android browser) it works just fine.
Specifically, if anything goes within the div:
<span flex="50" flex-sm="100" flex-xs="100" layout="column"> ... </div>
Safari is able to render it, for example, if I put some text in it, everything works just fine. But it is not able to render the LumX buttons when the screen is small.
This screenshot shows how the code is rendered in Safari (left) and Firefox (right) when the screen size is small.
The Safari Web Inspector shows that the button elements are there.
I am really novice in front-end development. Any idea what is going on here? It'd really help me complete my project.
Thank You.
I don't know the exact issue without a working code snippet. But the correct use of flex and layout will be
<span flex layout="column">
<span flex layout="column" layout-gt-sm="row">
<span flex="100" flex-gt-sm="50" layout="column">
<lx-button flex lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button>
<span flex class="ph-padding-bottom-20"></span>
<lx-button flex lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button>
</span>
</span>
How can I design a nav-bar styled like the one Google+ has using
angular material ?
I don't know how to get this nav bar, and with the search box styled this way,
it thought material design made by google was used for this, but i can't see such things in angular material implementation.
I wanted to make a style similar to G+ for an app, coz it's very nice and suitable for that one.
Here you go!
It´s not exactly as the design but it´s a good starting point for you..
http://codepen.io/mackelito/pen/VKxGmR
Note: it´s just placeholders so no functionality yet.. have fun! :)
for the icons I have added
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
in the head tag
First of all, angular material provides no way to put in an input in that specific style. It implements the material spec; as it turns out, even google does not completely follow it. The navbar present on google+ other various google apps is not in the spec. This
<md-toolbar ng-show="!showSearch">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
<ng-md-icon icon="menu"></ng-md-icon>
</md-button>
<h3>
Dashboard
</h3>
<span flex></span>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
<md-tabs md-stretch-tabs class="md-primary" md-selected="data.selectedIndex">
<md-tab id="tab1" aria-controls="tab1-content">
Latest
</md-tab>
<md-tab id="tab2" aria-controls="tab2-content">
Favorites
</md-tab>
</md-tabs>
</md-toolbar>
is a great example of a material toolbar.
Also keep in mind that the input has no special integration with the toolbar, so you might have some problems.
I am developing a cordova application with onsen ui.
I already found some problems that occur only on windows phone (i assume that this is the case because wp is not supported for such a long time)
. But there is 1 problem that i really need to fix.It seems that the ons-toolbar element is not fixed to the top in windows phone. If i scroll down, the toolbar also moves with the content. This doesn't happen on android.
Thats how i build up my page (the following code is inside an ons-sliding-menu):
<ons-page ng-controller="findUsersController">
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="fa-bars">
</ons-toolbar-button>
</div>
<!--<div class="left"><ons-back-button ons-if-platform="ios">Back</ons-back-button></div>-->
<div class="center"><h3 style="display:inline;">Connect<span style="color:cornflowerblue;">Us</span></h3></div>
</ons-toolbar>
<ons-pull-hook ng-action="findUsers($done)" var="loader">
<span ng-switch="loader.getCurrentState()">
<span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
<span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
<span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
</span>
</ons-pull-hook>
<ons-list>
<ons-list-item ng-show="users.length === 0">
<div class="info">
Pull down to refresh
</div>
</ons-list-item>
<ons-list-item class="item" ng-repeat="user in users">
<ons-row>
<ons-col width="80px">
<img ng-src="http://lorempixel.com/60/60/?{{user.rand}}" class="item-thum" />
</ons-col>
<ons-col>
<p class="item-desc">{{ user.username }}</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
Initially everything shows up correct, but when i pull down to refresh, the toolbar moves down as well and the ons-pull-hook doesn't react. How can this be? i mean the toolbar is in no scrollable element.
Is there anyone who has an idea how to fix this problem?