StepsTemplate vertical type

[tetiolaw]

I have a huge step list which will not enter into the screen and I would like to put it in vertical on left side of the screen. However I've noted that there is no way to do it.
It would be a great improvement

[Pagebakers]

The package comes without any styling, so doing the css part is up to you.

I suppose you use semantic ui like in the example, if you read the docs you will see it's as easy as adding classname 'vertical' to <div class="ui steps vertical"/> in the steps template.

[SugunRajiv]

.wizard {
padding: 20px;
width:800px;

}
.wizard>.form-wrapper{
padding-bottom: 60px;
padding-left: 20px;
padding-right: 20px;
width:500px;
float:right;
}

.wizard>.steps {
width: 250px;
float:left;
width:auto;
position: relative;
overflow: visible;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.wizard>.steps>ul {
width: 250px;
padding: 0;
margin: 0;
list-style: none outside none;
}
.wizard>.steps>ul li {
position: relative;
width: 250px;
float: left;
height: 50px;
padding: 0 20px 0 30px;
margin: 0;
font-size: 16px;
line-height: 46px;
color: #999999;
cursor: default;
background: #ededed;

}
.wizard>.steps>ul li:first-child {
padding-left: 35px;
border-radius: 4px 0 0 4px;
}
@media(max-width:767px) {
.wizard>.steps>ul li:first-child {
padding-left: 5px;
padding-right: 0px;
}
}
.wizard>.steps>ul li.active {
color: #3a87ad;
background: #f1f6fc;
}
.wizard>.steps>ul li:hover {
background: #D4E3F5;
}
.wizard ul li.complete {
color: #468847;
background: #f3f4f5;
}

.wizard ul li .chevron {
position: absolute;
top: 0;
right: -14px;
z-index: 1;
display: inline;
border: 0px solid transparent;
border-right: 0;
border-left: 0px solid #d4d4d4;
}

.wizard ul li .chevron:before {
position: absolute;
top: -24px;
right: 1px;
display: inline;
border: 0px solid transparent;
border-right: 0;
border-left: 0px solid #ededed;
content: "";
}

.wizard ul li .badge {
margin-right: 8px;
}
@media(max-width:767px) {
.wizard ul li .badge {
margin-right: 1px;
}
}
.wizard .badge {
padding: 2px 4px;
padding-right: 9px;
padding-left: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
display: inline-block;font-size: 11.844px;
font-weight: bold;
line-height: 14px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
background-color: #999999;
}
.wizard .badge-success {
background-color: #468847;
}
.wizard .badge-info {
background-color: #3a87ad;
}

.twitter-typeahead { width: 100%; }
.example-twitter-oss .tt-suggestion{padding:8px 20px}
.example-twitter-oss .tt-suggestion+.tt-suggestion{border-top:1px solid #ccc}
.example-twitter-oss .repo-language{float:right;font-style:italic}
.example-twitter-oss .repo-name{font-weight:bold}
.example-twitter-oss .repo-description{font-size:14px}
.example-sports .league-name{margin:0 20px 5px 20px;padding:3px 0;border-bottom:1px solid #ccc}
.tt-query,.tt-hint{width:396px;height:30px;padding:8px 12px;font-size:24px;line-height:30px;border:2px solid #ccc;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;outline:none}
.typeahead{background-color:#fff}
.typeahead:focus{border:2px solid #0097cf}
.tt-query{-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075)}
.tt-hint{color:#999}
.tt-dropdown-menu{width:422px;margin-top:3px;padding:8px 0;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}
.tt-suggestion{padding:3px 20px;font-size:18px;line-height:24px}
.tt-suggestion.tt-cursor{color:#fff;background-color:#0097cf}
.tt-suggestion p{margin:0}

hey try the above css that is working for me..Iam not using semantic ui...I made whole chevrons invisible you can change them.

Hey put this css in client folder

[tetiolaw]

Please find my fork to your example repo https://github.com/tetiolaw/meteor-wizard-example
I've just included each step into a column class as well as the steps-template. It seems that the grid-ui doesn't work properly with the wizard; the grid-ui alone instead would work without problem in other meteor plain html pages.