My form tabs don't work or look as expected

Written Oct 8, 2012 05:26

ChronoForms can help you add tabs to your form, but it will not load the tabs CSS code, and if your template doesn't provide the tabs CSS then your tabs may not work as expected. Here's how to get them to work:

Drag a "Load CSS" action into the On Load event of your form and paste the code below:

dl.tabs {
    clear: both;
    float: left;
    margin: 50px 0 0;
    z-index: 50;
}
dl.tabs dt {
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    color: #666666;
    float: left;
    margin-right: 3px;
    padding: 4px 10px;
}
dl.tabs dt.open {
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1px solid #F9F9F9;
    color: #000000;
    z-index: 100;
}
div.current {
    border: 1px solid #CCCCCC;
    clear: both;
    max-width: 500px;
    padding: 10px;
}
div.current dd {
    margin: 0;
    padding: 0;
}
dl#content-pane.tabs {
    margin: 1px 0 0;
}

FAQs