I create modal dialog with form inside it (with some text input).
And I just can't enter the text inside the textbox. Dialog blocks keyboard input.
Here is my simplified example:
<div id="modal-dialog">
<label for="my-text">TRY to input text...</label>
<textarea id="my-text" style="position:relative; z-index:1"></textarea>
</div>
<script type="text/javascript">
var dialog = $('#modal-dialog').dialog({ modal: true });
</script>
Note: You may ask - why did I mentioned about "position:relative; z-index:1"? Because it works fine without it. But I can't remove it because of design.
Note: not modal dialog works fine too.
I'm using jQuery 1.6.2 + jQuery UI 1.8.14
The z-index is the problem. Here is an exemple ( http://jsfiddle.net/c3BPP/ ) of your code with a bigger z-index and it works.
You can also lower the z-index of the JQuery dialog:
var dialog = $('#modal-dialog').dialog({
modal: true,
zIndex: 500
});
By default, it is 1000. Of course your relative or absolute positioned elements needing text input need to be greater than the z-index of the dialog still.
I found that the <form> tag in my dialog was getting a z-index of 1, preventing any of the controls from working. Instead of changing the z-index for each control, simply changing the z-index of the <form> tag to 1010 (a value higher than the default of the dialog) worked for me.
Adding tabindex="-1" helped me resolve this problem.
Here's an example:
<div class="modal fade" tabindex="-1" id="error" role="dialog">
Related
I currently have an element which contains both an input field and an overlay.
The overlay prevents the input field to get focus on dragging the parent.
HTML:
<div class="draggableObject ui-draggable"> // z-index 300
<div class="objectContent">
<input value="500"></input> // z-index 301
<div class="overlay"></div> // z-index 302
</div>
</div>
Javascript/jQuery:
$(".overlay").on('click touchstart', function(){
$(this).parent().find('input').focus();
});
$('draggableObject').on('drag', function(){
$(this).find('input').blur();
});
If I drag the element and release the mousebutton, it causes the overlay to trigger the click event. How can I prevent this from happening?
I tried preventDefault() and stopPropagation(), but niether of these seem to work properly. Or I might've misplaced them.
I have a slider created using JQuery-UI which has 4 slider segments. The structure is something like this:
<div id="mySlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all disabled">
<div class="ui-slider-segment" title="1">
<div class="ui-slider-segment" title="2">
<div class="ui-slider-segment" title="3">
<div class="ui-slider-segment" title="4">
</div>
Initially the slider has the 'disabled' class. When I click on any segment of the slider, it triggers the slideChange event and the event handler which I wrote for that event removes the class 'disabled'. This works as expected in Chrome and Firefox browsers.
My problem occurs when I test this in casper.js. I've tried the following one after the other without success.
I followed the solution posted here: How to move jquery-ui slider with CasperJS
//left and top co-ordinates of the segments fetched using element.getBoundingClientRect()
this.mouse.down(242.890625,488.75);
this.mouse.move(214.46875,403.9375);
this.mouse.up(214.46875,403.9375);
I can't use CSS3 selectors for the triggering mousedown in casper.js, as there are no IDs for the segments, and every segment has the same classes (dynamically generated by JQuery-UI).
var slide = casper.evaluate(function(){
var sliderId = $('#mySlider');
sliderId.slider('value',2);
});
casper.then(function(){
var sliderClass = casper.evaluate(function(){
return document.getElementById('mySlider').className;
});
console.log(sliderClass); //still contains the class 'disabled'
});
Where am I going wrong? I've included both jquery and jquery-ui libraries. Is there any other way?
I am having a difficult time getting this to work. I have a link that opens a jQuery UI Dialog which contains links. Those links open a Bootstrap popover which contain an input field. For some reason, the input field is not editable.
See: http://www.bootply.com/Z46ZXA133U
Markup :
<div id="dialog">
<a data-placement="bottom" data-toggle="popover" data-title="Login" data-container=".ui-front" type="button" data-html="true" href="#" id="login">Login</a>
</div>
<form id="popover-content" style="display:none">
<input type="text" value="try changing me">
</form>
Script :
$( "#dialog" ).dialog({
height: 300,
width: 350,
modal: true,
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
This is because you have
data-container="body"
on your popover. At the same time, ui-widget-overlay and ui-front covers the body area entirely, preventing clicks and keyboard events from being "sent" from body to the popover.
Change to
data-container=".ui-front"
and you are good. Forked bootply -> http://www.bootply.com/AXpc6PKuSO
in my case change data-container="body" to .ui-front did not help!
But the direction is right
I get modal body container selector and use them!
container: '#myModal-2 > section > div.modal-dialog > div',
Try to explain: if you use container='body' and use modal then modal overlay is blocking focus on body elements
When adding an ui-icon element to a jquery dialog, something weird is displayed instead of the requested icon - (check here for an example: http://jsfiddle.net/aE2Fb/)
It seems like ui-state-default somehow hides the actual icon, because if I remove it, then icon shows up ok. Note that same issue occurrs with ui-state-hover as well.
<div id="dialog" title="Basic dialog" class="">
<span class="ui-icon ui-state-default ui-icon-plusthick ui-corner-all" ></span>
</div>
$(function() {
$( "#dialog" ).dialog();
});
Similar topic was discussed here:jquery ui Portlet : incorrect effect on hover ( ui-state-hover ), but the "fix" was not explained at all and therefore its not really clear, what is going on...
When you put the div into a jQuery UI dialog, you add a load of extra parents, and extra classes - with the result that the icon image file you wanted is getting over-ridden twice.
The first override is from the css for the standard widget background image, which also sets the image position to '50% 50%' - so putting the middle of the image in your button. This then again gets over-ridden back to the correct icon image file, but without any position settings - so you end up seeing the middle of the icon image in your button.
Try putting the icon span inside another container, and move the ui-state-default and ui-corner-all classes to the container instead:
http://jsfiddle.net/7CLL6/
<div id="dialog" title="Basic dialog" class="">
<span class='ui-state-default ui-corner-all'>
<span class="ui-button ui-icon ui-icon-plusthick"></span>
</span>
</div>
I have two dynamic horizontal control groups of radio buttons:
<div class="categories-panel" id="sections-panel">
<fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
<!-- ko foreach: Sections -->
<input type="radio"
data-mini="true"
...
/>
<label data-bind="text:Name, attr:{'for':Id}"></label>
<!-- /ko -->
</fieldset>
</div>
The content of controlgroups is updated by knockoutjs. The markup is updated this way:
self.refreshCategoriesList = function() {
$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
$("#category-choice-fieldset").controlgroup();
};
The problem is: the controlgroups don't fit in one row until I turn of and turn on the display: inline-block property of .ui-controlgroup-controls div in debugger:
before display: inline-block refresh:
http://i890.photobucket.com/albums/ac105/cubius/screen-1.png
after display: inline-block refresh (desired view):
http://i890.photobucket.com/albums/ac105/cubius/screen-2.jpg
How to make jQM always paint my controlgroups in one row?
First of all, the way you select your control group is wrong in this line :
$("#category-choice-fieldset").controlgroup();
Mustnt it be
$("#section-choice-fieldset").controlgroup();
(Maybe a typo)
You could do this in any of the two ways :
Method 1
Works fine in my fiddle. I'd say you move the <script> tag from head to body because page events of jQM dont play well with KnockOut.js and KnockOut.js needs a DOM ready to work properly, AND DOM ready doesnt work well with jQM. So I guess its a vicious loop indeed.
Demo : http://jsfiddle.net/hungerpain/k7UR5/
Method 2
And you could try one more thing in your refreshCategoriesList method:
//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");
Refreshing the entire controls on the page - thats what trigger("create") does
Demo : http://jsfiddle.net/hungerpain/k7UR5/1/
If you are updating the control group (appending, modifying etc) , access the control group like this:
$("#my-controlgroup").controlgroup("container")["append"]($el);
You need to access the control group container. See my jsfiddle for modifying the control group:
http://jsfiddle.net/androdify/WAzs6/