How to change the position of navigation bar? about angular-wizard HOT 21 CLOSED

Well that is why templates are used for. In your case, you could use a custom template(refer wizard.html) and then include it in your wizard tag like this:

<wizard on-finish="finishedWizard()" template="templates/wizard.html"> 
    <wz-step title="Starting">
        <h1>This is the first step</h1>
        <p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
        <input type="submit" wz-next value="Continue" />
    </wz-step>
    <wz-step title="Continuing">
        <h1>Continuing</h1>
        <p>You have continued here!</p>
        <input type="submit" wz-next value="Go on" />
    </wz-step>
    <wz-step title="More steps">
        <p>Even more steps!!</p>
        <input type="submit" wz-next value="Finish now" />
    </wz-step>
</wizard>

from angular-wizard.

question can each step have its own template if so can i see an example of it

from angular-wizard.

Yup. Same as for the wizard.

Again refer to the src/step.html in the repo

from angular-wizard.

right but if i have this


<ng-include="sted1.html">


or do i pass the tempate as a attribute vaule on wz-step

from angular-wizard.

Yup exactly.

On Sat, Jul 26, 2014 at 1:09 AM, mplayer [email protected] wrote:

right but if i have this

or do i pass the tempate as a attribute vaule on wz-step

—
Reply to this email directly or view it on GitHub
#40 (comment)
.

Anoop

from angular-wizard.

I'm not sure I understand. The code from the github email correspondence is not visible to other people viewing this post. Please use public gists instead.

Is there a way to modify the step.html and wizard.html which are stored in the $templateCashe within angular.wizard.js so that the navigation bar is present at the top of a section, rather than the bottom?

Could someone demonstrate this with some example code?

I found out that if I comment out everything within the ul tags of the wizard.html file how the navigation bar is removed from the output, yet the different step sections remain.

Commented out Gist
https://gist.github.com/Shawful/9e12012250692190708d

Since the content between the ul tags displays the nav bar and the ul tags were last in the wizard.html template, I attempted to swap the two bits of code. Specifically I tried to swap the div with the class="steps" ng-transclude elements/attributes with all of the content between the ul tags, thinking that this change in code might present a solution where the navbar was above each section display, rather than below it. However, my modification of the wizard.html template caused no output to be produced.

Swapped Gist
https://gist.github.com/Shawful/21c4e70eef489dc36529

Could someone please help guide my efforts by posting a gist or a jsfiddle with a possible solution?

from angular-wizard.

@Shawful. Sorry I don't remember the code there as it's been quite a while. Well what I did was I made a file called wizard.html and then passed it as an argument to the wizard directive. I think its called templateUrl as given in https://github.com/mgonto/angular-wizard/blob/master/src/wizard.js. I don't have a working example now but I hope you can start with those pointers. I will try putting up a gist this week with some complete example and maybe the author can add that in the read me.

And yea i had edited that wizard.html accordingly. And I think you first try with this method and then finally maybe change the $templateCache

from angular-wizard.

I'm really interested in how to do this as well. I've tried a similar approach to what @Shawful has done, but it seems like the stock wizard.html doesn't want to play nice re-ordering where the "steps-indicator" ul gets printed. I'm all for writing a custom template, but I'd like to know what the requirements are for it to actually render (and still work)...etc. If it's easier to change the order of operations somewhere else in the directive to have them (the steps div and indicator) render in reversed order, I'm open to that as well. The library isn't too incredibly long to read through, but if you have some suggestions on how to use it without hacking up your solution, I'm game.

Thanks!

from angular-wizard.

Nevermind .... If you update the CSS to not position absolute / bottom:0 you can move it around. No magic happening here with rendering order.

from angular-wizard.

Unfortunately, the modification that worked for @blarsen06 does not work for me. I'm working with SASS instead of LESS. But because the provided files are LESS, I'm just updating the *.css file directly without using a LESS precompiler. I'm opening the wizard within a modal and was able to get it to work with the attached gist. I would still be very interested in the gists posted by @anoopknayak .

CSS
https://gist.github.com/Shawful/4df100792b1802901468

I'm sure there are better ways to accomplish this.

Hope this helps!

from angular-wizard.

Has anybody figured this out ,
using what @Shawful did, it brings nav bar from bottom of the page to the bottom of the content not what exactly i wanted but that was closest .

