Hello I need some help with a bug in Internet Explorer 9. I am currently developing some CRUD screens in ASP.NET 4 MVC 3 Razor. In a multiple screen I use the #Html.DropDowListFor to create easy links for Foreign keys.
But when I few these in IE9 (and only IE9) the DropDownList will be rendered smaller than its usual size, the text will be displayed a few pixels lower than normal, and the if the word that is displayed is larger than a small amount of characters(not sure what number, I think it's about 10) it will not be fully rendered. The weird part is that when I click on the DropDownList it will fix itself.
The View code:
#Html.DropDownListFor(model => model.Asset.FkAssetTypeId, new SelectList(Model.AssetTypes, "AssetTypeId", "Name"))
#Html.ValidationMessageFor(model => model.Asset.FkAssetTypeId)
The Model code:
[Display(ResourceType = typeof(I18N_Asset), Name = "Label_Asset_FkAssetTypeId")]
public int FkAssetTypeId { get; set; }
Anybody have any experience with this issue, and know a way to fix this? thank you for the help.
I have found what the problem was, I was using JQuery tabs on the same page. This caused the frontsize of the dropdownlistfor-s to not scale to the css that is set for the whole site. but instead renders the dropdownboxfor with the frontsize of the JQuery tabs and than sets the frontsize to the css.
I have solved this issue by using Javascript to set the font-size in a Document.ready function:
// IE9 causes a bug where the dropdownlists will not be displayed correctly because they won't adapt to their current font-size
// this javascript fixes that by resetting the font-size
if (window.navigator.systemLanguage && (!document.documentMode || document.documentMode === 9)) { //check if IE9 is being used
var list = document.getElementsByTagName('Select'); // get all dropdownlists
for (i = 0; i < list.length; i++) {
list[i].style.fontSize = list[i].style.fontSize; // reset the font-size
}
}
Related
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
I use Jqgrid in my MVC project. Because the view has many column, not all column are showned in screen same time. There is horizon scrollbar to allow user see an others columns. Page size is 20.
But, when user use mouse to scroll. The header text is disappeared. This issue is occur only in IE10.
More information, if i press next page, the current header text is shown, but, an others header text disappear.
I also refer to this post http://forums.asp.net/t/1990281.aspx?Jqgrid+Header+text+is+overlapped+in+IE10 but cannot resolve.
Anyone has idea for this?
Thank you
Update:
I fake it by using this code:
$(function () {
$("#gview_" + viewId + "top").scroll(function () {
//// This code fixes issue: headers disappear in jqgrid view when the view has horizontal scrollbar
$(".ui-jqgrid-htable").css('background-color', 'rgb(66, 139, 202)');
var headers = $("div[id*='jqgh" + viewId + "']");
if (headers != null && headers.length > 0) {
for (var i = 0; i < headers.length; i++) {
var header = headers[i];
//// Just reset text
header.innerText = header.innerText;
}
}
});
});
This seems to be related to this issue described here:
https://stackoverflow.com/a/25305317/435280
And as reported bug in IE 10:
IE 10 elements with relative position disappearing when scrolling in parent element on Windows 7
The only proposed resolution from MS was to upgrade to IE11 which doesn't really solve the problem if trying to support IE10 users.
I have set 'enableTextSelectionOnCells' option to true to select text in slickgrid but I can only select text in IE and chrome but not in firefox. I know this is bug in slickgrid and it had been fixed in slickgrid 2.2 but I am using slickgrid V2.1 and don't want to upgrade to V2.2. Is there any way to select text in firefox using slickgrid 2.1
I had the same problem as you have and I finally found the solution from a pull request made by the user icoxfog417 (thanks mate), the pull request is not yet approved (hopefully soon) but I tried it and it works on all 3 browsers which I tried (in my case FF27, IE8, Chrome31). You do have to modify 1 of the core file slick.grid.js but it's worth it :) The pull request is this one: Pull Request #746: fix issue#739
The code change is simple and looks like this:
Modify the file slick.grid.js at line 2236, replace the code with this:
// if this click resulted in some cell child node getting focus,
// don't steal it back - keyboard events will still bubble up
// IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
var selection = getTextSelection(); //store text-selection and restore it after
setFocus();
setTextSelection(selection);
}
then insert at line 2418 (after the setFocus() function), insert this new code:
//This get/set methods are used for keeping text-selection. These don't consider IE because they don't loose text-selection.
function getTextSelection(){
var textSelection = null;
if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
textSelection = selection.getRangeAt(0);
}
}
return textSelection;
}
function setTextSelection(selection){
if (window.getSelection && selection) {
var target = window.getSelection();
target.removeAllRanges();
target.addRange(selection);
}
}
Voilà!!! Quite happy about it :)
I am using Asp.Net MVC3, for a project.
In one of the page, I am using MS Charts. In View I have a Image which shows the chart as follows:
<img src="#Url.Action("RenderCharts", "Home", new
{
XAxisColor = ViewBag.XAxisColor,
YAxisColor = ViewBag.YAxisColor,
})" alt="Charts" runat="server" />
I have 2 CheckBoxes, which is used to change Chart Axes Colors. When the checkbox is clicked, page is submitted and checkbox status is stored and based on that Chart is rendered:
bool XAxisColor = (#ViewBag.XAxisColor) ?? true;
bool YAxisColor = #ViewBag.YAxisColor ?? false;
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor",
onClick = "this.form.submit();" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter",
onClick = "this.form.submit();" })
Y Axis Color
When first time the page is loaded, RenderCharts() Action gets called and Chart is rendered.
But when i Click any of the CheckBox, RenderCharts() Action gets called twice.
I could not understand this issue. I have created a sample Application which can be downloaded from here https://www.dropbox.com/s/ig8gi3xh4cx245j/MVC_Test.zip
Any help would be appreciated. Thanks in advance.
This appears to be something to do with Internet Explorer. Using your sample application, everything works fine in both Google Chrome and Firefox, but when using IE9, there are two Action requests on a postback.
Using the F12 developer tools on the network tab, it shows an initial request to RenderCharts which appeared to be aborted:
The (aborted) line in the middle is, I suspect, the additional request you're seeing. Why this happens, I don't know!
Finally got the answer. The problem was
runat="server"
in the Img tag.
Removing runat fixed the issue.
I can eliminate the IE issue in the following manner by simply using a bit of JQuery instead. A few possible advantages...
It eliminates the cross-browser issue.
It is an unobtrusive approach (not mixing javascript and HTML in the view).
You can update the image via ajax.
Create a new file in the scripts folder (e.g. "chart.js") which will simply attach an anonymous function to the the click events of your checkboxes from the document ready function. You would obviously need to include the script reference in your page as well:
$(document).ready(function () {
// Attach a function to the click event of both checkboxes
$("#chkXAxisColor,#chkScatter").click(function () {
// Make an ajax request and send the current checkbox values.
$.ajax({
url: "/Home/RenderCharts",
type: "GET",
cache: false,
data: {
XAxisColor: $("#chkXAxisColor").attr("checked"),
YAxisColor: $("#chkScatter").attr("checked")
},
success: function (result) {
alert(result);
$("#chart").attr("src", result);
}
});
});
});
Best of all, you get to eliminate the javascript from your view :)
...
<div style="margin: 2px 0 2px 0">
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter" })
Y Axis Color
</div>
...
This is of course a very basic example which does eliminate the IE issue but you could get fancier from there in terms of how you update the image + show a loading gif, etc with only a few more lines.
Hopefully it is a workable solution for you!
I am using MVC3 and I have an Iframe in my page, and design mode for this Iframe is turned on for editing at run time. while running this in IE9, I am unable to select the text beyond the visible area of the Iframe. For example: if the first 7 lines are visible in my Iframe, then when I scroll to select the content in the 10th line, then the selection does not occur.
<iframe id="RFrame" runat="server" style="width: 900px;"></iframe>
<script type="text/javascript">
Sys.Application.add_load(PageLoad);
function PageLoad() {
var frame = $get('<%=this.RFrame.ClientID%>');
$get('<%=this.RFrame.ClientID%>').contentDocument.designMode = "on";
frame.focus();
}
</script>
Note: this works fine in all other browsers except IE9. issue occurs only when the document mode is set as IE9 by default for bowser mode IE9.
Can anyone let me know the reason for this behavior or how to resolve this?
The problem you are facing is caused by setting designMode = "on"
To fix this issue do not set designMode = "on", instead set contentEditable = true.
Example:
var editor = document.getElementById("RFrame");
editorDoc = editor.contentWindow.document;
var editorBody = editorDoc.body;
editorBody.contentEditable = true;
This will also remove the horizontal scrollbar from the IFRAME displayed by IE9 when compatibility mode is disabled.