Move Radio Button to Right of Dropdown

  • 18 October 2019
  • 3 replies
  • 1 view

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

Userlevel 6
Badge +22
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%2520Software%2520Development%2520Kit%7CNintex%2520Forms%25202013%2520Software%2520Development%2520Kit%7CNintex%2520Forms%2520SDK%2520Samples%7CCreate%2520a%2520Custom%2520Control%7C_____0
Userlevel 5
Badge +14

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! 

Badge +4

This worked beautifully, thank you so much!

Reply