i hope @mgonto could help with this

from angular-wizard.

Extremely sorry for the delay. I'm not getting enough time to make a complete example. Nevertheless I'm attaching a gist here for your reference. Its pretty hackish solution but works for sure. Well we have .steps-indicator as the CSS class and on changing that you can change the position as well.

check out the gist here.
https://gist.github.com/4e356c8caba652594248.git

I used the mgonto's example to set this up. So make sure to clone that site and replace the index.html.

@Shawful sorry man!. I initially thought I had the project in which i used this wizard but I can't find it now.

from angular-wizard.

After some tinkering i thought of creating my own solution & the given css doesn't seems to work with bootstrap 3.2
so there is my solution

<div>
    <ol class="breadcrumb">

            <li ng-repeat="step in steps" ng-class="{'text-success' : step.completed && !step.selected,'text-muted' : !step.completed && !step.selected,'text-primary' : step.selected && !step.completed, 'text-muted' : step.selected && step.completed  }">
                <i class="fa fa-3x" ng-class="{'fa-check-square' : step.completed && !step.selected,'fa-circle-o' : !step.completed && !step.selected,'fa-circle' : step.selected && !step.completed, 'fa-edit' : step.selected && step.completed  }"></i>
                <a class="advertiser-breadcrumb" ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>   
            </li>


    </ol>
    <div class="steps" ng-transclude></div>
</div>

here is the screenshot of how it looks

from angular-wizard.

how i can change position of wizard to top pleas help !

from angular-wizard.

@sidahmedbenkhaoua just override the wizard-template.

from angular-wizard.

i think, css is not enough for this. With css "placement" we need also "target" to set position the bar relative to a specific target element (like in a angular-strap). What about if i want nav bar, that not fixed and relative to a specific target element?

from angular-wizard.

For chaning it to top. I don't think css fixed is the solution.

Solution:

Inside angular-wizard.js file, move

html from bottom to above of div with class "steps". So the steps nav will generate before the steps section. So steps nav will show on top of the steps section.

from angular-wizard.

for most purposes editing the angular-wizard.js file will do the trick, but for some projects where deployment are done using bower and the like, this file is automatically downloaded and decoupling it from the project just to have this is too hacky. I had an instance of this exact issue. My solution was quite simple. CSS. It was more than enough to get everything working as it should and have the navigation steps above the wizard - fully angular - fully bootstrapped and fully response, no issue on any browser.

from angular-wizard.

How do i move the navigation bar to a separate div? I want the navigation var to be on a separate div that will be on the right hand side of the wizard.

from angular-wizard.

You can use custom css to overwrite or you can change the source files once you download. With all the different possible ways people may want the HTML and CSS done we can accommodate them all :( We do try to make it easy to make changes though

from angular-wizard.

@geostima editing like this, won't work for me:

`$templateCache.put("wizard.html",

"<div>\n" +

"    <ul class=\"steps-indicator steps-{{getEnabledSteps().length}}\" ng-if=\"!hideIndicators\">\n" +

"      <li ng-class=\"{default: !step.completed && !step.selected, current: step.selected && !step.completed, done: step.completed && !step.selected, editing: step.selected && step.completed}\" ng-repeat=\"step in getEnabledSteps()\">\n" +

"        <a ng-click=\"goTo(step)\">{{step.title || step.wzTitle}}</a>\n" +

"      </li>\n" +

"    </ul>\n" +

"    <div class=\"steps\" ng-transclude></div>\n" +

"</div>\n" +

"");`

The nav bar is above as expected - but the active section has now no width and isn't displayed anymore.

Tested with this example:
`

<wz-step wz-title="Starting">

    <h1>This is the first step</h1>

    <p>Here you can use whatever you want. You can use other directives, binding, etc.</p>

    <input type="submit" wz-next value="Continue" />

</wz-step>

<wz-step wz-title="Continuing">

    <h1>Continuing</h1>

    <p>You have continued here!</p>

    <input type="submit" wz-next value="Go on" />

</wz-step>

<wz-step wz-title="More steps">

    <p>Even more steps!!</p>

    <input type="submit" wz-next value="Finish now" />

</wz-step>

`

from angular-wizard.