Skip to main content
Nintex Community Menu Bar

Move Radio Button to Right of Dropdown

  • October 18, 2019
  • 3 replies
  • 15 views

cjwilson1009
Forum|alt.badge.img+4

Hello!

I have a couple "Choice" columns on my Nintex Form that allow for a user to input their own value. When I add this to the form, the radio button for "Other" is BELOW the drop down list. I want to know if there is a way that I can move the "Other" radio button from under the drop down, to the right of the drop down. See image attached. Thanks!

 

 

 

3 replies

Simon Muntz
Nintex Partner
Forum|alt.badge.img+23
  • Nintex Partner
  • October 20, 2019

MegaJerk
Forum|alt.badge.img+14
  • Scholar
  • October 22, 2019

You should be able to use CSS to solve your problem. 

Select the Control in question and give it a class name. In my example the class name I've given it is "rightHandOther" (without quotes of course). 

5028i83E7DC5351C348F2.png

Now that you've added your class, you should be able to add in some custom CSS. To do that, go to your Form Settings: 

5029i0334E1C6AD4EC60B.png

 

Then expand the Custom CSS fold down menu and put a few lines of empy space between the top of the Text Box and whatever is typed in there:

5030iDCF59D1C12BCAD95.png

 

All you should do after that is copy and paste the below code into box (Reminder: Do not erase the text / css that's already there as it contains all of the default styles for your Form!):

.rightHandOther .nf-choice-control-fill-in {
  /* You might have to increase / decrease this width value */
  width: 600px;
}

.rightHandOther .nf-choice-control-fill-in>div:nth-child(1){
  /* You might have to increase / decrease this width value */
  width:40%;
  text-align: left;
  white-space:nowrap;
}

.rightHandOther .nf-choice-control-fill-in>div:nth-child(2){
  /* You might have to increase / decrease this width value */
  width:60%;
  text-align: right;
  white-space:nowrap;
}

.rightHandOther .nf-choice-control-fill-in>div, .rightHandOther .nf-choice-control-fill-in>div>span{
  display: inline-block;  
}

 

Save your settings, and look at a Preview of your form. You should notice that your Choice Selections now looks like: 

5031iEA863FF6B2F83C3B.png

 

I hope that this helps! 


cjwilson1009
Forum|alt.badge.img+4

This worked beautifully, thank you so much!