Discussion on Altair - Admin Material Design UIkit Template

Discussion on Altair - Admin Material Design UIkit Template

By
Cart 3,301 sales
Well Documented

tzd supports this item

Supported

This author's response time can be up to 2 business days.

670 comments found.

Hi again
1- your theme scores B(88) in “Leverage browser caching” on GtMetrix that is very good, is this about your template or is about server/host configuration? i mean if we use altair then does this option appears on our site too?
2- (html/rtl) : in iphone mobile the right top menu icon works with delay and it seems we should click many times to open main menu, did u have any same experience or solution about this?
thank you

OK, and (for future look) do u think any plan to upgrade altair to uikit V3 if/after uikit v3 stable version released? :) thx

Hi, for now I don’t have plans to upgrade Altair to UIKit v3. I have it on my todo list but I’m not sure if I do this.

Thank you again

does it support angular 4?

Hi, there is no angular 2/4 version and I don’t have plans for upgrade in near future. Sorry.

Hi Tomek,

On the page_user_profile.html how could I add a background image to cover the .user_heading and perhaps highlight the heading and sub-heading as per a uk-figure figcaption in case the image obscures the text?

Trying to make a facebook style profile where the user can set a cover image.

Thanks as always for your great support.

Hi, sorry for the delay.
You can add this image as a background to .user_heading div ‘style’ attribute and set style in css
<div class="user_heading" style="background: url('assets/img/gallery/Image02.jpg');">

