Using jQuery Mobile 1.3. Here is the Rayzor code in my ASP.Net MVC page.
<li data-role="fieldcontain">
#Html.LabelFor(m => m.RememberMe, new { data_theme = "a" })
#Html.CheckBoxFor(m => m.RememberMe, new { data_theme = "a" })
</li>
The resulting HTML renders as this in Chrome and looks the same in IE10 as well:
So far so good. Now when I click inside this checkbox, OR when I tab to the control and press SPACE, IE starts to fail. IE shows another checkbox on top of the one that's already there.
Not right! A quick view of both browser's F12 screens does indeed show that this checkbox exists in the HTML. Here it is highlighted in Chrome:
Is the proper solution to hide this with CSS? If so, I would imagine this is a jQuery bug. I cannot figure out why IE is showing this and Chrome is not. In Chrome the display is set to block, and the zindex is set to 1. So I would have expected it to show in Chrome as well. Obviously I don't want it to; just seems IE is right in this case even though I want Chrome's behavior.
Check your code that populate checkbox.
JQM's checkbox has this input on top of lable. Like this...
<div class="ui-checkbox">
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-on" data-theme="c" data-mini="false" class="ui-checkbox-on ui-btn ui-btn-hover-c ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">Doritos</span>
<span class="ui-icon ui-icon-checkbox-on ui-icon-shadow"> </span>
</span>
</label>
</div>
Related
I have a button which is using angular-ui-bootstrap dropdown and a vanilla text input. Once the page loads, I can freely enter text into the input box. However, after clicking the button, I can no longer focus on the input box: focus continually jumps back to the dropdown button.
How do I fix this problem, or have I hit a bug (and I should raise an issue)?
Here is a simple example using code directly from angular-ui-bootstrap:
https://plnkr.co/edit/JbXo3WfLgrHoXcyC2If4?p=preview
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
<input type="text">
</div>
FWIW, this seems to be the offending function call: https://github.com/angular-ui/bootstrap/blob/7a1d54c8c34265e0e1b7ac1b38f58b5867a2af49/src/dropdown/dropdown.js#L108
Looks like you found an already found bug. Someone raised an issue for the ui-dropdown focus already...please check this link: https://github.com/angular-ui/bootstrap/issues/6372 and also this one which describes your issue: https://github.com/angular-ui/bootstrap/issues/6364
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 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 jQueryUI Tabs and have a requirement to add UI elements to each tab that allow a user to Edit information about the tab, or remove the tab.
The markup I use on the <li> for a given tab looks like this:
<li>
<div style="background-color:Red;"> <-- Red to see what's happening -->
<span>Tab One</span>
<div style="text-align:right; margin-right:3px;">
<div><span id="editTab-1">edit</span></div>
<div><span id="delTab-1">X</span></div>
</div>
</div>
</li>
This renders just as I would hope in IE
______________________________
| Edit|
| Tab One |
|___________________________X__|
but it does not render properly in Chrome or FireFox (the tab is only wide enough for the "Tab One" text, and "Edit" / "X" are mostly "under" the tab (lower Z-Index apparently).
What is a compatible way to achieve my goal?
I'm not sure if this is what you were intending or not, as I haven't tested in IE, but this works in Chrome and FF:
<div id="tabs">
<ul style="cursor:pointer">
<li>
<a href="#tabs-1">
<div style="float: left; margin-right: 20px;">Tab One</div>
<div style="float: right; text-align:right;">
<div id="editTab-1">edit</div>
<div id="delTab-1">X</div>
</div>
</a>
</li>
<li>
<a href="#tabs-2">
<div style="float: left; margin-right: 20px;">Tab Two</div>
<div style="float: right; text-align:right;">
<div id="editTab-2">edit</div>
<div id="delTab-2">X</div>
</div>
</a>
</li>
</ul>
<div id="tabs-1" class="tabPane">Tab One Content</div>
<div id="tabs-2" class="tabPane">Tab Two Content</div>
</div>
See the working jsFiddle
If you want to handle the clicks dynamically, you could use:
var $tabs = $("#tabs").tabs();
$tabs.find("a div[id]").on("click", function() {
var id = $(this).attr("id"),
idTab = parseInt(id.substring(id.length - 1)),
isEdit = id.indexOf("edit") > -1,
isDelete = id.indexOf("del") > -1,
index = $tabs.tabs('option', 'selected');
if (index + 1 === idTab) {
if (isEdit) {
console.log("Edit Tab " + (index+1));
//however you want to edit here
}
if (isDelete) {
console.log("Delete Tab " + (index+1));
$tabs.tabs("remove", index);
}
}
}).css("cursor", "pointer");
See the working jsFiddle
The problem, I think, stems from the fact that the tab <li> and then the <a> inside are floating elements, as designed in the jQueryUI CSS.
The technical part can best be summed up with this quote (from http://css.maxdesign.com.au/floatutorial/introduction.htm)
If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.
So the red <div> is shrinking to the widest element - the <a>. IE and Firefox/Chrome are simply behaving differently, just their interpretation of the specifications. To be honest, that fact that Firefox and Chrome are similar and IE has had a long history of float bugs I'd side with Mozilla/Google here although can appreciate that IE seems to be behaving nicer in this instance.
You can solve the problem by simply setting a width on the red <div>. However the markup could also be a bit cleaner, for example:
<li style="background-color:red;width:150px">
Tab One
<div id="editTab-1" style="text-align:right;margin-right:3px">edit
<p id="delTab-1">X</p>
</div>
</li>
gives the same result.
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 :)