Question
I have a group of sortable divs rendered by the corresponding jQuery ui widget.
I have been testing this mainly in Chrome (so far), and in true Google fashion, they find a way to make things work (even if there might be slight errors which would trip up other browsers). Now, I'm not sure if that is exactly what's going on or not, but suffice it to say, that everything in this scenario works fine in Google Chrome, but not in any other browser.
There is a lot of code here, so feel free to skip it if you think you may know how jQuery-ui's sortable widget may cause these problems in non-Chrome browsers. Maybe there is a few simple scenarios that someone could hint to for me to check out, but if it is technical and you feel like still helping me, all the code and markup is below.
Here is the concerning jQuery (the stop call back function only contains test data for now):
https://stackoverflow.com/questions/19229267
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian$(".editContainer").sortable({
revert: true,
cursor: "move",
stop: function (event, ui) {
$(this).find(".editObjectsTable").each(function () {
console.log($(this).find(".pageOrderNum").text());
});
}
});
Concerning HTML (There is a bit, sry about that. It's C# generated and I had to line-for-line format this for readability):
<div class="editContainer">
<table class="editObjectsTable">
<tr>
<td class="pageOrderNum" rowspan="2">1.</td>
<td rowspan="2" class="objectName">Paragraph</td>
<td class="settingType">Text Content</td><td class="settingType">Text Alignment</td>
<td class="settingType">Highlight</td>
<td class="objectControlButtonHolder" rowspan="2">
<button class="deleteObjectBtn">X</button>
<input id="objID" type="hidden" value="181" />
</td>
</tr>
<tr>
<td class="textAreaHolder">
<textarea maxlength="4000" class="editTextArea">Please accept our invitation to participate in the Connect-CTY notification service. We know your personal information is important, and rest assured that we will not share it with anyone. If you have NOT already received a test phone call from us, or you would like to provide additional contact information, click the Connect-CTY image below to sign up.</textarea>
</td>
<td class="alignmentTableHolder">
<table class="alignmentTable">
<tr>
<td class="alignmentRadioHolder">
<input id="inputRadioLeft181" type="radio" name="paragraphAlignment181" value="left" />
</td>
<td class="alignmentRadioHolder">
<input id="inputRadioCenter181" type="radio" checked="checked" name="paragraphAlignment181" value="center" />
</td>
<td class="alignmentRadioHolder">
<input id="inputRadioRight181" type="radio" name="paragraphAlignment181" value="right" />
</td>
<td class="alignmentRadioHolder">
<input id="inputRadioJustify181" type="radio" name="paragraphAlignment181" value="justify" />
</td>
</tr>
<tr>
<td class="alignmentLabelHolder">
<label for="inputRadioLeft181">Left</label>
</td>
<td class="alignmentLabelHolder">
<label for="inputRadioCenter181">Center</label>
</td>
<td class="alignmentLabelHolder">
<label for="inputRadioRight181">Right</label>
</td>
<td class="alignmentLabelHolder">
<label for="inputRadioJustify181">Justify</label>
</td>
</tr>
</table>
</td>
<td class="highlightTableHolder">
<table class="highlightTable">
<tr>
<td class="highlightCheckboxHolder">
<input id="inputCheckboxItalic181" type="checkbox" name="paragraphHighlight181" value="italic" />
</td>
<td class="highlightCheckboxHolder">
<input id="inputCheckboxBold181" type="checkbox" name="paragraphHighlight181" value="bold" />
</td>
<td class="highlightCheckboxHolder">
<input id="inputCheckboxUnderline181" type="checkbox" name="paragraphHighlight181" value="underline" />
</td>
</tr>
<tr>
<td class="highlightLabelHolder">
<label for="inputCheckboxItalic181">Italic</label>
</td>
<td class="highlightLabelHolder">
<label for="inputCheckboxBold181">Bold</label>
</td>
<td class="highlightLabelHolder">
<label for="inputCheckboxUnderline181">Underline</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="editObjectsTable">
<tr>
<td class="pageOrderNum">2.</td><td class="objectName">--Line Break--</td>
<td class="objectControlButtonHolder">
<button class="deleteObjectBtn">X</button>
<input id="objID" type="hidden" value="182" />
</td>
</tr>
</table>
<table class="editObjectsTable">
<tr>
<td class="pageOrderNum" rowspan="4">3.</td>
<td rowspan="4" class="objectName">Image-Link</td>
<td class="settingType">File Name</td>
<td class="settingType">Size</td>
<td class="settingType">New Tab</td>
<td class="objectControlButtonHolder" rowspan="4">
<button class="deleteObjectBtn">X</button>
<input id="objID" type="hidden" value="183" />
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="260" class="editTextInputLeft" value="CTY.gif" />
</td>
<td class="sizeTableHolder">
<table class="sizeTable">
<tr>
<td class="sizeRadioHolder">
<input id="inputRadioThumb183" type="radio" name="imageSize183" value="thumb" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioSmall183" type="radio" name="imageSize183" value="small" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioMedium183" type="radio" name="imageSize183" value="medium" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioLarge183" type="radio" name="imageSize183" value="large" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioWideSmall183" type="radio" name="imageSize183" value="wideSmall" />
</td>
</tr>
<tr>
<td class="sizeLabelHolder">
<label for="inputRadioThumb183">Thumb</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioSmall183">Small</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioMedium183">Medium</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioLarge183">Large</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioWideSmall183">Wide-Sm.</label>
</td>
</tr>
<tr>
<td class="sizeRadioHolder">
<input id="inputRadioWideMedium183" type="radio" name="imageSize183" value="wideMedium" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioWideLarge183" type="radio" name="imageSize183" value="wideLarge" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioTallSmall183" type="radio" checked="checked" name="imageSize183" value="tallSmall" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioTallMedium183" type="radio" name="imageSize183" value="tallMedium" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioTallLarge183" type="radio" name="imageSize183" value="tallLarge" />
</td>
</tr>
<tr>
<td class="sizeLabelHolder">
<label for="inputRadioWideMedium183">Wide-Med.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioWideLarge183">Wide-Lg.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioTallSmall183">Tall-Sm.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioTallMedium183">Tall-Med.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioTallLarge183">Tall-Lg.</label>
</td>
</tr>
</table>
</td>
<td>
<table class="newTabTable">
<tr>
<td class="newTabRadioHolder">
<input id="inputRadioTrue183" type="radio" checked="checked" name="linkNewTab183" value="true" />
</td>
<td class="newTabRadioHolder">
<input id="inputRadioFalse183" type="radio" name="linkNewTab183" value="false" />
</td>
</tr>
<tr>
<td class="newTabLabelHolder">
<label for="inputRadioTrue183">True</label>
</td>
<td class="newTabLabelHolder">
<label for="inputRadioFalse183">False</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="settingType settingType2">Target</td>
<td class="settingType settingType2">Caption</td>
<td class="settingType settingType2">Preview</td>
</tr>
<tr>
<td>
<input maxlength="2000" class="editTextInputLeft" value="https://portal.blackboardconnectcty.com/welcome.aspx?eiid=1207B6088C3571A76F7E" />
<br/>
<span class="testLink">Test</span>
</td>
<td>
<input type="text" maxlength="500" class="editTextInputLeft" value="" />
</td>
<td>
<img class="contentImgThumb" src="/CMS Files/EmergencyNotificationSystem/CTY.gif" title="CTY.gif" alt="CTY.gif" />
</td>
</tr>
</table>
</div>
Here is any concerning CSS (again, sry for so much, anything that doesn't concern this section of the page has been removed so as to not bloat this post any more than it already is):
div.editContainer
{
width: 94%;
height: 400px;
overflow-y: scroll;
border: 1px solid #000;
text-align: center;
margin: auto;
resize: vertical;
}
div.editPreview
{
width: 852px;
margin-left: 0px;
padding-top: 15px;
border-top: 5px double #003500;
}
.editLabelTitle
{
font-size: 1.5em;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-weight: bold;
color: #003500;
}
table.editObjectsTable
{
width: 100%;
margin: auto;
border: 1px solid #888;
cursor: pointer;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #ffecb4;
/* Opera 11.10+ */
background: -o-linear-gradient(bottom, #f5d77d, #ffecb4);
/* Firefox 3.6+ */
background: -moz-linear-gradient(bottom, #f5d77d, #ffecb4);
/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5d77d), color-stop(1, #ffecb4));
/* Newer Browsers */
background: linear-gradient(bottom, #f5d77d, #ffecb4);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d)";
/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d);
}
.editObjectsTable *
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
table.editObjectsTable tr td
{
border-left: 1px dashed #888;
}
td.objectName
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #22862a;
vertical-align: middle;
padding-right: 5px;
border-left: none !important;
}
input.editTextInputCenter
{
width: 95%;
resize: none;
margin-right: 0px;
margin-left: 0px;
text-align: center;
}
input.editTextInputLeft
{
width: 95%;
resize: none;
margin-right: 0px;
margin-left: 0px;
text-align: left;
}
textarea.editTextArea
{
width: 95%;
height: 80px;
resize: vertical;
margin-right: 0px;
margin-left: 0px;
margin-top: 4px;
}
table.alignmentTable, table.highlightTable, table.newTabTable, table.sizeTable
{
width: 100%;
}
td.alignmentRadioHolder, td.highlightCheckboxHolder, td.newTabRadioHolder, td.sizeRadioHolder
{
vertical-align: bottom;
text-align: center;
border-left: none !important;
}
td.highlightCheckboxHolder, td.highlightLabelHolder
{
width: 33%;
border-left: none !important;
}
td.newTabLabelHolder
{
width: 50%;
border-left: none !important;
}
td.alignmentLabelHolder, td.highlightLabelHolder, td.newTabLabelHolder, td.sizeLabelHolder
{
vertical-align: top;
font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
color: #000;
vertical-align: top;
text-align: center;
font-size: .8em;
border-left: none !important;
}
td.settingType
{
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
color: #660000;
position: relative;
}
td.settingType2
{
border-top: 1px dashed #888;
}
td.pageOrderNum
{
width: 50px;
text-align: center;
font-size: 17px;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
color: #826c2c;
border-left: none !important;
}
td.objectControlButtonHolder
{
width: 30px;
vertical-align: middle;
}
td.highlightTableHolder
{
width: 160px;
}
td.alignmentTableHolder
{
width: 160px;
}
td.sizeTableHolder
{
}
td.textAreaHolder
{
min-width: 280px;
}
td.picPreviewHolder
{
}
img.picPreview
{
width: 55px;
height: 55px;
}
.deleteObjectBtn {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:10px;
font-weight:bold;
font-style:normal;
height:15px;
line-height:8px;
width:22px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #b23e35;
}
.deleteObjectBtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
cursor: pointer;
}.deleteObjectBtn:active {
position:relative;
top:1px;
}
And, lastly, the behovior:
Chrome:
Works perfectly
IE 10:
Glitchy as can be, especially with the jQuery sortable widget in place. Ultimately, I don't care about this browser (does anyone except Microsoft care about IE?). When it comes to this web-app, I am allowed to say that it is not compatible with IE.
Firefox:
When you click in the textarea or text input fields, they gain focus, and the cursor blinks, however, the user is unable to reposition the cursor by clicking anywhere within the text field. Also dragging over text to highlight it is impossible. If arrow keys "up" or "down" are used, it controls the scrollbar, instead of the text cursor.
Other Browsers:
Again, I don't really care. I would like to get this to at least work in Firefox in addition to Chrome, but if it's not possible...
And here is a jsFiddle...:
...but it looks bad and the sortable doesn't work, but the behavior of the text fields still acts as it does in my environment, so at least you'll be able to see that.
Any suggestions on what could be causing this?
Additional Info:
Not sure if this matters or not, but the doctype I am using is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Solution 2
You have this CSS sample twice (in table.editObjectsTable and .editObjectsTable *) :
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Try removing it if you do not really need it. This should be a fix.
OTHER TIPS
If you have applied:
$( "#sortable" ).disableSelection();
Then when you finish your sorting, you won’t be able to edit any input boxes – yet check boxes and radios will still work.
The solution is simple:
$( "#sortable" ).enableSelection();
Example :
$("#myId tbody").sortable({
group: 'no-drop',
handle: '#id',
start: function (event, ui) {
},
stop: function (event, ui) {
}
}).disableSelection();
Your problem seems to lie on the following CSS settings:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Removing that from .editObjectsTable * and table.editObjectsTable, it worked on IE. Sorry I dont have FF installed on this machine to test. Works fine on Chrome either way.
