Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Inline page instead of modal #15

Closed
mj1856 opened this Issue Mar 6, 2013 · 5 comments

Comments

Projects
None yet
3 participants

mj1856 commented Mar 6, 2013

I need to be able to use this control inline the page, rather than in a modal popup. I was able to write some code to make it work, but it should be a simple option on the control instead.

Here is the workaround code doing some DOM hackery with jQuery:

// the usual setup
var element = $("#some-wizard");
var wizard = element.wizard(options);

// detach the internal rendered element
var el = wizard.el;
el.detach();

// tell boostrap not to render a backdrop
el.attr('data-backdrop', false);

// remove the close button
el.find('.wizard-close').remove();

// this keeps the box the right height during submittal
el.find('.wizard-buttons-container').css('height', '30px');

// set some properties to make it appear inline
el.css('position', 'static');
el.css('margin-top', '20px'); // could be zero, but this looks better
el.css('margin-left', 0);

// place it where it belongs
$(element).after(el);

// show it
wizard.show();
Owner

amoffat commented Mar 6, 2013

Hey Matt, I won't be able to merge this as-is, because it's allowing the modal to be created, then pulling away its styling and properties after the fact to make it look like its not a modal. If you wanted to do it as the wizard is created, submit a pull request with the new code. Thanks!

@amoffat amoffat closed this Mar 6, 2013

mj1856 commented Mar 7, 2013

Yeah, it's a hack. Not sure when I will have time to do it properly, but I will submit a pull request if I do. Maybe you will figure it out before then. :)

Owner

amoffat commented Mar 7, 2013

No worries, thanks Matt

I know this is an old post, but the solution is available in the bootstrap 3 branch

https://github.com/amoffat/bootstrap-application-wizard/tree/bootstrap-3

This can be enabled by setting the isModal property to false in the wizard constructor.

    var wizard = $('#satellite-wizard').wizard({
       keyboard : false,
       contentHeight : 400,
       contentWidth : 700,
       isModal:false
    });

Strangely, the code to support this is not available in the plugin source delivered with the distribution on the download link. However, the minified version (bootstrap-wizard.min.js) contains the feature.

<script src="../src/bootstrap-wizard.min.js" type="text/javascript"></script>`

mj1856 commented Jun 17, 2014

@pradeshc - Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment