Float individual wizard button left

Badge +18

Is there a way to float an individual wizard button to the left? I’m looking to put my back button on the left side and next button on the right. With pagetitles, I can just create use two pagetitle components and a responsive grid. What about wizard buttons? Each button has a css property, but I haven’t been able to successfully separate the buttons with CSS, to float one left and another right. Seems like it’s either all one way or all the other. Ideas?

5 replies

Badge +5

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>}
Badge +18


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?

Badge +18

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?

Badge +5

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>}

Badge +18

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