I'm using the jquery datatables plugin and added some custom jquery-ui buttons to the table footer.
To use the datatables plugin with jquery-ui theming the "bJQueryUI" option has to be turned on.
So far no problem, but now I added the jquery-ui themeroller to my page.
When I change the theme, all the jquery-ui components change their style accordingly, just like the datatable, except for the buttons within the datatable.
I found out that it actually is a css-priority issue: the new styles applied by the themeroller got lower priority than the original styles, so these buttons never change their look.
As the jquery-ui components and the datatables plugin both are quite popular I thought I would find someone with similar problems, but had no luck so far..
That's how the initialization of the datatable and the creation of the custom buttons are done:
<table id="DataTable">
// ...
</table>
<script type="text/javascript">
$(function ()
{
var oDataTable = $('#DataTable').dataTable({
"aaData": result.aaData,
"bPaginate": false,
"bJQueryUI": true,
"bInfo": true,
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
"oTableTools":
{
"sRowSelect": "single"
}
});
// add buttons
$("div.toolbar").html('<button id="AddButton">New element</button>');
$("#AddButton").button().click(function () { /* ... */ });
// add more buttons...
}
</script>
Here's a screenshot of the actual html structure and applied css-styles:
http://i.stack.imgur.com/vbAuy.jpg
Any hint is greatly appreciated.
I found the solution myself:
If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly.
To remove the styles which that class applies (border and background), I added a more specific CSS style to remove these:
div.toolbar
{
float: right;
border: 0;
background: 0;
}
It's important here to use "div.toolbar" not ".toolbar", otherwise the ui-widget-content styles get applied.
Now the toolbar container doesnt get unwanted styles applied and the buttons inside correctly get the selected theme.
Maybe that's helpful for someone using the themeroller with custom jquery-ui buttons in datatables.
IF you want the theme to control the style of the button, then comment out the CSS that is overriding the theme roller style.
If they are themed buttons, then you will have to remove your CSS to allow the theme to take affect. Themes are made to be easily over-writable so you can add customization, only it sounds like you no longer want the customization.
Not sure if you had this problem but there are two separate css classes with datatables. Which one to use depends on if you have bJQueryUI:true or bJQueryUI:false
Related
I have an element:
<td colspan="3" data-enhance="false">
<select id="CandidatesListBox" size="9" onchange="MoveToGeocode()" style="width: 100%" class="candidatesList" data-role="none"></select>
</td>
I want this element to have no jQuery Mobile styles. The problem is that I fill this item dynamically, and jQuery mobile will ignore all data-enhance="false" tags then adding dynamic elements through javascript. JQuery Mobile will also transform the control, so jQuery that would work on the item (.add(), for example) will not. I need to make a dynamic element with no jQuery mobile styles or elements. Is this possible?
Edit
I have also tried to disable all selects from using JQM, but get the same issue:
$(document).bind('mobileinit', function () {
$.mobile.keepNative = "select"; /* jQuery Mobile 1.4 and higher */
});
JQM adds styles and render them when you specify the JQM css file. Once it is called and unless you override the CSS by your own applying styles for a particular element cannot be stopped. Because JQM itself wrapps our elements with their elements. So as a solution get the element and remove additional class names added by JQM from the element. Also you will need to remove wrapping elements too.
I am using Bootstrap accordion and I love the way it works in this example. However, I'd like to be able to toggle an additional section outside that accordion.
Is there a quick trick or should I try to develop my own widget?
Not sure about the bootstrap accordion, but you could add some simple jQuery:
$(".accordion-toggle").on(click, function() {
$(".other-section").toggle();
});
The trick is to bootstrap event hooks
"Bootstrap's collapse class exposes a few events for hooking into collapse functionality."
$('#myCollapsible').on('hidden', function () {
// do something…
})
Check doc here: twitter bootstrap collapse
All the form examples in the docs for jQuery mobile show each form element on its own line. I would like to have a standard button (which will link to another page), to the right of a search input field. Is that possible with jQuery Mobile?
Thanks
Not natively as an inline unit. However, form elements can be used together with the layout grid system reasonably effectively:
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html
jQM's UI grids force columns of equal width. In my case, i wanted the submit button to be just the icon to allow the search box more room. i saw <table> mentioned in a couple posts, but discovered that other inputs (notably selectmenu) don't work correctly when they're children of unexpected elements. [1]
So to avoid breakage of the widgets, i managed this:
.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
width: 14.95%;
}
It's not bullet-proof, but it can be expanded to additional grid definitions. It uses specificity to get all the grid rules of the existing UI, but then redefine the column widths. No inline styles, no additional tags, and the widgets don't break. And because of specificity, it can be loaded before or after jQM's structure stylesheet.
[1]: https://github.com/jquery/jquery-mobile/issues/6077 jQM Github bug report
With new version you can:
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
The old style solution still works:overwriting the ui-input-search
div.ui-input-search{
width: 55%;
display: inline-block;
}
don't forget to add ui-btn-inline in the class of the a href (if you use the Button markup syntax)
Is it possible to use the jQuery UI library to apply rounded corners to an element on the page? For example, I've applied some CSS to LI tags so that they look more like buttons and float next to each other. Nothing happens when I apply the following classes to the LI: ui-widget ui-state-default ui-corner-all.
Is it that the styles only apply to jQuery UI elements? Thanks.
With jQuery you can apply directly the round corners to your element. You don't need to use jquery ui for that.
$("#elementYouWant").css({
"-moz-border-radius": "5px"
"-webkit-border-radius": "5px",
"-border-radius": "5px"
});
I'm using the Accordion widget from jQuery UI.
Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.
I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.
However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??
$(function() {
$( "#mainnav" ).accordion().blur($('#mainnav'));
});
I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).
jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...
#mainnav .ui-state-focus {
outline: none;
}
For me works this for JQuery UI 1.9.2, Tabs widget:
#mainnav .ui-tabs-anchor {
outline: none;
}