Float individual wizard button left

The point with float left and right was good. But since the wrapper around the buttons (nx-header-right) has a relative width, the buttons don’t have enough space to visibly get to another place.
You have to set the width of the wizard header.

You can achieve this by giving your wizard a class (in this case the wizard has “special-wizard”) and the buttons seperatly.

Then use the following inline CSS:

.special-wizard .nx-header-right, .special-wizard .nx-header-right&gt;div {&nbsp; &nbsp; width: 100%;<br>}<br>.special-wizard .previous-button {<br>&nbsp; &nbsp; float: left;<br>}<br>.special-wizard .next-button {<br>&nbsp; &nbsp; float: right;<br>}

Thimo,

Nice work.

One issue I have is that table components also use .nx-header-right, so the save buttons on any tables inside my wizard are getting stretched to the full width of the table. I tried playing with a :not selector, and with being more explicit with the selector for just the wizard, but I couldn’t get it working. Any assistance?

Anyone able to solve this one? Can I float the wizard buttons in opposite directions, but not stretch the button headers of table components within the wizard?

Hi Matt, 
To only get the header of the wizard a more detailed selection should solve your case:

.special-wizard .nx-wizard-step&gt;.nx-editor-header&gt;.nx-header-right, .special-wizard .nx-wizard-step&gt;.nx-editor-header&gt;.nx-header-right&gt;div {&nbsp; &nbsp; width: 100%;<br>}<br>.special-wizard .nx-wizard-step&gt;.nx-editor-header&gt;.nx-header-right .previous-button {<br>&nbsp; &nbsp; float: left;<br>}<br>.special-wizard .nx-wizard-step&gt;.nx-editor-header&gt;.nx-header-right .next-button {<br>&nbsp; &nbsp; float: right;<br>}

Thanks, Thimo! I tried something similar, but must have had the syntax wrong somehow. You’re the best!