jquery - Why are my textareas and text input fields within sortable divs uneditable for all browsers except Chrome? -
i have group of sortable divs rendered corresponding jquery ui widget.
i have been testing in chrome (so far), , in true google fashion, find way make things work (even if there might slight errors trip other browsers). now, i'm not sure if what's going on or not, suffice say, in scenario works fine in google chrome, not in other browser.
there lot of code here, feel free skip if think may know how jquery-ui's sortable widget may cause these problems in non-chrome browsers. maybe there few simple scenarios hint me check out, if technical , feel still helping me, code , markup below.
here concerning jquery (the stop call function contains test data now):
$(".editcontainer").sortable({ revert: true, cursor: "move", stop: function (event, ui) { $(this).find(".editobjectstable").each(function () { console.log($(this).find(".pageordernum").text()); }); } }); concerning html (there bit, sry that. it's c# generated , had line-for-line format 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 participate in connect-cty notification service. know personal information important, , rest assured not share anyone. if have not received test phone call us, or provide additional contact information, click connect-cty image below 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 concerning css (again, sry much, doesn't concern section of page has been removed not bloat post more 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, behovior:
chrome:
works perfectly
ie 10:
glitchy can be, jquery sortable widget in place. ultimately, don't care browser (does except microsoft care ie?). when comes web-app, allowed not compatible ie.
firefox:
when click in textarea or text input fields, gain focus, , cursor blinks, however, user unable reposition cursor clicking anywhere within text field. dragging on text highlight impossible. if arrow keys "up" or "down" used, controls scrollbar, instead of text cursor.
other browsers:
again, don't care. @ least work in firefox in addition chrome, if it's not possible...
and here jsfiddle...:
...but looks bad , sortable doesn't work, behavior of text fields still acts in environment, @ least you'll able see that.
any suggestions on causing this?
additional info:
not sure if matters or not, doctype using is:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
you have css sample twice (in table.editobjectstable , .editobjectstable *) :
-moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; try removing if not need it. should fix.
Comments
Post a Comment