Vuestic-wizard vertical has buttons aligned in separate line instead of inline

[harishankards]

Hi,

I'm using vuestic-wizard in a vertical manner, the navigation buttons back and confirm are aligned in separate lines instead of being it in a single line.

Please refer the below screenshot.

[harishankards]

@pfrohner or @asvae, can you shed some light here? Sorry for tagging though

[asvae]

Screen too small, no?

Here's the one from demo. https://i.imgur.com/2ADxh9y.png

[harishankards]

@asvae, no. Mine is big screen only. When I open the inspect window in the browser, it's aligned horizontally as shown in the demo. When I close it, it changes into vertical arrangement mode.

Also,
why I'm getting the input fields having very short width like this?

My code is:

<vuestic-widget>
    <vuestic-wizard 
      :steps="vrSteps" 
      wizard-layout="vertical" 
      wizard-type="simple">

      <div slot="page1" class="form-wizard-tab-content">
      <div class="form-group">
        <div class="input-group">
        <input id="simple-input" required/>
        <label class="control-label" for="simple-input">First Name</label><i class="bar"></i>
        </div>
      </div> 
      <div class="form-group">
        <div class="input-group">
        <input id="simple-input" required/>
        <label class="control-label" for="simple-input">Last Name</label><i class="bar"></i>
        </div>
      </div> 
      <div class="form-group">
        <div class="input-group">
        <input id="simple-input" required/>
        <label class="control-label" for="simple-input">Username</label><i class="bar"></i>
        </div>
      </div> 
      <div class="form-group align-gender">
        <div class="input-group">
          <div class="radio abc-radio abc-radio-primary">
            <input type="radio" name="male" id="male" value="male" checked>
            <label for="male">
              <span class="abc-label-text">Male</span>
            </label>
            <input type="radio" name="female" id="female" value="female">
            <label for="female">
              <span class="abc-label-text">Female</span>
            </label>
            <input type="radio" name="others" id="others" value="others">
            <label for="others">
              <span class="abc-label-text">Others</span>
            </label>
          </div>
        </div>
      </div>
      </div>
      <div slot="page2" class="form-wizard-tab-content">
        <div class="form-group">
          <div class="input-group">
            <input id="simple-input" required/>
            <label class="control-label" for="simple-input">College Name</label><i class="bar"></i>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <input id="simple-input" required/>
            <label class="control-label" for="simple-input">University</label><i class="bar"></i>
          </div>
        </div> 
      </div>
      <div slot="wizardCompleted" class="form-wizard-tab-content">
            <h4>Add slot="wizardCompleted" to your wizard's last step,
            to show this step after wizard completed!</h4>
      </div>
    </vuestic-wizard>
  </vuestic-widget>

[smartapant]

@harishankards it seems that the width of wizard's content is way too narrow

[harishankards]

Nope @smartapant , if you want I can take full page screenshot. There is nothing on the screen, other than this except sidebar. And why the input fields are having very short width? Am I doing wrong something here?
Please help

[asvae]

Check style block in FormWizard.vue.
You can do something similar for your page.

  .form-wizard-page {
    .form-group {
      min-width: 200px;
      max-width: 360px;
      width: 80%;
    }
  }

[harishankards]

@asvae , I dont' find a file called FormWizard.vue

My version is 1.4.0

[asvae]

Could be form-wizard-page or something similar. Presentation component with wizards basically.

[harishankards]

Yes,

It is form-wizard-tab-content and it's not helping. 😞