.user_heading {
    ...
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

I think I'll add this feature to my todo list and I'll add it to Altair asap.</div>

Thanks as always TZD!

Hello, I would like to ask on how to display a notification in Angular during the page is loaded. I managed to display it in the HTML version since you have this function “showNotify($element)”.

Do you that also in AngularJS?

Thanks

Hi, there is no function like HTML showNotify($element) to show notification in Angular but you can trigger click event on page load on notification element like this
// in view
<button id="notification" class="md-btn" message="Top Right" position="top-right" uk-notification>Top Right</button>
// in controller
$timeout(function() {
  angular.element("#notification").trigger("click");
}, 200);
// or you can use native uikit function
$timeout(function() {
 UIkit.notify({
    message: 'Bazinga!',
    status: 'primary',
    timeout: 5000,
    pos: 'top-center'
 });
}, 200);
please check https://getuikit.com/v2/docs/notify.html#usage

How I update data on index.html Orders Completed data, and redraw block to show this. What variable I must change and what function to update this I must run?

64/100 Orders Completed

0<noscript>64</noscript> %

Hi, if you want to change this value you need to update this text like this
// html
<span class="countUpMe" id="order_data">64</span>/100 Orders Completed
// js
var $target = $('#order_data'),
     countTo = updated_data_value; // new value eg. 88
theAnimation = new CountUp(target, 0, countTo, 0, 2);
theAnimation.start();

I try using theme with vue.js component. Please help me with my quastion. I try insert “ <form class=”uk-form uk-autocomplete” data-uk-autocomplete=”{source:’data/search_data.json’}”> <input type=”text” class=”header_main_search_input” /> <button class=”header_main_search_btn uk-button-link”></button> <script type=”text/autocomplete”>

    {{~items}}
  • {{ $item.value }}
    {{{ $item.text }}}
  • {{/items}}
</script> </form> “

into component, but I don’t know make this. With html code not problem. In this case code contain <script …..

Please !!!!! Make sample for using you theme with vue.js components (only one page). Thank you.

Please !!!!! Make example for using you theme with vue.js components (only one page). Thank you.

Hi, there is no vue.js version of Altair template and it’s not that simple to add just one example page because it would require to rewrite whole template to use vue.js. Like I said before, at the moment I don’t have plans for vue.js version. You can use HTML version and you can build vue.js app using this HTML version. I see that there is vue.js version of uikit framework https://github.com/vuikit/vuikit, please check it, maybe it will help you.

Hi, I am having difficulty with the value for the switchery in which it returns “on” or none/empty in AngularJS. how can we make the switchery value only ‘0’ or ‘1’ (or TRUE or FALSE?

Thanks

Hi, if you want to get true/false you can use this code
// html (in view)
<input type="checkbox" class="switchery switchery-large" ui-switch ng-model="switches.switch_d" checked id="switch_demo_large" ng-change="switch_change()" />
// js (in controller)
$scope.switch_change = function() {
    console.log($scope.switches.switch_d);
    // or
    console.log(angular.element('#switch_demo_large')[0].checked);
    // or 
    console.log(angular.element('#switch_demo_large').prop('checked'));
};

can i use this template with windows asp web forms??

Hi, I’m not familiar with windows asp web forms but it seems that it’s possible to use html/css/js, please check https://msdn.microsoft.com/en-us/magazine/jj129609.aspx

hello.., update?

hi. new update?

hi, update will be ready in less than 24h

okay thanks

Hi, Great Theme
1- i realy loved your theme, But i dont know uikit :( , is there any bootstrap version? or planing for bootstrap?
2- is uikit easy to work with?
thx

Hi, thank you.
1. There is no bootstrap version and I don’t have plans to release bootstrap version.
2. In my opinion UIKit is very easy to work with, there are quite good documentation, please check https://getuikit.com/v2/docs/documentation_get-started.html
3. PHP files are used in /src directory (this PHP files and gulp tasks are used to build /dist) you don’t need to use this version. There is a /dist directory that you can use.
4.I think that this is possible, eg. you can use http://github.hubspot.com/pace/docs/welcome/ or https://tympanus.net/Development/PageLoadingEffects/ to add page loading effect.

Thank you for answers
5- is your AltAir and Globaly Uikit Framework under Development and Updating Like BootStrap?
6- is there any TagsInput sample in rtl version demo site?

Hi, yes, Altair and UIkit are updatied quite often, you can check uikit v2 repo here https://github.com/uikit/uikit/tree/v2/develop.
About tags input please check “Advanced Selects” here http://altair_html_rtl.tzdthemes.com/forms_advanced.html

Hi Tomek,

I really like the way the Material Design button for editing appears on the User Profile example ( http://altair_html.tzdthemes.com/page_user_profile.html ) and I was wondering what your best advice would be for achieving a similar button & position on the Notes examples ( http://altair_html.tzdthemes.com/page_notes.html ) would be?

I find a FAB gets lost at the bottom right on large screens and the save icon here isn’t consistent with the aforementioned MD button appearance.

Can a MD button float on a double header layout such as this for consistency?

Thanks

Thanks as always for the great support. What else is due in the next update so I can decide whether to wait? :-D

I have few things that I want to add in next release like: CRUD table (angular), new pricing tables, xeditable, payment page, popover for calendar events and few other things.

Thanks, your support it much appreciated, don’t forget the mini chat improvements and possibly a Facebook style uploader. ;-)

Hi

If you like to partnership in React version and/or Angular 4 version please contact me via welsonplayqs@gmail.com

Thanks

Hi, sorry for the delay. At the moment I’m not interested in partnership in other versions of Altair Admin.

Hi, I am using swithces in a form and I want when user clicks on the switch to update a hidden field with a value. How I can do that?

hi, thank you.

One more thing. Is there a way to make another theme the default without using the switcher? and how can I create a new theme?

I am working on the scrumboard now and I noticed that the scrum collumns don’t have the same size (like this http://altair_html.tzdthemes.com/page_scrum_board.html) and when a column gets empty I cannot move anything to it.

Hi, about the themes, please check ‘Themes’ section in documentation
About the scrum board it’s hard to tell what’s wrong with your code without seeing it, are you using the latest version of Altair template (v 2.11.0)?

Hi Tomek, when a boxed layout is used is it possible for the top menu example to keep the menu items full width?

Hi, yes, it’s possible, add this rule at the bottom of your stylesheet:
@media only screen and (min-width: 1220px) {
  .boxed_layout .md-top-bar {
      max-width: 100%;
  }
}

Thanks for your quick reply!

hello.., update?

Hi, I need to move next update to July (probably second week), sorry.

okay

Just wanted to report a bug. In the top-menu layout (http://altair_html.tzdthemes.com/layout_top_menu.html) on mobile iPhone5 (or small screens) the notification and the profile widgets are over the menu items instead of being above. So the menu cannot be clicked, it can be clicked only on landscape mode as the screen is bigger.

See here:

https://ibb.co/izB58Q (correct) https://ibb.co/cPEsoQ (wrong)

Hi, thank you for your report. I’ll fix this issue in next update.

Hi Tomek, couldn’t find it in the demo so apologies if it’s there, but do you have an example of swiping a card (on a mobile device) and “closing” it with animation?

Hi, there is no example of swiping a card on a touch devices, sorry.

Can you provide a simple form wizard with validation and colored error on the navigation, I cant seem to get the validation to work on the angular version

Hi, sorry for the delay. There is no sample form wizard with validation but please check this documentation about wizard validation https://github.com/angular-wizard/angular-wizard#wizard-step-validation

Hi, will it be released a version compatible with AngularJS 2 or 4?

Hi, I don’t have plans for Altair version compatible with angular 2/4, sorry.

Thanks for last release 2.11.0. im not able to find a quick way to migrate from 2.10.0 to 2.11.0. is there a migration script/documentation i can use for this?! i did a lot of customization on js and css files in 2.10.0

Hi, I’m afraid that there is no easy way to update from 2.10 to 2.11 if you modified core files. You can use any diff tool (eg. http://www.scootersoftware.com/features.php ) to check for differences and you can merge this differences into your files.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey