I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
Related
I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
I'm using jQuery Mobile and no matter how much content is on the page there is always a scrollbar that appears to the right. Even turning on overflow-hidden doesn't make it go away. The page has nothing but a header, a link, and a panel. How can it be removed?
The HTML is roughly as follows:
<body>
<!-- Document framework -->
<div data-role="page">
<div data-role="panel" id="toolmenu" data-theme="a">
<form>
<fieldset data-role="controlgroup">
<legend>Select Tool:</legend>
<input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio">
<label for="radio-choice-v-2a">One</label>
<input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio">
<label for="radio-choice-v-2b">Two</label>
<input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio">
<label for="radio-choice-v-2c">Three</label>
</fieldset>
</form>
</div>
<div data-role="header">
<h1>TITLE</h1>
</div>
<div data-role="content">
Stuff<br />
Open panel link
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
Thanks.
I solved the problem. The issue was that I had the css files in the wrong order. When you are using a custom theme with jquery mobile, you have to have the css files in a particular order--namely, your themeroller-created custom theme has to come BEFORE the jquery mobile css, and you have to use jquery.mobile.structure-1.4.2.min.css (or the equivalent for whatever version you are using anyway), not the full css file.
I Did do my home work but i cannot get it to work.The Button Styles Are Not Refreshing Please Help.
<div id="qpage" data-role="page">
<div data-role="header">
<a id="exit-quiz" data-role="button" data-icon="arrow-l" >Exit</a>
<h1 id="ques-title">#ques-title</h1></div>
<div data-role="content">
<div class="ui-bar-a" id="ques-timer">
#ques-timer
</div>
<div id="question"><h3>#Question</h3></div>
<div class=".button-set" data-role="controlgroup" id="answerbox">
<a data-role="button" id="answer_1">#answer_1</a>
<a data-role="button" id="answer_2">#answer_2</a>
<a data-role="button" id="answer_3">#answer_3</a>
<a data-role="button" id="answer_4">#answer_4</a>
</div>
<div id="explanation">
</div>
</div>
<div data-role="footer"><h2>Copyright Kaveen</h2></div>
</div>
This is Th Javascript I wrote
$("#subject1").bind('click',function(){
var json = $.get("test.json",function(data){
$("#question").html(data.question);
$("#answer_1").html(data.mcq_1);
$("#answer_2").html(data.mcq_2);
$("#answer_3").html(data.mcq_3);
$("#answer_4").html(data.mcq_4);
});
i did try $( "div[data-role=page]" ).page( "destroy" ).page(); But it wont work Plese Help Me Thank you. JSFIDDLE http://jsfiddle.net/xRTCu/
Try this, it should work:
$("#answer_1").button("refresh");
If that is also not working, try this
$("#answer_1").buttonMarkup();
EDIT: jsfiddle updated http://jsfiddle.net/androdify/xRTCu/4/
Use this:
$("#answer_1 .ui-btn-text").text(data.mcq_1);
Why? Because jquery mobile adds a span around the button which has class="ui-btn-text"
Try $( "div[data-role=page]" ).trigger ("create") if you're using the latest version of jQuery mobile. page was deprecated some versions ago.
If you're using an older version of jQM, then you could use $("[data-role=button]").button().button ("refresh") after you're done appending your JSON data into those buttons.
EDIT
From your fiddle I can see that you're using html() and that's erasing jQM's markup. This is what data-role=button converts your markup:
<a data-role="button" id="answer_1">#answer_1</a>
//becomes
<a data-role="button" id="answer_1" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-first-child ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">mcq wrong</span>
</span>
</a>
So by using html() youre effectively erasing everything inside a. Try searching for ui-btn-text class inside a like this and then run html with your text in it:
$(".ui-btn-text", "#answer_1").html(data.mcq_1);
//OR
$("#answer_1").find(".ui-btn-text").html(data.mcq_1);
Here's your updated demo : http://jsfiddle.net/hungerpain/xRTCu/3/
I am opening a page as a dialog. This dialog does not style the checkbox correctly.
Tried using checkboxradio("create"); but no joy.
How do I get the checkbox to style correctly in the Dialog box??
Here's a jsFiddle with the code.
You need to put the checkbox in a div with the proper markup
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
Example: http://jsfiddle.net/shanabus/8xMX2/12/
Based on the example in the docs here: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html
I think you'll have to put the checkbox inside of a form tag in order to get jQuery Mobile to style it.
Looks like this might be a bug. Adding the <form> tag works but you also had create but needed refresh for the checkboxradio():
http://jsfiddle.net/8xMX2/11/
JS
$('#page2').live('pageshow', function(){
$("input[type='checkbox']").checkboxradio("refresh");
});
HTML
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
Open as Dialog
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
Back
<h1>Page Two</h1>
</div>
<div data-role="content">
<form>
This is a dialog Box.
JQM seems to be not styling the below checkbox.<br>
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">A Checkbox</label>
<br>
A button is styled well.<br>
Just a Button
</form>
</div>
</div>
We just updated from jquery mobile beta 2 to rc2. We had a custom button that we don't want jqm to initialize (add extra markup) so we used this:
<button id="buttonid" data-role="none"></button>
And that worked perfectly, but now with the update it is actually initializing the button. I don't see any updates in the release notes or the documentation. Am I missing something?
Markup after update:
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text"></span>
</span>
<button id="buttonid" data-role="none" class="ui-btn-hidden" aria-disabled="false"></button>
</div>
UPDATE
As Phill pointed out, my problem is hard to reproduce. Could be something with my code but it seems strange that simple changing version creates the behaviour for me. Here is additional markup that I first stripped out from example:
<ul class="item" data-role="listview" data-inset="true">
<li data-role="list-divider">Something</li>
<li>
<div class="block_container" data-role="none">
<div class="block block_small">
<button data-role="none" id="check-123" class="check" data-id="something"></button>
</div>
<div class="block block_small assignment">
<button data-role="none" id="assign-123" class="assignmentoverlay"></button>
</div>
<div class="block">
<h3>
Something
</h3>
<p>
lorem..
</p>
</div>
</div>
</li>
UPDATE 2
I found what the problem is. I am populating my list from javascript. At the end I'm calling trigger("create"). This will enhance all the elements in my list, even those with data-role="none.
jsfiddle to reproduce problem - http://jsfiddle.net/V2xAX/9/
Updating title of question
UPDATE 3
Hopefully the last update. We got it to work by doing the following:
When calling trigger("create")on my list, every element will be enhanced. We don't want this.
When calling trigger("create")on the page element holding the jquery mobile page, only elements without data-role="none"will be enhanced. This is the behavior we want.
Link for testing - http://jsfiddle.net/V2xAX/16/
It would be interesting to know why this happens :)