none
Trouble with JQuery Mobile overriding my custom controls RRS feed

  • Question

  • I've been having significant problems the last couple days with JQuery Mobile automatically adding a bunch of CSS classes to the controls that I didn't assign and thus styling them with CSS I didn't intend for on these custom controls.  An example of this issue is with the Tablesorter js library, which has a pretty nice filter widget built in.  The filters provided at the top of each column are search inputs, and jquery mobile is attaching a bunch of styling to them that renders them unusable in the Tablesorter context.  Its the same issue if I try to implement a select dropdown for paging through the table that lets the user select if 10,20,30,40... results are displayed per table page.  The select box gets styled into a gigantic mobile select box and gets put on a new line instead of staying inline with next and prev page buttons.  Basically I want to know if theres some way to exempt some of my custom controls (particularly form controls) from being overriden by JQuery Mobile or if this will be a constant issue that makes regular Jquery widgets unusable.  If this can't be disabled, is there at least an explanation you can point me to of how/why JQuery Mobile is attaching these extra classes and how I can configure that behavior?

    Thanks

    Friday, May 10, 2013 7:18 PM

Answers

  • Hi Steve,

    I believe if you add data-role="none", jQuery will not try to enhance the HTML element. For example:

        var $element = $(element);
        var $textbox = $('<input type="text" data-role="none"/>');
        var $button = $('<input type="button" value="+" data-role="none"/>');
        $element.append($textbox);
        $element.append($button);

    Best regards,
    Huy
    • Proposed as answer by ADefwebserver Friday, May 10, 2013 9:53 PM
    • Marked as answer by Steve Kehoe Monday, May 13, 2013 7:47 PM
    Friday, May 10, 2013 9:20 PM

All replies

  • Hi Steve,

    I believe if you add data-role="none", jQuery will not try to enhance the HTML element. For example:

        var $element = $(element);
        var $textbox = $('<input type="text" data-role="none"/>');
        var $button = $('<input type="button" value="+" data-role="none"/>');
        $element.append($textbox);
        $element.append($button);

    Best regards,
    Huy
    • Proposed as answer by ADefwebserver Friday, May 10, 2013 9:53 PM
    • Marked as answer by Steve Kehoe Monday, May 13, 2013 7:47 PM
    Friday, May 10, 2013 9:20 PM
  • Thanks Huy!  I still think I should go over Jquery Mobile 101 so little things like this don't seem as cryptic.
    Monday, May 13, 2013 7:48 PM