I'm using jQuery Mobile 1.3.0 RC1 (haven't upgraded to final yet).
When I create a button using the button tag, jQuery Mobile wraps the actual button tag in a div that uses a bunch of classes like ui-btn, etc.
That's all well and good, but since the actual button I created is wrapped, how can I use CSS to hide the button? The button tag has an ID, but I can't reference that ID in CSS because it's the wrapping div that needs to actually be hidden.
How can I do that? I tried adding a CSS class to the button tag, hoping jQuery Mobile would apply that class to the wrapping div, but it does not do so.
under the Split Buttons heading. That example shows the list items split into two buttons.
My question: Can the list items be split into multiple items of more than two? I want to have the "text part" as shown in that example, and then three buttons after it, instead of the one button shown in the example.
Along with that, can I mix and match split and non-split items in the same list? Some items I don't want to be split, and other list items need to be split.
How do I put a button inline and right next to (after) an input box on Firefox? I have a fieldset element to keep the label and text box inline with each other, and then have an icon-only button immediately following the text box. It works on Chrome and Safari, but the problem is that on Firefox the icon-only button is vertically pushed down a bit from the label and the input box.
I tried using a negative margin, and also a negative top value, to move the button up to be vertically aligned with the label and input box. This worked, however, it's not cross browser. When I had it lined up on Firefox, it is too high on Chrome and Safari.
How can I have the inline button be vertically aligned with the label and input box on Firefox?
But the only way I can center the text is by changing the line-height value via trial and error, and trying to eyeball whether the text is vertically aligned.
Is there a better way to shrink a jQuery Mobile button and keep its text vertically aligned? I don't mind changing the height or line-height, but I don't like having to eyeball it; for example, it would be easier if I could have the height and line-height be the same value.
I'm using jQuery Mobile 1.3 RC1 with jQuery 1.8.2. I have noticed that jQuery Mobile apparently adds a style attribute with calculated min-height property to the data-role="page" element. This is causing some problems with the particular design and layout I'm using. I have a min-height property in my CSS, but it is ignored since jQuery Mobile adds the min-height directly to the element via a style attribute.
If I use Firebug or Web Inspector to disable the element's min-height style property everything works perfectly.
I was given this design that was done by a previous CSS designer and I'm trying to integrate jQuery Mobile into i to make use of the jQuery Mobile widgets and the like. Unfortunately I don't have much CSS experience myself, so a reply of "redesign your HTML and CSS" doesn't help me much.
All I need to do is prevent jQuery Mobile from adding the min-height style property. How can I do it?
I'm using jQuery 1.4.1 with jQuery UI 1.8 to create an autocomplete widget. The widget works great on Firefox, but fails on IE 6 and IE 7 with the following unhelpful message:
Error: 'length' is null or not an object Code:0
The autocomplete widget appears to send the term to my server. The failure occurs sometime after the server has sent the response that contains the search JSON result. The list of results never appears, and the error badge appears in the lower-left corner of the IE browser window.
I've tried the jQuery autocomplete demos using IE 6 and 7 and they work OK, but for some reason it's not working in my application.
I'm not doing anything out of the ordinary that would seem to be causing the error. I do use a custom "select" method to do some work after the user has selected an item, but that method never gets called since the autocomplete list never gets displayed in the first place. Even so, I removed the custom "select" method and the problem persisted.
Until this error occurs there are no other JavaScript errors on the page.
Does anybody have any idea what could be going wrong and how I could fix it? I did some web searches and I saw what appeared to be similar issues with the date widget (related to firing onChange events or something like that?) but other than that I've had no luck.
Could it be anything with the JSON response the server is returning? It looks OK to me but maybe I'm missing something.
Again, it works in Firefox, so there must be some IE quirk I'm missing.