eberlitz / material-steppers Goto Github PK

when the content section of a step is long it runs off the page and thus pushes the md-step-actions off the page, requiring the user to scroll to get to them. Is there a way in css to ensure that the content only stretches to the size available and also accounting for the md-step-actions space requirements?

thanks

A method to retrieve the current step will be useful.
For exemple, if you want to have a stepper inside a md-dialog and be able to manage by yourself the action buttons in a md-dialog-actions

Hi,

I try to put an input inside a stepper, but I can't link the ng-model in my controller. And you don't seem to link it to somethng in the demo. Does it work? And if yes, how do we access it?

Thxs!

When I switch between steps, there is a flicker and also the content from the previous step appears for a brief moment in the new step. Is there any way to avoid this and also is there a way to bring transition on switching between the steps? And the issue is more obvious in IE.

To set an step as optional we have to add md-optional="any text" to the step directive. It make difficult making steps dynamically. I suggest to define optional steps as follow:

<md-step md-optional="{expression}" md-optional-text="Optional">

By this pattern we could dynamically define steps as optional. If expression is true step is optional and text could be show for it.

It would be useful if you can bind md-selected-property, similar to md-tabs. This would make the goto-method irrelevant and the user would not have to track by themselves on which step they currently are, because they can bind the index to md-selected

Not aligned (like in chrome) and has an extra line after last step

i am trying to use your usefull component but i have a problem. My steps are dynamically created with ng-repeat. After this section i have a fix step (the confirm step). The problem is that the confirm step is rendered as the first step instead of the last step...

Could you help me ?

Sorry for my english :)
Best regards

It would be useful, if you could add a feature, which animates the step-body content height. Similar to angular-materials md-tabs dynamic height feature. At the moment the stepper comes over kinda ruff, especially inside a md-dialog. I think with the dynamic height feature, it will look a lot smoother.

I guess it is related to versions of libraries, please confirm or tell me what i'm doing wrong:
Angular: 1.6.4
Angular Material: 1.1.4

I just copied your HTML demo and in the JS file:
const steppers = $mdStepper('demo-stepper');

Console error:
No instance found for handle demo-stepper

When printing out "steppers" it returns null.

Can you please mention minimum / maximum dependencies versions?
Thanks!

As seen in the image bellow I can't click on the modal buttons because of the feedback message overlay.

Using npm:[email protected].

Not rendering steps after the 2nd in IE11, if 2nd has a custom html tag e.g. '<custom-control-tag/>'
For eg.
<md-stepper id="stepper-wizard"> <md-step md-label="A"> <md-step-actions> </md-step-actions> </md-step> <md-step md-label="B"> <md-step-actions> <custom-control-tag/> </md-step-actions> </md-step> <md-step md-label="C"> <md-step-actions> </md-step-actions> </md-step> </md-stepper>

The above code would only render Step1 - A & Step2 - B. The Step3 - C could not be rendered.
If custom control tag is removed from B and placed in A or C it will render correctly.

Note: A tag similar to <custom-control-tag/>, which is actually angular component tag is used in my project.

Hi

I tried to use your stepper by downloading the zip file and including the non-minified versions in my page. However, I get this error:

                    var overlay = angular.element("\n                            <div class=\"md-step-body-overlay\"></div>\n                            <div class=\"md-step-body-loading\">\n                                <md-progress-circular md-mode=\"indeterminate\"></md-progress-circular>\n                            </div>\n                        ");

It happens in your js file, line 219 (stack trace => js file line 230).

What might be wrong? I have not changed anything.

Hello guys, i'm trying to see if there is a way to navigate from step to another step using a static attribute like name or Id and not the index of the step because if i add a step all my steps will get there indexes changes, so i must update all of them which is not a good way of programing. is there a way to navigate from a step to another without using indexes but the Id which is a static term.
i want my steps to have always the same id even if i add before or after them a new step. can someone help me with an example ?? thank you guys

