cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

CSS to convert radio button to tab not working

Jump to solution

Hi ,

I had a requirement to convert a long form in to several tabs. I found the below article which helps me do that

https://community.nintex.com/docs/DOC-1374 for some reason the css is not working.

I don't know if I am doing something wrong.

Regards

Kannan

Labels: (1)
Tags (1)
0 Kudos
Reply
6 Replies
Workflow Hero

Re: CSS to convert radio button to tab not working

Jump to solution

Hi ‌,

Can you share more details about the issue you are facing with some screen shot? It would help to point down to the actual issue.

0 Kudos
Reply
Workflow Hero

Re: CSS to convert radio button to tab not working

Jump to solution

Thanks Chatra,

I  was able to switch between the frames using the radio button as shown below

As you can see the radio button wont change to tabs. please see the css I have used ( which is the mentioned in the  post above)

.customtab { 
    float: left; 

.customtab tr { 
        float:left; 

.customtab label { 
        background: #eee; 
        padding: 7px 3px; 
        border: 1px solid #ccc; 
        margin-left: -1px; 
        position: relative; 
        left: 1px; 
        border-radius:5px 5px 0px 0px; 
        cursorSmiley Tongueointer; 
        border-bottom:none; 
        text-align:center; 

.customtab [type=radio] { 
        display: none; 

[type=radio]:checked ~ label { 
    background:white; 
    border-bottom: 1px solid white; 
z-index: 2; 
}  

I cant seems to convert the radio button to tabs as below.

0 Kudos
Reply
Workflow Hero

Re: CSS to convert radio button to tab not working

Jump to solution

Hi,

did you put css class "customtab" on properties "Control CSS class" of your radio button ?

I followed with success this tutorial for one of my project and it works great

JM

0 Kudos
Reply
Workflow Hero

Re: CSS to convert radio button to tab not working

Jump to solution

Hi Kannan Ahammed‌,

I did follow the step#3 mentioned in the shared link: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365 along with above CSS definition and was successfully able to get the tabs replacing the radio options.

Can you check if the CSS definition is placed in the Custom CSS in the Form Settings as shown below? and also check in the developer tool of the browser if the CSS is loaded?

Reply
Workflow Hero

Re: CSS to convert radio button to tab not working

Jump to solution

Actually I had, I was the customtab (in red) copying it from below ( which is from the original tutorial)

  • Set the Control CSS class to customtab. This class name will be used to style our Choice control as a tab in our custom CSS section late

The problem here was the customtab, when copied to Control CSS class of the choice control it shows red and was not working, now I type it in without the formatting it start working.

does the control CSS Class needs to be a rich text editor? if we are to place class name it can work with simple textbox or something right ?

kindly have a look and see if it makes any difference.

Kind regards

Kannan

0 Kudos
Reply
Workflow Hero

Re: CSS to convert radio button to tab not working

Jump to solution

Agree, it is best to copy the text from Notepad to Nintex as all the stylings will be chipped off.

Not just the Control CSS Class text-box, most of the configuration text box in Nintex behave the same.

0 Kudos
Reply