CSS to convert radio button to tab not working

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.

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; 
        cursor:pointer; 
        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.

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

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?

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.