Hello.
I discovered a problem with your component.
I have a collection of steps with a binding on your component (<md-step ng-repeat="step in steps"...)
I try to clear my collection ($scope.steps.splice(0, $scope.steps.length) but steps does not disappear :/
Coul you help me please ?

thanks :)

In my scenario, the user should see a step if checks a radio button.
Is this possible?

It is that in linear mode the following steps are disabled , but the tabs do not work when you want to go back.

I am using material-steppers in my project.after the final step is done .i have to make all the steps visible.

Can i use this with angular 4 and bootstrap 3.7+ ?

<md-toolbar flex="none" class="md-whiteframe-1dp" style="background: #f6f6f6 !important; color: #202020 !important;">

This line here prevents us from custom styling. Is there any reason why this approach was taken?

To use the component in a project written with Typescript, I'd like to know if there's a definition file somewhere, here, on DefinitivelyTyped or Typings registry?

Hi,

Congratulations for the great work.
Just want to suggest to include a minimum version of angular in READ.ME to avoid problems
I've been chasing ghosts during several hours to find out that steppers would work on 1.4.9

Thanks

I'm using Angular 1.5, ES6 with Babel and Webpack.

I have been able to add other modules without a problem but for some reason I cannot add material-steppers.

Here is the code in my app.js where I add the module:

'use strict';

import angular from 'angular';
import ngAnimate from 'angular-animate';
import ngCookies from 'angular-cookies';
import ngResource from 'angular-resource';
import ngSanitize from 'angular-sanitize';
import uiRouter from 'angular-ui-router';

import ngMessages from 'angular-messages';
import ngMaterial from 'angular-material';
import mdSteppers from 'material-steppers';

import {
  routeConfig
} from './app.config';

import navbar from '../components/navbar/navbar.component';
import footer from '../components/footer/footer.component';
import main from './main/main.component';
import constants from './app.constants';
import util from '../components/util/util.module';

import './app.scss';

angular.module('hpeSecurityApp', [ngCookies, ngResource, mdSteppers,
	ngSanitize, uiRouter, ngAnimate, ngMessages, ngMaterial, constants, util,
	navbar, footer, main
])
  .config(routeConfig);

angular.element(document)
  .ready(() => {
    angular.bootstrap(document, ['hpeSecurityApp'], {
      strictDi: true
    });
  });

When I try to run my app, I get this error in the browser console:

Failed to instantiate module hpeSecurityApp due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

From what I understand, the value of mdStepper is a blank object. Am I doing something wrong? Does this module even work this way or will it not work with the import keyword?

@eberlitz is there a way to do a standard ng-show/ng-hide for steps that are contingent on selection by the user... essentially dynamic steps that using a static HTML page... i cant use an ng-repeat with current code set? I noticed that ng-show actually does work to hide and show the step content but does not actually effect the step header...

thanks

Still playing with the project. You're missing a dependency in bower. Currently solved with overrides:

 "material-steppers": {
      "main": [
          "dist/material-steppers.min.js",
          "dist/material-steppers.css"
      ]
    }

Ideally the non minified versions would be better but when i try using the non minified version it looks for another tpl file.

Hi,

Congrats for doing a good job here.

Angular support is a feature request on our mdl-stepper project.

Is visible that in some parts material-steppers is inspired on mdl-stepper and this is a really nice thing. What bothers me is that also some parts of your repository is like a copy and paste without proper reference to the original author. Something like:

MDL-Stepper

material-steppers

The react-mdl-stepper is a project example that was inspired by the mdl-stepper and quoted us in his README.md.

You can give the reference of mdl-stepper?

Thanks.

When i try to bower update this component getting this error
bower ENOTFOUND Package material-steppers not found

do you happen to know why the steppers do not respond to flex? For instance, if i place the steppers in a

The step indicators have a white background instead of being transparent. I think the problem is caused here

You can see the white frame in this screenshot: