Add further improvements to the example layout

Author: Rafael J. Staib

JSteps.v11.suo

@@ -115,7 +115,7 @@
 {
     position: relative;
     display: block;
-    width: auto;
+    width: 100%;
     height: 300px;
     overflow: hidden;
 }
@@ -124,8 +124,8 @@
 {
     float: left;
     position: absolute;
-    width: auto;
-    height: auto;
+    width: 100%;
+    height: 100%;
     padding: 0.5em;
 }
 
@@ -168,7 +168,7 @@
 {
     position: relative;
     display: block;
-    width: auto;
+    width: 100%;
     height: 2.5em;
     text-align: right;
     margin-top: 1em;

JSteps/Content/examples.css

@@ -199,6 +199,9 @@
     <Content Include="Views\Examples\Index.cshtml" />
     <Content Include="Views\About\Index.cshtml" />
     <Content Include="Views\Donation\Success.cshtml" />
+    <Content Include="Scripts\jquery.steps.min.js.map">
+      <DependentUpon>jquery.steps.js</DependentUpon>
+    </Content>
   </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>

JSteps/JSteps.csproj

@@ -614,8 +614,8 @@ function render(wizard, options, state)
     var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
         orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
         verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
-        contentWrapper = $(format(wrapperTemplate, options.contentContainerTag, "content", wizard.html())),
-        stepsWrapper = $(format(wrapperTemplate, options.stepsContainerTag, "steps", "<ul role=\"tablist\"></ul>")),
+        contentWrapper = $(format(wrapperTemplate, options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
+        stepsWrapper = $(format(wrapperTemplate, options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
         stepTitles = contentWrapper.children(options.headerTag),
         stepContents = contentWrapper.children(options.bodyTag);
 
@@ -655,7 +655,7 @@ function renderPagination(wizard, options, state)
 {
     if (options.enablePagination)
     {
-        var pagination = "<{0} class=\"actions\"><ul role=\"menu\" aria-label=\"{1}\">{2}</ul></{0}>",
+        var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
             buttonTemplate = "<li><a href=\"#{0}\" role=\"menuitem\">{1}</a></li>",
             buttons = "";
 
@@ -671,7 +671,8 @@ function renderPagination(wizard, options, state)
             buttons += format(buttonTemplate, "finish", options.labels.finish);
         }
 
-        wizard.append(format(pagination, options.actionContainerTag, options.labels.pagination, buttons));
+        wizard.append(format(pagination, options.actionContainerTag, options.clearFixCssClass,
+            options.labels.pagination, buttons));
 
         refreshPagination(wizard, options, state);
         loadAsyncContent(wizard, options, state);
@@ -793,7 +794,7 @@ function startTransitionEffect(wizard, options, state, index, oldIndex)
             var outerWidth = currentStep.outerWidth(true),
                 posFadeOut = (index > oldIndex) ? -(outerWidth) : outerWidth,
                 posFadeIn = (index > oldIndex) ? outerWidth : -(outerWidth),
-                posLeft = currentStep.parent().position().left;
+                posLeft = 0; //currentStep.parent().position().left;
 
             currentStep.animate({ left: posFadeOut }, effectSpeed, 
                 function () { $(this)._hideAria(); }).promise();