Styling issue with the Wizard

[mdawood1991]

I am using the bootstrap DateTimePicker (https://eonasdan.github.io/bootstrap-datetimepicker/)

When I load the wizard with an input of type DateTimePicker, the style is broken

I tried moving the css files around but it still overrides the css of the DateTime Picker

[jitteryjuice]

I cannot solve your issue, but i do question, how is it you themed the tab items, i.e. 'Instructions' 'Maintenance Details' ?

[mdawood1991]

I think this is it:

    .wizard > .steps {
        position: relative;
        display: block;
        width: 100%;
    }

    .wizard.vertical > .steps {
        display: inline;
        float: left;
        width: 30%;
    }

    .wizard > .steps > ul > li {
        width: 25%;
    }

    .wizard > .steps > ul > li,
    .wizard > .actions > ul > li {
        float: left;
    }

    .wizard.vertical > .steps > ul > li {
        float: none;
        width: 100%;
    }

    .wizard > .steps a,
    .wizard > .steps a:hover,
    .wizard > .steps a:active {
        display: block;
        width: auto;
        margin: 0 0.5em 0.5em;
        padding: 8px;
        text-decoration: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .wizard > .steps .disabled a,
    .wizard > .steps .disabled a:hover,
    .wizard > .steps .disabled a:active {
        background: #eee;
        color: #aaa;
        cursor: default;
    }

    .wizard > .steps .current a,
    .wizard > .steps .current a:hover,
    .wizard > .steps .current a:active {
        background: #1AB394;
        color: #fff;
        cursor: default;
    }

    .wizard > .steps .done a,
    .wizard > .steps .done a:hover,
    .wizard > .steps .done a:active {
        background: #6fd1bd;
        color: #fff;
    }

    .wizard > .steps .error a,
    .wizard > .steps .error a:hover,
    .wizard > .steps .error a:active {
        background: #ED5565;
        color: #fff;
    }

[pellosophical]

Any chance you ever found a fix for this? I'm having the same issue with something I'm building

If I remove the jquery.steps.css, the datetimepicker works perfectly, so there's some sort of conflict there, but obviously when I remove it the Steps functionality no longer works

Been trying to find a solution, but I fear I will have to comb through that CSS and do quite a bit of trial and error

I'm far from a javascript expert so I'm hoping there is an easier fix

Thanks!

[mdawood1991]

@pellosophical no I still have the same issue - didn't get time to solve it yet

[minirai]

i am also getting the same styling issue. any solution.

[zksdn]

I had almost the same problem, but for me the datetimepicker is not working at all, so I called onInit: function (event, currentIndex) { } of jQuery Steps and I moved the datetimepicker initialization $(".exampleDateTimePicker").datetimepicker(); inside it.