Adjusting the size(width) for multi-step form

[Mleng89]

Hi all! I am wondering if it is possible to adjust the width of the multi-forms,I feel as though it is possible, but I am missing something.

For reference, I want to be able to do this because I am constructing a transfer list within the multi-step form, but it has the transfer list as a vertical form, rather the default horizontal. I believe this is due to the flexbox configurations, but not 100% sure.

In the playground: https://formkit.link/e3fec81d916709894a7c349f23e3b538
Oddly enough, this one shows the transferlist horizontal, but it spans out of the multi-form box.
Though is it possible for the multi-form to take up the empty space around it?

When inspecting the page, I do see this pop up:

formkit/packages/addons/src/css/multistep.css

Line 28 in 69518fd

max-width: 32em;

Screenshots

How it looks on my end with the vertical transferlist:

Through inspecting the page and manipulating the CSS, I am able to expand it, but I just cannot seem to do it in my files.

I have tried setting a max-width and width, but nothing works, I have even attempted to put an !important flag on it.
eg a code snippet:

.formkit-outer[data-type='multi-step'] > .formkit-wrapper {
  max-width: 100% !important; 
}

I have even tried to wrap the transferlist inside it's own div and expand the div

What am I missing?

[justin-schroeder]

You just need to remove the multi-step’s outer section’s max-width. You can do this using the $remove feature (https://formkit.com/essentials/styling#removing-classes).

https://formkit.link/02014fb344b9280aaa2e6e9d34d1050d

[Mleng89]

I appreciate the response @justin-schroeder !

After a few attempts, $remove does not seem to be being picked up on my end. Odd as the playground it works fine. Would the genesis theme be the cause of this? Even removing the theme, it seems to be the same. I am running on @formkit/vue: ^1.6 for reference, the same environment as the playground's example that was linked prior.

With a screenshot to provide a bit more information. (This does not have any themes)

Here it shows via DevTools when inspecting my multi-step form that max-width:32em still exists:

To my understanding, the outer-class property with the $remove syntax should allow me to remove a specific class from that container, such as:

<FormKit 
  type="multi-step" 
  tab-style="progress" 
  outer-class="$remove:max-w-[32em]"
>

I have tried to do an inline style to see if I could override it:

<FormKit
  type="multi-step"
  tab-style="progress"
  :style="{ 'max-width': '100%' }"  
>

As well as setting the class to false:

<FormKit
  type="multi-step"
  outer-class="{ 'max-w-[32em]': false }"
>

What gaps of information am I missing?

[urbgimtam]

I currently have the exact same issue. Have you found a solution?