9 replies · opened Jul 4, 2016
I have a page with a form and some tabs. I needed to include JqueryUI to get a datetimepicker on one of the fields.
After doing that, the appearance of my tabs changed. It added a gradient behind the tabs.
Is it expected? What can I do to revert to normal?
Thanks
Hello,
Please make sure that you generate a Custom Package for the DatePicker only as the Default Package includes the CSS for the jQuery UI Tabs Styling as well which is why there is a Design Conflict.
This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
I have added all core, interactions and effects, and only the datepicker from the widgets. Unfortunately, the problem still happens. The styles seem to come from the core.
And why do you decorate all your widgets with the same classes than jqueryui? For example the tabs get widget-ui-header even when I don't load jqueryui...
Something to note also:
I use the menu style 7 (http://themes.semicolonweb.com/html/canvas/menu-7.php). When the date picker opens upward because there is no space left at the bottom, the menu is displayed over it. Issue with zindex?
Hello,
The Tabs Functionality used in Canvas is from the jQuery UI Tabs but we do not use the Default jQuery UI Styling and rather use our Custom Styling only. Only the Tabs Shortcodes have the jQuery UI Classes and no other Widgets do.
Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
http://vosaffaires.apphb.com/fr/blog/create for the page with the issue (jquery UI custom with only datepicker and slider for the selecte widgets)
http://vosaffaires.apphb.com/fr/blog/create2 for the page without issue
Hello,
Please consider adding the following CSS Code:
.ui-widget-content.tabs {
border: none;
background: transparent;
border-radius: 0;
}
.ui-tabs-nav.tab-nav { border-radius: 0; }
.ui-widget-header.tab-nav {
border: none;
background: transparent;
font-weight: normal;
}
.ui-widget-content.tab-content { border: none; }This should definitely fix the styling issue. Let us know if we can help you with anything else or if you find any further issues.
Almost. There is still a blue line on the top of the active tab. What is the css to avoid that?
Also, is it a workaround and something will be officially fixed in the next update, or do I have to keeps this custom css for ever?
Thanks
Hello,
Please consider adding the following CSS too:
.tab-nav li.ui-state-active {
background-color: transparent;
border-color: transparent;
}This will definitely work fine.
This will be definitely fixed in the Next Update. So, it will be automatically built-in in the Next Update and you can then remove the CSS.
Let us know if we can help you with anything else or if you find any further issues.
ok, thanks.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard