cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Nintex Newbie

Move Radio Button to Right of Dropdown

Jump to solution

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!

 

 

 

Labels: (1)
0 Kudos
Reply
3 Replies
Highlighted
Nintex Employee
Nintex Employee

Re: Move Radio Button to Right of Dropdown

Jump to solution
Hi,

There is no out of the box way that I know of to move the position of the radio button and other entry field.
You may need to look at creating your own control.
https://help.nintex.com/en-US/sdks/sdk2013/#FormSDK/Topics/SDK_NF_SC001_Index.htm%3FTocPath%3DNintex...
0 Kudos
Reply
Highlighted
Automation Master
Automation Master

Re: Move Radio Button to Right of Dropdown

Jump to solution

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). 

NOTE: Do not use the Control CSS class that is ABOVE CSS Class!NOTE: Do not use the Control CSS class that is ABOVE CSS Class!

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: 

image.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:

image.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: 

image.png

 

I hope that this helps! 

View solution in original post

Reply
Highlighted
Nintex Newbie

Re: Move Radio Button to Right of Dropdown

Jump to solution

This worked beautifully, thank you so much!

0 Kudos
Reply